Tutorial:Web/Fonts

Google offers a service entitled Google Web Fonts. This service allows for developers to embed a number of different fonts into their website. There are approximately 629 fonts available through the service, all of which can be supported by every browser after being embedded. The website provides instructions as well, and it is a relatively simple process to embed your font.

Choosing the Font
To choose your web font, simply go to google.com/fonts, and look through all of the fonts for the one you want. The fonts will be listed on the right side of the page, with options to list the font as a single word, a complete sentence, a paragraph, or a poster. On the left side, there is a search box, and several filter options. You can use these to help you find a more suitable font.

Reviewing the Font
After choosing the font, you can review it. There are 6 tabs, the Specimen, Styles, Test Drive, Character Set, Compare, and finally the Description. The Specimen shows how it would look by font size, and the Styles are the different types of the font you want, such as normal, italics, etc. The Test Drive let's you experiment with them. The Character set displays the letters, symbols, and numbers. The Compare tab shows the differences and similarities between the default font and the font you are reviewing currently. Then at last is the Description, which shows the history.

Embedding the Font
To embed the font, you first choose the styles to use out of the list, and also the Character Set. After that you can add it into your document, stylesheet, or script. After that, you will integrate the fonts into your CSS. To see how it might look like, see below.

Document


Stylesheet
@import url(http://fonts.googleapis.com/css?family=Architects+Daughter);

Script
 WebFontConfig = { google: { families: [ 'Architects+Daughter::latin' ] } }; (function {    var wf = document.createElement('script');    wf.src = ('https:' == document.location.protocol ? 'https' : 'http') +     '://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';    wf.type = 'text/javascript';    wf.async = 'true';    var s = document.getElementsByTagName('script')[0];    s.parentNode.insertBefore(wf, s);  });

Integrating fonts into your CSS
font-family: 'Architects Daughter', cursive;