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
What does Ctrl+c, Ctrl+d, Ctrl+z mean in Linux? C...
Recently, the client of a project insisted on hav...
1. Construction components 1. A form must contain...
After installing Docker on the Linux server, Pull...
1. Check the software installation path: There is...
The following example code introduces the princip...
Previous This is a classic old question. Since a ...
cause I recently started to refactor the project,...
In the field of data analysis, database is our go...
Flex layout is undoubtedly simple and easy to use...
Table of contents background question Problem ana...
This time, we will try to package the running con...
Learning objectives: The two functions parseInt()...
illustrate: Today, when continuing the last offic...
Table of contents 1. Use help information 2. Crea...