Fonts are always the essential part of web design. Sometimes, we need to use some font that is not built in popular operating systems, therefore we may not be able to deliver the original design to website visitors. In this case, graphic designers may use images instead, but it's apparent not a good alternative because:
Step 1 - Fetch font files of all 3 formats.
- You are not able to use the font text-heavily;
- Compared to texts, images are hard to change;
- Not SEO-friendly, even you put relevant keywords to the image alt tags, etc.
- .TTF or .OTF, compatible with Firefox 3.5+, Safari and Opera.
- .EOT, compatible with Internet Explorer 4.0+
- .SVG, compatible with Chrome and iPhone
Basically, we have at least 1 of the 3 formats when we are doing design, so what we need do is simply convert it to other 2 formats. Here we recommend using FontsQuirrel
, because it allows us to convert fonts based on the characters we need, thus dramatically shrinking the size of the font file and make this scheme more practical.
Step 2 - Claim the ideal font in CSS.
After fetching the font files of all 3 formats, we need to claim the font in CSS wherever we need to use it.
Remember to replace fontName with the real font name you are willing to use.
Use the font wherever on the webpage by specifying CSS:
font: 13px fontName Regular, Ariel, sans-serif;
Check this out and hopefully it would do some help. :)