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

MySQL Community Server compressed package installation and configuration method

Today, because I wanted to install MySQL, I went ...

Basic learning and experience sharing of MySQL transactions

A transaction is a logical group of operations. E...

Convert XHTML CSS pages to printer pages

In the past, creating a printer-friendly version ...

Recommended tips for web front-end engineers

Let's first talk about the value of web front...

Linux sudo vulnerability could lead to unauthorized privileged access

Exploiting a newly discovered sudo vulnerability ...

How to check disk usage in Linux

1. Use the df command to view the overall disk us...

Method and introduction of table index definition in MySQL

Overview An index is a table of correspondence be...

mysql5.6.8 source code installation process

Kernel: [root@opop ~]# cat /etc/centos-release Ce...

The use of textarea in html and common problems and case analysis

The textarea tag is an HTML tag that we often use....

The difference between clientWidth, offsetWidth, scrollWidth in JavaScript

1. Concept They are all attributes of Element, in...

Docker generates images through containers and submits DockerCommit in detail

Table of contents After creating a container loca...

MySQL learning notes help document

View system help help contents mysql> help con...