Custom font embedding on Web pages

Font usage is an indispensable part of web design. Often, we want to use a specific font on a webpage, but this font is not a 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 way for art designers to do this is to make the desired text into pictures. There are several obvious defects in doing so: 1. this font cannot be used in a wide range; 2. the image content is not easy to modify relative text; 3. it is not conducive to website SEO (mainstream search engines do not use the ALT content of images as an effective factor for determining the relevance of webpage content ). 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.

Step 1

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.

Step 2

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 the font as needed on the page:

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

Or

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