Embed fonts in Web pages with CSS's @font-face properties

Font use is an integral part of web design. A Web page is a vector of text, and we want to use a particular font in a Web page, but the font is not a built-in font for the main operating system, so users may not see the real design when they browse the page.
The most common way for artists to do this is to make a picture of the desired text, which has several obvious flaws:
One, it is not possible to use the font in a wide range;
Second, the content of the picture is not easy to modify with text;
Third, not conducive to website SEO.
There are some methods of using SIFR technology, or Javascript/flash hack on the network, but they are either cumbersome or flawed. The following is how to embed any font in a Web page using only the @font-face property of CSS.

　　First
Get the three file formats you want to use to make sure the font is displayed correctly in the main browser.

Example Source Code. TTF or. OTF for Firefox 3.5, Safari, Opera
. EOT, for Internet Explorer 4.0+
. SVG, for Chrome, IPhone

Here's how to get to a font of these three format files. Generally, we have some format file for that font on hand (or found at the design resource site), most commonly. TTF file, we need to convert this file format to the remaining two file formats. The conversion of font file format can be obtained through the online font conversion service provided by the website Fontsquirrel or Onlinefontconverter. The first site is recommended, which allows us to select the desired characters to generate the font file (the last option in the service), which greatly reduces the size of the font file, making the scheme more practical.

And then
After you get the font file in three formats, the next step is to declare the font in the style sheet and use that font where you want it.
The font declarations are as follows:

Example Source Code@font-face {
font-family: ' Fontnameregular ';
Src:url (' Fontname.eot ');
Src:local (' FontName Regular '),
Local (' FontName '),
URL (' fontname.woff ') format (' Woff '),
URL (' Fontname.ttf ') format (' TrueType '),
URL (' fontname.svg#fontname ') format (' SVG ');
}
/* where FontName is replaced with your font name * /

Use the font where you want it in the page:

Example Source Codep {font:13px fontnameregular, Arial, Sans-serif;}
H1{font-family:fontnameregular}

Or

Example Source Code<p style= "font-family:fontnameregular" > Handful water month in hand, fall floral full clothing. </p>

Embed fonts in Web pages with CSS's @font-face properties