This Guide explains how to use Google font APIs to add network fonts to your own pages. You don't need any encoding. All you have to do is add a specific CSS to the HTML page and associate the font with the CSS style.
A quick example:
This is an example. Copy the following HTML code to a file:
Open the HTML file in a modern browser and you will see the page shown as follows, using a font called "Tangerine:
The sentence is a common text, so you can use CSS to change its style. Try to add a shadow style in the previous example:
As you can see, there is a shadow under the text:
This is just the beginning when you can use the font API and CSS to do things.
Overview:
You only need two steps to start using the Google font API:
1. Add a style sheet to request the network font
2. Similarly, define a node in a style sheet that uses the requested network font
HTML code
Or use an embedded style on this node.
HTML codeNote:When defining a network font in a CSS style sheet, you always need to list at least one fallback web-safe font to avoid unwanted behavior. In particular, add a default CSS font at the end of the list, such as the font "serif" or "Sans-serif. In this way, the browser can roll back to its default font when necessary.
For more information about the network fonts that you can use, see Google fonts.
Specify the font set and style in the style sheet URL:
To determine the URL used in your style sheet connection, you must start with the basic URL of the Google font API:
Then add the URL parameter of the font set to use the name and style of one or more font sets.
For example, to request the inconsolata Font:
Note:Replace all spaces in the font set name with the plus sign (+.
To request multiple font sets, use vertical bars (|) to separate names.
For example, to request three fonts: Tangerine, inconsolata, and droid sans:
Multiple fonts are requested, allowing you to use all these fonts on your page. (But you should not go too far. Most pages do not need a lot of fonts, and the request for many fonts will slow your page loading .)
By default, the font API provides a normal version of the requested font. To request other styles or sizes, add a colon (:) next to the font name and separate the styles and sizes following the comma.
For example:
To know the size and style of the provided fonts, You need to query the Google font directory.
For each style you request, you can provide both the full name and abbreviation. For the size, you can specify another number:
| Style | Symbol |
| Italics | Italic or I |
| Bold | Bold, B, or a number, like 700 |
| Bold italic | Bolditalic or bi |
For example, to request "cantarell" italic and "droid serif" bold, you can use any of the following urls:
HTML code
HTML code
Specify a subset of scripts:
Some fonts support multiple types of scripts in the Google font directory (such as Latin and silel). to specify which subset will be downloaded, you need to add a subset parameter after the URL.
For example, if you specify a subset of Syl for the philosopher font, the URL should be written:
HTML codeFor the Philosophe font, request the subset of Latin and Spanish. The URL should be written:
HTML codeFor a complete list of fonts and font subsets, refer to the Google font directory.
From Google official documentation, the original connection: http://code.google.com/intl/zh-CN/apis/webfonts/docs/getting_started.html
Although the official connection is ZH-CN, but it is still in English, I translated it myself, it is not good to translate .....
Google font [translated from Google official documentation]
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
