Use Google Fonts to add beautiful fonts to your pages

Objective

Text is a very important part of a Web page. Choose a suitable font for the text, can better show a website's personality, express the message to convey, while attracting users to generate interest.

When it comes to fonts, we first think of the font in CSS, such as:

In this HTML code for the <p> tag defines the font, when the browser resolves <p>some text</p> tag, the first will find the font Arial in the system, if not found, find Helvetica font, If you still can't find it, you'll find the default Sans-serif (non-liner) font for your browser and finally render the text.

 
  
 
Back to top of page
What is a secure font
The concept of safe fonts, perhaps a lot of people are not very familiar with, we first give an example:
Font-family:arial, Helvetica, Sans-serif;
This definition of font (font-family) is a secure font. Each operating system has its own default installed font, and the browser only displays the fonts installed in the operating system normally. The different operating systems installed by default fonts are not identical, and some even the name is not the same, in this case, we must define a secure font, so that the font in all browsers can display properly.
In the above definition of font-family, we choose Arial as the preferred font (note: Arial font is the most commonly used sans serif font, is also the default font of Windows, when the font is very small is not easy to read), but the Apple system does not have this font, So we chose Helvetica (similar to Arial) as the second alternative font, and finally we chose Sans-serif as the third alternative font, if in a system that has neither Arial nor Helvetica, then the browser will use the default Sans-serif font to render text. In this way, we guarantee to a large extent that visitors with different operating systems can see the same (or at least similar) page text.
In addition to Arial, Common Security fonts include:

 
 

  
  
 
   
Verdana font, which is one of Microsoft's core fonts, was developed specifically for screen display. It is widely used, large in width and easy to read, and is the clearest font in the display. CSS notation: Font-family:verdana, Geneva, Sans-serif;
 
   
Times New Roman Font, which is the most commonly used serif font, is the default font for the browser. The legibility of small words is also very poor. CSS notation: font-family: ' Times New Roman ', times, serif;
 
  
 
 
Interested readers can use this link to refer to commonly used security fonts. Http://www.w3schools.com/cssref/css_websafe_fonts.asp
In web development, you should try to use a secure font, which is a highly versatile font, so that visitors can read all the content of the page smoothly.
However, web designers will not be satisfied with the use of these security fonts, how to use beautiful fonts, and in the normal user's browser can be correctly rendered? The answer is: Use the @font-face scheme.

 
  
 
Back to top of page
@font-face Label Introduction
@font-face is listed as a new feature of CSS3, but it is not a fresh technology, it first appeared in CSS2 's specification definition, but was deleted in CSS2.1 and is now officially included in CSS3. Currently the main browser (IE 4+/firefox 3.5+/chrome 1+/safari 3.1+/opera + +) can support this property, so there is no need to worry about browser compatibility issues.
@font-face allows you to use fonts that are not installed on your computer in your Web pages to completely get rid of the security font restrictions. Simply install the font pack on the server, and when the user loads the page, the font pack is automatically downloaded to the user's machine, ensuring that the font is rendered correctly.
With the constant popularity of @font-face, many new sets of font formatting icons have been produced, called network fonts. The Google Fonts API is a set of excellent web font libraries based on @font-face features.
There are many advantages to network fonts:

 
 

  
  
 
   
The use of real text, not pictures, zoom in and zoom out will not affect the rendering effect, the user experience is good;
 
   
Can be identified by search engines;
 
   
Unlike images that need to be rebuilt every time, adding deletes is more convenient.
 
  
 
 
 
  
 
Back to top of page
How to use the Google Fonts API
Google Fonts offers more than 600 high-quality fonts that are compatible with all browsers, without the need to introduce JavaScript, easy to use, and, more importantly, free. (although Chinese fonts are not supported for the time being, the Chinese font library is too large).
Now look at how to use Google Fonts in your Web page.
Select font
Sign in to Google Fonts (Google Fonts official website). (Fig. 1)
Figure 1.Google Fonts Home
On the home page, you can browse through all the fonts directly, you can view them in a single word, or you can see the overall effect by a paragraph of the sentence, as well as adjust the font size. If you are familiar with font classification, you can use the search criteria on the left to filter the font. Once you've found your favorite font, click on the "Add to Collection" button and find all the fonts you've added in "Collection" below the page.
Use the selected font to test your text
On the previous page (Figure 1), in "Collection", click "Review". In the preview page (Figure 2), enter your test text to see the effect. Also on the "Review" page, you can adjust other font-related styles, such as font size, spacing, transformations, and so on. In Figure 2, we chose to test the "condiment" font
Figure 2.Google Fonts Preview page
Add a font link to your page.
If you are sure to use this font, in the "Collection" below the page, click the "Use" button, and on the next page you will see a detailed description, including the font link and how to add the font to your page.
There are three ways to add font links:

 
 

  
  
 
   
Standard mode:
<link rel= ' stylesheet ' type= ' text/css ' href= ' http://fonts.googleapis.com/css?family=Condiment ' >
 
   
@import Way:
@import URL (http://fonts.googleapis.com/css?family=Condiment);
 
   
JavaScript mode:
(The code is omitted by adding a dynamic script and executing to import the font)
 
  
 
 
The next step is to define the font used on that label, for example: on the <class= "MyHeader" > Label,
. myheader {font-family: ' condiment ', cursive;}
You're done, you can now open your Web page and enjoy it (Figure 3).
Figure 3: Test the page effect
Listing 1. Testing the page code
Optimizing Font Pack Loading
If you are not a large-scale use of Google fonts in the Web page, but only in the title or logo to use, then you can add the text parameter in the URL, to limit the size of the loaded font package, the maximum can reduce the size of about 90%, so as to save download traffic. Example: http://fonts.googleapis.com/css?family= condiment ' &text=hello
This way, you will only download the H,e,l,o four-letter font, which greatly reduces the size of the font pack.
Download the font pack
You can also download and install the font pack locally so that you can use the fonts locally, such as in Notepad,microsoft Office.
The method is: In Figure 3, click the Download button, select "Download the font families in your Collection as a zip file"
Advanced App API
Google Fonts also opens up some interfaces, called the Developer API, to get information about the font library.
For example, real-time access to the font Library's actual fonts and related information:
https://www.googleapis.com/webfonts/v1/webfonts?key=YOUR-API-KEY
The return result of this request is a JSON type of data, including the name of each font, the type of style (such as Regular,italic), version, modification time, the requested address of the containing style package, and so on.
Note that there is a key in the URL that is associated with your web App project, and only the registered Web app can successfully invoke the Developer API. We have to register with Google Cloud Console to get this key.
For this Developer API, you can refer to this link.

 
  
 
Back to top of page
Conclusion
Google Fonts is very powerful, but also encountered some loading problems, it is best to font declaration, in the end to add a security font, to ensure foolproof. Another suggestion is to use the appropriate amount of fonts in the page to keep the entire page clean and concise.
http://www.ibm.com/developerworks/cn/web/1505_zhangyan_googlefont/
Use Google Fonts to add beautiful fonts to your pages