Every time they issue more and more APIs, and Google is one of the most free APIs. This time has presented at conferences Google I/O, made on 19 and 20 of May, Google Font API . This API helps you to add fonts in any web page. This is about as clear benefit:

• Font Having high-quality open source
• It works in most browsers
• It is extremely easy to use.

You can see all the fonts available in the Google Directory of Fonts . For now have 18 sources, with variations in italics, bold, bold italic. In addition one of them has 10 different families. Therefore we have an extensive catalog that will allow us to another style to our website and get out of the typical universal fonts.

In addition, the catalog is very carefully because it has a tab for each of the fonts. Tab you can find the name of the designer, with a link to his biography and other personal data. You also have the description of the letterpress and the set of characters. There are also examples of texts in different sizes from 36px to 12px, in different colors, # 000, # 333 and # 666, and different variants, italic, bold and bold italic can see the example of typography Cararell sheet .

If you find interesting and want to see how to include it in your web tell you different ways, just by using CSS and Javascript.

Only with CSS

You have several ways to include the fonts on your website. The simplest of all is to include an additional style sheet:

<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Font+Name">

Then simply use the font in your style sheet in the usual way:

CSS selector {
  font-family: 'Font Name', serif;
}

If you do not want to load all variants, the variants can specify that you want to add two points and variations you want separated by commas:

<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Font+Name:variante">

If you want to add multiple fonts, it is necessary to make a call each of them, simply separate the names with pipes “|” is sufficient:

<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Tangerine|Inconsolata|Droid+Sans">

And if you want to do everything at once just follow all the above rules and looks something like this:

<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Tangerine:bold,bolditalic|Inconsolata:italic|Droid+Sans">

Using Javascript

If you do not want the burden of your page is affected by having to solve other DNS servers and upload you can not control, you can try WebFont Loader. A Javascript API that gives you more control over the fonts loaded. This form is also very simple, but requires a minimum knowledge of Javascript. To add these lines into the head of your page should have everything ready for use

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js">
</script>
<script type="text/javascript">
   WebFont.load({
   google: {
      families: [ 'Tangerine', 'Cantarell' ]
   }
  });
</script>

This loads the fonts listed in families and if all went well and the browser supports these fonts will be added in the html classes’ wf-active “and” wf-family-type-active ‘(eg’ wf-Cantarell -n4-active ‘).

This allows us to use our font style sheet alternatives in case of not having the desired load of this:

 .wf-inactive h1 {
       font-family: serif;
     }
     .wf-active h1 { 
       font-family: 'Tangerine', serif;
     }

With Loader WebFont sources can apply to other providers such as called Books TypeKit or even make any font suppliers overnight specifying the supplier .

In the call to Loader WebFont can specify callbacks to run your own code at any given time. Calback functions of which are available:

• loading() Called when all modules of web fonts providers (google, typekit, and / or custom) have reportadoq ue start loading fonts.

• fontloading(fontFamily, fontDescription) is called when it starts charging each application for web typography. FontFamily parameter is the name of the font family, and fontDescription represents the style and font weight.

• fontactive(fontFamily, fontDescription) Called when loading has finished each of the applications.

• fontinactive(fontFamily, fontDescription) is called if an application has failed to load.

• select() is called when all web fonts have been loaded or not you were able to charge, as long as at least one is loaded successfully.

• inactive() is called if the font web browser does not support or none of the sources failed to load.

Share on Facebook