Google Web Fonts Make Your webpage more attractive

ArticleDirectory

• Guide
• What is web font?
• Use Google Web font
• Google Web font Deficiency

Guide

Since entering the Internet era, the pursuit of beautiful, beautiful, decent, and accessible web pages is one of the most important tasks of any great designer. It provides users with the best reading experience, it is also the life-long demand of every product manager. Text is the most intuitive carrier to convey information. As the saying goes, the use of a beautiful font can reflect the designer's character to a certain extent.

The text displayed on the webpage usually calls the local font to display the text effect. When designing and selecting web fonts, webmasters usually consider some general fonts, such as the Chinese,, Arial and verdana fonts, which are standard fonts, is the font that comes with the system (especially for Windows. If you want to use a special alternative font, consider whether the font is installed on your computer. Therefore, this kind of font display method is very limited. In many cases, you have to use images to replace text. Er, this often affects user experience.

Based on this, Google has introduced the concept of web font.

What is web font?

Google Web font refers to the text in a webpage. It is rendered using online fonts instead of native fonts. The biggest benefit is that any user can see the same text, so there is no need to worry about the user's computer not installing a specific font and the effect is inconsistent. Call the JS script provided by Google to render webpage text.

Even more valuable, the fonts provided by Google Web font are open-source and free, so you don't have to worry about copyright issues!

Use Google Web font

Using Google Web font is very simple. You can apply a wide range of web font to Your webpage in just a few steps.

1,Select a font

Go to the Google Web font Official Website: http://www.google.com/webfontsand select your font.

On the main page of the selected font, the filter conditions are displayed on the left, including category, thickness, slant, and width) and the script used for filtering.

The main area on the right is the font preview area. In the preview area, you can preview the font effect in different text formats (including one word, one sentence, and one paragraph). By default, You can preview the font effect in the form of one sentence (sentence. At the same time, you can adjust the text size and specify the specific text to observe the effect of the text in different sizes. Of course, the sorting function is also supported to facilitate user selection.

2. Add to font collection

In a webpage, you may need to use multiple fonts to display different texts (for example, the title is a font and the body is another font ). In this case, you need to add the font you want to use to the collection.

After you decide to use a certain font, click the add to collection button in the preview area to add the font you selected to the collection to prepare for the next step. This is similar to cooking. You need to first purchase raw materials and spices in the supermarket, select a raw material and spices, add them to your shopping basket, and then check out at the cashier. Then you can start cooking. The collection here is equivalent to the raw material list for cooking. Well, that's easy!

3. Use the selected font

After being added to the collection, the current font you selected is displayed below the main area.

Click [use] To Go To The use place interface.

In this interface, the first choice is to display the fonts you have selected and list the styles supported by each font for you to choose from. Google recommends that the majority of hard-pressed designers select only the desired font as much as possible, because the more fonts they use, the slower the webpage (because there is a process of downloading fonts ).

Step 2: select the character sets you need ). As shown in:

The character set listed here is the character set supported by the selected font. If it is an English font, it is generally the Latin or Latin extended character set.

Step 3: add the script to the webpage to load the library. There are three ways to addCode: Standard CSS method, @ import method, and reference JavaScript method. They are as follows:

• Standard CSS Method, Just like introducing an external CSS file:

<LinkHref='Http: // fonts.googleapis.com/css? Family = princess + Sofia | stint + ultra + expanded'REL='Stylesheet'Type='Text/CSS'>
 

• @ Import Method, Import external CSS in the CSS file:

 
@ Import URL (Http://fonts.googleapis.com/css? Family = princess + Sofia | stint + ultra + expanded );
 

• Reference JavaScript MethodIs to insert a JS script into the HTML file:

<Script  Type  =  "Text/JavaScript"  >  Webfontconfig  = {  Google  :{  Families  :[  'Princess + Sofia: latin'  ,  'Stint + ultra + expanded: 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  );  })();  </SCRIPT> 

Finally, use these fonts in your CSS file. The use of web font in CSS is the same as the normal use of the native font, which is written as follows:

. Post-title{Font-family:'Euphoria script';Font-family:'Kaushan script';Font-family:'Shojumaru';Font-family:'Damion';}
 

Well, it's very convenient, right? Don't try again now !!!

PS: Debugging can be performed on the local machine without passing through the server.

Google Web font Deficiency

Google Web Font does not support Chinese fonts. On the one hand, Chinese people are not doing enough in terms of resource openness; on the other hand, Chinese fonts are large and download takes more time, which is contrary to the purpose of initially improving user experience, it is not suitable for webpage fonts.

In any case, Google Web font provides a new way and experience for web designers to use Web Fonts. In pursuit of personalization, we strongly recommend that you try it.