Add unlimited fonts to your website with Google Web Fonts

Add unlimited fonts to your website with Google Web Fonts

For a long time, website development was hampered by the fact that they could only use a handful of fonts because of their resources. However, now Google has launched a new web service "Google Web Fonts". The service allows you the possibility to use different fonts from Google on your website. There are no restrictions on the fonts used.

Here is a short description how you can do it in a few steps:

Choose a font

To do this, open Google http://www.google.com/webfonts and choose one you like.

選擇谷歌字體

Get the selected font code

In this example, the "Eater" font will be used. To get the font code, you need to do this on the open page:

代碼谷歌字體

Then you need to add the "/" tag to avoid validation errors in HTML. Therefore, it should be:

Copy code
The code is as follows:

<link href='http://fonts.googleapis.com/css?family=Eater' rel='stylesheet' type='text/css' />

Copy the above code and put it after the <HEAD> tag like this:

Copy code
The code is as follows:

<head>
<link href='http://fonts.googleapis.com/css?family=Eater' rel='stylesheet' type='text/css'/>
...
<!-- other HTML code -->
...

Add CSS code to your web page

Now you can use this font by setting the property "font-family" in CSS. For example, if you want all first-level headings to have the same font, you have to add the following CSS style:

Copy code
The code is as follows:

h1
{
font-family: 'Eater', cursive;
}

<<:  A brief analysis of whether using iframe to call a page will cache the page

>>:  Details of the order in which MySQL reads my.cnf

Recommend

The difference and usage of Ctrl+z, Ctrl+c and Ctrl+d in Linux commands

What does Ctrl+c, Ctrl+d, Ctrl+z mean in Linux? C...

How to use Antd's Form component in React to implement form functions

1. Construction components 1. A form must contain...

Linux Check the installation location of the software simple method

1. Check the software installation path: There is...

Tomcat parses XML and creates objects through reflection

The following example code introduces the princip...

Detailed explanation of CSS margin collapsing

Previous This is a classic old question. Since a ...

MySql quick insert tens of millions of large data examples

In the field of data analysis, database is our go...

Docker container time zone error issue

Table of contents background question Problem ana...

How to update, package, and upload Docker containers to Alibaba Cloud

This time, we will try to package the running con...

JavaScript parseInt() and Number() difference case study

Learning objectives: The two functions parseInt()...

Ubuntu 20.04 how to modify the IP address example

illustrate: Today, when continuing the last offic...

MySQL Database Basics: A Summary of Basic Commands

Table of contents 1. Use help information 2. Crea...