Web custom cool fonts and web custom cool Fonts

Web custom cool fonts and web custom cool Fonts

The computer has a font that has been installed, but if you want to select another font for special needs, the following steps are required:

1. Find the appropriate font

The following sites provide font downloads:

Www.theleagueofmoveabletype.com

Www.exljbris.com

Www.fontex.org

Http://openfontlibrary.org

Www.fontsquirrel.com

Www.google.com/webfonts

2. There are multiple fonts and different browsers support different fonts.

The. eot font is only applicable to IE browsers. If you only have the. woff font, you can use the site

Www.fontsquirrel.com/fontface/generatorto generate different suffixes.

. Ttf (True Type and open Type) fonts support a wide range of devices: IE 9 and later, Firefox, Chrome, Safari, Opera,
IOS Safari (version 4.2 and later), Android, and the Blackberry Browser

. Woff is a new font format customized for the web, which is usually. the compressed version in ttf format is smaller and faster to download. Supported browsers include IE 9 and later, Firefox, Chrome, Safari, Opera,
Blackberry browser, and iOS Safari version 5 and later, but android does not support this font.

. Svg Internet Explorer and Firefox do not support this font, which is twice the size of other fonts. The only advantage is that they support earlier versions of Safari4.1.

3. initialize and modify the font.

Put the. eot,. ttf,. woff,. svg fonts in the same directory, such as webfonts directory, for example, I downloaded a font https://www.theleagueofmoveabletype.com/linden-hill at this site

Declare and change the font in the style:

@ Font-face {
Font-family: 'lindenhill ';
Src: url ('webfonts/LindenHill-Italic-webfont.eot ');
Src: url ('webfonts/LindenHill-Italic-webfont.eot? # Iefix') format ('embedded-opentype '),
Url ('webfonts/LindenHill-Italic-webfont.woff ') format ('woff '),
Url ('webfonts/LindenHill-Italic-webfont.ttf ') format ('truetype '),
Url ('webfonts/LindenHill-Italic-webfont.svg ') format ('svg ');
}

You can understand the purpose of writing so many font formats and support multiple browsers.

4. Use this font

. Main p {
Color: #616161;
Font-family: LindenHill, Baskerville, serif;
Font-size: 1.1em;
Line-height: 150%;
Margin-bottom: 10px;
Margin-left: 80px;
}

LindenHill in font-family is the font to be used.

As follows: