Ways to bring your own fonts to your Web page

In order to make the Web page more beautiful, more personalized, we usually need to use some Web pages to download the fonts, because the system comes with the choice of fonts can not meet the aesthetic requirements of people already.

How to use it? The user's computer does not have the type of font you want to install. To make a picture is can, but not easy to modify Ah, can not be greatly used ah, not conducive to SEO ah, speed is relatively slow ah and so a lot of drawbacks. What to do? Don't worry, we use CSS. CSS has such an excellent function, that is, you can customize the font. Here's the official entry:

CSS custom font, let your font use the arbitrary!

Steps:

1 . Download the required fonts. font Download stations provide fonts that are generally. TTF format.

2, font to format. to ensure that the font is displayed correctly in mainstream browsers, you need to provide 3 font formats. We can take the load off. TTF file to convert the fonts in the other two formats. The conversion of font file format can be obtained through the online font conversion service provided by the website Fontsquirrel or Onlinefontconverter.

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

3. use @font-face to define the font. if you are converting fonts in fontsquirrel.com, then even the steps to define a font are free. After conversion he will provide a download package that contains the required font format and a CSS file stylesheet.css that defines the font style, as well as a demo.html file for viewing fonts. Copy the fonts and stylesheet.css into your CSS folder directory and you can call them. How to create a style that does not meet your requirements can be modified by yourself.

4, in the HTML call CSS.

Attached: CSS Font declaration:

@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}

-------------------------------------------------------------------you've practiced.

<style type= "Text/css" >
@font-face {
Font-family:mycustomfont;
Src:url ("Qarmic.eot")/* EOT file for IE */
}
@font-face {
Font-family:mycustomfont;
Src:url ("Msyh.ttf")/* TTF file for CSS3 browsers */
}
</style>

. testclass{Font-family:mycustomfont;}

----------------End that you've practiced---------------------------------------------------

Ways to bring your own fonts to your Web page