Teach you to use GOOGLE Web FONT on Web pages

Now there are many websites popular use of web fonts, most of these fonts from Google font provided 700+ free fonts, for web designers and front-end staff, is a great font library, designers can use the font library to provide free fonts to web design, and the front-end staff can directly call the Web Font style, extremely convenient. This article teaches you how to use!

This article tells you:

#1 Download a free font for Google font library and install it on your computer.

#2 use Google Web font (web font) on a Web page

#3 Egg ^_^

google.com/fonts/

　#1 Download & install free fonts for Google Font Library

Step 1: Select font

Enter the Google font page, select the font you want (you can find the font in the left column or search box), click "add to collection" Add fonts, you can select more, add, the font will appear in the page below the Collection module.

Step 2: Download fonts

After adding your own fonts, click on the Download button in the upper right corner to download the font, as shown below:

Here we choose "zip file" compression package format for download.

Step 3: Install fonts to the computer

Unzip the font package you just downloaded and copy the font file to the operating system's font directory.

Windows Font Directory: c:windowsfonts

If you are a MAC OS user, use the font book to install fonts, and font book is in the Applications folder (choose Go > Application in the Finder).

Then drag the font directly into the installation can!

After the fonts are installed, users can use them in PS, AI, WORD, PDF and other common software.

　#2 use Google Web font fonts on a Web site

Step 1: After choosing a good font, click "quick use" button

Step 2: Select Glyphs

Most of the English fonts have bold, fine, multiple glyph division, on-demand selection can be.

Step 3: Introduce font CSS style sheet

Only need to give a string of <link...> code introduced into the page

And this font name can look at the font-family code given below, the following figure:

The whole process is very simple.

#3彩蛋: Google Font CDN

Mainland users are slower to access Google Web font, and can try to use the Google font CDN to speed up.