Since the advent of sites like Google Fonts, Font Squirrel and Typekit, designers have been publishing more and more beautiful typography across the web.
Gone are the days when all website were decked out in is Arial, Tahoma and san-serif, web designers are now leveraging the @font-face CSS2 property along with openly available font services to bring new and exciting fonts into focus across all platforms and browsers.
Traditional Web ‘Safe’ Fonts
By default, when visitors access websites they are forced to view websites in locally available fonts (those installed on their computer). For this reason, it is best practice to always specify multiple fonts for those rare occasions when the primary font is not available. Example:(font-family: Arial,tahoma,sans-serif).
Font Services
Font services brings thousands of open and commercial fonts into libraries for quick browsing, easy use and endless typographic advancements. Many online font services also provides conversion engines allowing for the porting of custom fonts into web-enabled fonts.
Google Web Fonts or Typekit are systems which allow use of fonts hosted on their servers for free. Benefits of the Google Web Fonts API includes improved consistency and readability across multiple user, access to several high quality open source fonts and cross browser compatibility.
Implementing Google Web Fonts
In order to use this font service, head on over to http://www.google.com/webfonts
- Choose a font you like. Select “quick-use” to generate the code for that font.
- Copy and paste the generated code into your html document
- The font can now be accessed in your CSS code like this
<head>
<link href='http://fonts.googleapis.com/css?family=Merriweather+Sans' rel='stylesheet' type='text/css'>
</head>
body {
font-family: 'Merriweather Sans', serif;
font-size: 48px;
}Using @font-face
This alternative provides a self hosted solution, that is fonts can be hosted on the user’s server. @font-face only requires a few lines of CSS and is therefore very easy to use without any third party tools. To get started, visit one of the free font sites like Font Squirrel or Fontex and download a font of your choice. Once you’ve downloaded the font, place the font file in the root directory of your web page. Go into your stylesheet and insert the following code:
@font-face {
font-family: 'FontName';
src: url('font.eot'); /* IE9 Compat Modes */
src: url('font.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('font.woff') format('woff'), /* Modern Browsers */
url('font.ttf') format('truetype'), /* Safari, */
url('font.svg#svgFontName') format('svg'); /* Legacy */
}
/* use custom font */
body {
font-family: 'MyFontFamily', Fallback, sans-serif;
}For Cross-Browser Compatibility, you must include the following font formats:
- Internet Explorer only supports EOT
- Mozilla browsers support OTF and TTF
- Safari and Opera support OTF, TTF and SVG
- Chrome supports TTF and SVG.
Real-time Font Testing with TypeWonder.com
TypeWonder.com takes the hassle out of choosing the webfont that’s right for you. This free-to-use web service allows you to demo your website in various fonts.
Awesome Web Fonts
KodeSmart.com Developer Tools offers a wide range of web ready fonts that you can used to enhance your website’s typography. A demo of each font is also available.