@Font-face

Download and use a web font.

Syntax
      @font-face font-properties ;

font-properties:
font-family: fontFamilyName The name of the font. [Required.]
src: URL The URL(s) where the font should be downloaded from. [Required.]
font-stretch: stretch How to stretch the font./* Not supported in Webkit*/
font-style: fontStyleName How to style the font. {normal | italic | oblique}
font-weight: fontWeight The boldness of the font. {normal | bold | 100 | 200 ... 800 | 900 }
unicode-range: unicode-range A range of unicode characters supported by the font, prefixed by U+. default = "U+0-10FFFF"

Valid options for stretch: { normal | condensed | ultra-condensed | extra-condensed | semi-condensed | expanded | semi-expanded | extra-expanded | ultra-expanded } also wider | narrower are supported by IE 10.

To use @font-face you must host the font file yourself.
The copyright on many standard fonts will prevent their use as web-fonts.
Font files should be hosted on the same domain/subdomain as the HTML. Many web browsers will automatically block fonts hosted from a different domain to discourage the hotlinking of font files.

Examples:

@font-face {
         font-family: Geo;
         font-style: normal;
         src: url(fonts/GeosansLight.ttf);
}

@font-face {
         font-family: Geo;
         font-style: oblique;
         src: url(fonts/GeosansLight-Oblique.ttf); 
}

.sampletext {
         font-family: Geo;
}

(CSS 2) Browser Support: All major browsers, but some browsers have font-weight/ClearType rendering issues with some @fonts.

“You gain strength, courage, and confidence by every experience in which you really stop to look fear in the face… do the thing you think you cannot do” ~ Eleanor Roosevelt

Related:

@font-face - MDN Web Docs.
fontsquirrel - A huge repository of free and unrestricted fonts suitable for use with @font-face.
A hosted alternative to @font-face is Google/webfonts (Free).
font-family - Font family for text.
font-size - Font size of text.
font-style - Font style for text.
font-weight - Normal, bold, bolder.
font - Shorthand to set the font properties above in one declaration.


Copyright © 2013-2022 Emw3.com
Some rights reserved