
Where to begin with fonts… Fonts have been a discussion between the graphic artist and the web developer for years. The end-user usually doesn’t know if the website has Helvetica, Arial, Broadway fonts. Most may hear those names and not even know there is much of a difference.
System fonts are lovely to a developer. There are a list of predefined fonts that all PC and Macs will have installed with the operating system. System fonts require no additional coding by the web developer. It is as simple as calling the name of the font family on the stylesheets. There are many perks to using system fonts. For one, system fonts do not require any special code to work. Many of the embedded (non-system) fonts require additional code. These additional steps can bog down a web browser, can have issues in cross-browser compatibility, and can cause issues with SEO. The system font families do not have these issues. Definite perks for these font families.
The non-system fonts, on the other hand, have really nice appeals to them. Non-system fonts in the past were added to a site with images, but new methods of adding these font-families can now create a dynamic non-system font usage. This is great for CMS system where the site’s text will change constantly. Next, do you really want to look the same as everyone else? Some business yes, some may not. Using non-system fonts can make your site completely stand apart from your competition. Depending on the industry and the font, there are statistics that font-families will help increase your ROI. I would only recommend this route if you have the means to test different font-families for your industry.
Look to the future, CSS 3 is going to help change all of this. The @font-face tag is not new, but CSS 3 is trying to standardize this tag. In order to use a non-system font, you would first call the tag ‘@font-face’ and then you can reference the font-family anywhere in your stylesheet after that.
Example:
Non-system font family Magenta
@font-face {
font-family: 'MirageRegular';
src: url('Magenta_BBT-webfont.eot');
src: local('☺'), url('Magenta_BBT-webfont.woff') format('woff'), url('Magenta_BBT-webfont.ttf') format('truetype'), url('Magenta_BBT-webfont.svg#webfontJdmZM5lL') format('svg');
font-weight: normal;
font-style: normal;
}
h2.fontexample { font-family:"MirageRegular"; }
You will notice in the code above the different font sources. Until we can get all browsers to play nicely, we, as graphic designers/developers, must accomodate for both. So each font type above is meant for a different browser.
To the future!