Use the @ font-face attribute of CSS to embed fonts in webpages

Font usage is an indispensable part of web design. A webpage is the carrier of text. We hope to use a specific font on the webpage, but this font is not a built-in font of the non-mainstream operating system, in this way, users may not see the real design when browsing the page.

The most common way for art designers to do this is to make the desired text into pictures, 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.

There are some methods on the network that use the sifr technology or Javascript/flash hack, but the implementation is cumbersome or flawed. The following describes how to embed any font in a webpage only through the @ font-face attribute of CSS.
FirstObtain the three file formats in which the font is to be used to ensure that the font can be normally displayed in mainstream browsers.

Example source code . 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.
ThenAfter 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:

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');}/* replace fontname with your font name-52css.com */

Use the font as needed on the page:

Example source code P {Font: 13px fontnameregular, Arial, sans-serif;} H1 {font-family: fontnameregular}

Or

Example source code <P style = "font-family: fontnameregular"> the moon is filled with flowers and flowers. </P>