Explanation: The CSS declarations (@font-face) allows you to specify which fonts you want to use on your web pages. These fonts can be located on your server or elsewhere on the WWW. Keep in mind that not all fonts are licensed to be used on the WWW (verify before using). In the example below, I am hosting the fonts myself.
At a minimum you should consider including the following fonts:
- eot – Embedded Open type
- ttf – True Type Font
- otf – Open Type Font
- woff – Web Open Font format
- svg – Scalable Vector Graphics (used more on mobile devices these days)
Example CSS code:
To point to the location of the fonts, one needs to use code like the following:
@font-face {
font-family: ‘ChunkFiveRoman’;
src: url(‘chunkfive-webfont-ChunkFive.eot‘);
src: local(‘☺’), url(‘chunkfive-webfont-ChunkFive.woff‘) format(‘woff’), url(‘chunkfive-webfont-ChunkFive.ttf‘) format(‘truetype’), url(‘chunkfive-webfont-ChunkFive.svg#’) format(‘svg’);
font-weight: normal;
font-style: normal;
}
To then use the font (n this case, ChunkFiveRoman), one just needs to indicate the font family. Of course, it is always a good idea to provide fallback (or use a JavaScript framework to gracefully degrade)..
p {
font-family:’ChunkFiveRoman’;
}
Example pages (view the source code):
- http://learning-html5.info/CSS3/fonts/CSS3_Fonts.html (will work in most modern browsers).
- http://learning-html5.info/CSS3/fonts/ChunkFiveRoman-demo.html (demo files after downlaoded from font squirrel)
Font-sources (keep in mind not all fonts are licensed to be used on the WWW):
- http://awesome-fontstacks.com/
- http://www.fontsquirrel.com/
- http://type-a-file.com/
- http://www.fontself.com/ (interesting tool courtesy of Adobe which lets you create a font in your own handwriting – which would be a disaster if I chose to do that).
Font Tools:
- http://www.typetester.org/ (compare fonts side by side)
- http://webfontspecimen.com/ (another tool to compare side by side)
- http://explorationsintypography.com/ (change fonts and observe effects)
References:
- http://www.w3.org/TR/css3-webfonts/
- lynda.com tutorials
Loading ...