web custom cool font_html/css_WEB-ITnose

The computer has already installed fonts, but if you have special needs and want to choose other fonts, you need the following steps

1. Find the font that suits you

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. Fonts come in many formats, and different browsers The support is also different

.eot This font is only suitable for IE browser. If you only have .woff font, in order to let IE also display the font, you can change the font through the website

www.fontsquirrel.com /fontface/generator generates fonts with different suffixes.

.ttf (True Type and open Type) This font supports 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 This is a new font format, tailor-made for the web. This is usually a compressed version of the .ttf format, so it is smaller in size and downloads faster. Supported browsers Including: 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 Neither Internet Explorer nor Firefox supports this font. The size is twice as large as other fonts. The only advantage is that it supports the older version of Safari 4.1 and my earlier version.

3. Initialize the font change

Place the .eot, .ttf, .woff, and .svg fonts in the same directory, such as the webfonts directory, for example, I am on this site Downloaded a font https://www.theleagueofmoveabletype.com/linden-hill

Declare the font change in 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 know the purpose of writing so many font formats, support multiple browsers .

4. Use this font

.main p {
          color: #616161;       font-family: LindenHill, Baskerville, serif;         font-size: 1.1 em;
line-height: 150%;
margin-bottom: 10px;
margin-left: 80px;
}

LindenHill in font-family is to be used font.

The screenshot is as follows: