How to use some special fonts in Web pages

Although we can use the image, Flash, SIFR and other technologies to achieve Web pages using special fonts, SEO Web pages embed special font methods, @font-face properties.

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

But this has a serious disadvantage: not conducive to SEO.

Here is a very helpful SEO special font application method: In the CSS through the @font-face property to embed special fonts in the Web page.

The first step,

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

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

The most common is that. TTF file, we need to convert this file format to the remaining 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. Recommended here

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

。

Step Two,

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

The font declarations are 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 the font where you want it in 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 station </p>

When it comes to browser compatibility with @font-face, there is a problem with the font format, because different browsers are inconsistent with font formatting support, so it's important to understand what kind of fonts are supported by various versions of the browser, and how the fonts are easily brought to the front. Let me say this question separately, so that we have a concept in mind:

One, Turetpe (. ttf) Format:

The. TTF font is the most common font for Windows and Mac, is a raw format, so he is not optimized for websites, and browsers that support this font have "Ie9+,firefox3.5+,chrome4+,safari3+,opera10+,ios Mobile Safari4.2+ ";

Second, OpenType (. OTF) Format:

The. OTF font is considered to be an original font format, built on a turetype basis, so it also provides more functionality, and browsers that support this font have "Firefox3.5+,chrome4.0+,safari3.1+,opera10.0+,ios Mobile safari4.2+ ";

Third, Web Open Font format (. Woff):

The. Woff font is the best format for Web fonts, he is a compressed version of an open Truetype/opentype, and also supports the separation of meta-packages, browsers that support this font have "ie9+,firefox3.5+,chrome6+,safari3.6+ , opera11.1+ ";

Iv. Embedded Open Type (. EoT) Format:

. EOT fonts are IE-specific fonts that can be created from TrueType fonts and browsers that support this font have "ie4+";

V. SVG (. svg) Format:

The. svg font is a format based on SVG font rendering, and browsers that support this font have "Chrome4+,safari3.1+,opera10.0+,ios Mobile safari3.2+".

This means that at least we need to be in the @font-face. Woff,.eot two format fonts, and even require. svg and other fonts to support more than one browsing version.

@font-face{Font-family:' Mywebfont ';Src:URL (' Webfont.eot ');/* IE9 Compat Modes */Src:URL (' Webfont.eot? #iefix ')Format(' Embedded-opentype '/* ie6-ie8 */url (' Webfont.woff ') format ( " Woff ' /* modern Browsers */ URL (' Webfont.ttf ') format ( /* Safari, Android, IOS */url (' Webfont.svg#svgfontname ') format ( ' svg ' ) ; /* Legacy iOS */}       

The efficiency of network fonts (web font)

You should be aware that font files can be very large in size and require additional HTTP connections, which can slow down the loading of web pages. Therefore, before using the network font @font-face , you need to understand its pros and cons, to determine whether the network font is really necessary to use on your site page.

If you decide to use personalized custom fonts, there is a very flexible way to load only as few font characters and as few font styles as possible (bold/italic). For example, if you use Google Fonts, you can only load the specified font style combination:

@import url(http://fonts.googleapis.com/css?family=Averia+Sans+Libre:400,300italic,700);

How to use some special fonts in Web pages