How to embed special fonts into webpages

When we want to use a specific font on a webpage, but this font is not the built-in font of the non-mainstream operating system, so that users may not see the real design when browsing the page.
The most common method is to make the desired text into an image, which has several obvious defects:
1. The font cannot be used in a wide range;
2. It is not easy to modify the text of the image;
3. It is not conducive to website Seo.
Then, how can we embed any font in a webpage only through the @ font-face attribute of CSS.
First 
Obtain the three file formats in which the font is to be used to ensure that the font can be normally displayed in mainstream browsers.
. TTF or. otf (applicable to Firefox 3.5, Safari, and opera)
. EOT (applicable to Internet Explorer 4.0 +)
. SVG (applicable to chrome and iPhone)
The following describes how to obtain the three types of files in a certain font. Generally, some type of file with the font on hand (or found on the design resource site) is the most common. TTF file, we need to convert this file format to the other two file formats. You can use the online font conversion service provided by fontsquirrel or onlinefontconverter to convert the font file format. We recommend the first site, which allows us to select the desired characters to generate a font file (in the last option of the Service), which greatly reduces the font file size, this solution is more practical.
Then
After obtaining a font file in three formats, the next step is to declare the font in the style sheet and use the font as needed.
The font declaration is as follows:

@ 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 ');
}
/* Replace fontname with your font name */
Use this font as needed on the page: P {Font: 13px fontnameregular, Arial, sans-serif ;}
H1 {font-family: fontnameregular}
Or <P style = "font-family: fontnameregular"> font </P>!