One of the most significant components of a websites uniqueness and design are determined by its fonts. Not only is your Typeface the root of your online branding, but it can also enhance your websites overall user experience and on-site site behavior.
A common problem with most websites, is that the font that is shown can differ, depending on the viewers browser, operating-system and/or device. If you wish to keep the typography and styles as consistent as possible among view-ports, you can use the following try these integration methods:
Web Safe CSS Font Families
- Website: CSS Font Stack
- Pros: Fast-Loading, Compatible with all Devices, OS and Browsers
- Cons: Fonts must be installed locally on viewing device
You can specify your typeface with font-family:"Century Gothic"; in your website CSS, but if the device that is used to view your website does not have "Century Gothic" installed, then a generic font will be used to display the content instead, also known as a fallback.
The generic family typefaces are the ones will be used by the browser/operating system should all other families fail, which could either be serif, sans-serif or monospace.
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;The above CSS will attempt to display the content in "Helvetica Neue" or if the operating system does not have it installed, it will attempt to use the next font, Helvetica, instead and so on. An Apple computer, for example, will often have "Helvetica Neue" already installed, thus will display it accordingly online, whereas a Windows PC may display it using "Helvetica" or less.
Google Fonts
- Website: Google Webfonts
- Pros: Consistent Display, independent of OS
- Cons: Increase Page-Load
One of the more trending sources of embeddable typefaces are that of Google Fonts. You can integrate Google Webfonts simply by choosing the desired typefaces, the corresponding styles and weights and embedding it into your website source. The more font-families and variations you choose to embed into your website, the more its page-load will increase, which you can measure during the Google Font selection process.
Embed Code Example<link href='http://fonts.googleapis.com/css?family=Gabriela' rel='stylesheet' type='text/css'>After embedding the stylesheet, you can simply include that font-family via CSS, using the first method above. Using Google Fonts assures equal display of your chosen Typefaces across all browsers and operating systems.
Cufon
- Website: Cufon Generator
- Pros: Make any Typeface Web Safe & Consistent
- Cons: Longer Page-Load from Cufon Images; Requires JS
A more tedious method, but allows the use of any computer installed typefaces, is Cufon. This method requires that all fonts that we intend to use are commercial free, or if not, that a commercial license for it is purchased.
The font family can then be uploaded and converted into Cufon, which generates an image for each numerical, alphabetical and special symbol available in the uploaded font families.
The generated Cufon file is then embedded on the website and Javascript is used to "Cufon" the desired html elements, which replaces the text with images for the precise font display.
