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.