Client Side

All the fancy frizz

Adding Google Web Fonts To A Website

Written by: Peter Fisher on November 26, 2012
Tagged under:
Share on FacebookShare on Google+Tweet about this on TwitterShare on LinkedIn

Use Google Web Fonts to make your site standoutThe standard set of fonts on the web are pretty boring. These fonts are ‘web-safe’ and can be used on multiple browsers. Below is a table taken from ampsoft of all the mundane fonts that can be safely used on the web:

Normal style Bold style
Arial, Arial, Helvetica, sans-serif Arial, Arial, Helvetica, sans-serif
Arial Black, Arial Black, Gadget, sans-serif Arial Black, Arial Black, Gadget, sans-serif
Comic Sans MS, Comic Sans MS5, cursive Comic Sans MS, Comic Sans MS5, cursive
Courier New, Courier New, monospace Courier New, Courier New, monospace
Georgia1, Georgia, serif Georgia1, Georgia, serif
Impact, Impact5, Charcoal6, sans-serif Impact, Impact5, Charcoal6, sans-serif
Lucida Console, Monaco5, monospace Lucida Console, Monaco5, monospace
Lucida Sans Unicode, Lucida Grande, sans-serif Lucida Sans Unicode, Lucida Grande, sans-serif
Palatino Linotype, Book Antiqua3, Palatino, serif Palatino Linotype, Book Antiqua3, Palatino, serif
Tahoma, Geneva, sans-serif Tahoma, Geneva, sans-serif
Times New Roman, Times New Roman, Times, serif Times New Roman, Times New Roman, Times, serif
Trebuchet MS1, Trebuchet MS, sans-serif Trebuchet MS1, Trebuchet MS, sans-serif
Verdana, Verdana, Geneva, sans-serif Verdana, Verdana, Geneva, sans-serif
Symbol, Symbol (Symbol2, Symbol2) Symbol, Symbol (Symbol2, Symbol2)
Webdings, Webdings (Webdings2, Webdings2) Webdings, Webdings (Webdings2, Webdings2)
Wingdings, Zapf Dingbats (Wingdings2, Zapf Dingbats2) Wingdings, Zapf Dingbats (Wingdings2, Zapf Dingbats2)
MS Sans Serif4, Geneva, sans-serif MS Sans Serif4, Geneva, sans-serif
MS Serif4, New York6, serif MS Serif4, New York6, serif

Source : http://www.ampsoft.net/webdesign-l/WindowsMacFonts.html

You wouldn’t be wrong if you thought that the web could do with spicier fonts. There are ways of adding different typography to your site without the fear of alienating older browsers. One common way is to use Googles WebFonts. The Tips and Tricks HQ blog have a very good post detailing how to easily add Google Web fonts to your WordPress theme. Of course these fonts can be added to any web site and not just a WordPress blog. The downside to using new fonts in this manner is that they require an extra HTTP request to retrieve the font from the Google CDN, so I wouldn’t recommend using these fonts if you have an over bloated site.

Share on FacebookShare on Google+Tweet about this on TwitterShare on LinkedIn

Peter Fisher is a web developer working in Gloucester UK. Founder of the digital agency Websomatic, author of this blog and the HowToCodeWell Youtube channel. Peter has over ten years of web development experience under his belt

Read all about Peter Fisher

Leave a Reply

Your email address will not be published. Required fields are marked *