Embed special fonts in Web page HTML-this method is beneficial to seo__html

Although we can through pictures, Flash, SIFR and other technologies to achieve the use of special fonts Web pages, SEO-friendly web pages to embed a special font method, @font-face properties.

Usually the Web page can not use some special fonts, otherwise the viewer may not be able to browse correctly, although we can through pictures, Flash, SIFR and other technologies to achieve the Web page using special fonts,

But there is a serious drawback: it is not conducive to SEO.

Here is a very useful way to SEO special font application: In the CSS through the @font-face property to implement the Web page embedding special fonts.

View Demo download Demo

First step,

Get the three file formats that you want to use fonts to ensure that the font is displayed correctly in the mainstream browser.

. EOT, for use with internet Explorer 4.0+
. TTF or. OTF, suitable for Firefox 3.5, Safari, Opera
. SVG, suitable for Chrome, IPhone

The most common is. TTF file, we need to convert this file format to the other two file formats. Can be http://onlinefontconverter.com/through the website or

The online font conversion service provided by Http://www.fontsquirrel.com/fontface/generator or Onlinefontconverter gets the conversion of the font file format. Here recommend the first

Two sites, which allow us to select the characters needed to generate font files (the last option in the service), which greatly reduces the size of the font file, making the scheme more practical

。

Step Two,

When you get to a font file in three formats, declare the font in the style sheet and use it where you want it.

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 ');
}
/* where FontName is replaced with your font name * *
Use this font where you want it on the page:
p {font:13px fontnameregular, Arial, Sans-serif;}
H1{font-family:fontnameregular}
Or
<p style= "Font-family:fontnameregular" > This is your text content-Lazy people build stations </p>

View the demo            Download Demo