How to use a custom font in a Web page

Sometimes we need to display a custom font on the Web page, there are a lot of methods on the Internet, the following is the view of their own. First look at the demo effect:

Effect Demo

September 4, 2014 Thursday 13:38:42

USA 00:38:42 Venetian Macao Casino

Japan 14:38:42

United Kingdom 07:38:42

Australia 16:38:42

embedded in the Web page non-system fonts, although the technical can be achieved, but for the domestic, there is not much practical significance, because a Chinese style file at least 20m+, and the various browsers support font files are not the same, that is, on the server side must have 2-3 different format font files, To handle each browser, you can look at the following map.

Thought that this small research done before will not be used in future work, who knows that really used. One customer asked for time, but the font of time must be the font of the electronic watch.

First of all, we want to find this font, because this font is only TTF format, so we need to convert a variety of different formats, as to how to convert, there is software, there is online, I do not specify which kind of use.

After the conversion, you can write the CSS code:

@font-face {    font-family: ' Hooray ';  /* Name the custom font *    /src:url (' Hooray.eot ');    Src:url (' Hooray.eot #iefix ') format (' EoT '),         url (' Hooray.woff '), Format (' Woff '),         url (' hooray.ttf ') format (' TrueType '),         url (' hooray.svg#webfontjkg17vre ') format (' SVG ');}

As for the call, as usual, define font-family where needed, and the name of the font is just the name just right: font-family: ' Hooray ';

Two online font conversion sites, Fontsquirrel, Onlinefontconverter.

How to use a custom font in a Web page