MENU


@font face

A font name can be defined to be used as a value for the 'font-family' property. (more here)

font-family
src
font-stretch
font-style
font-weight
font-feature-settings
font-variant
font-variation-settings
unicode-range (the range of Unicode characters supported. Default:' U+0-10FFFF')

font-display
: block: long block period and infinite swap period.
: swap: infinite swap period.
: fallback: short swap period.
: optional: no swap period.
: auto: let the browser decide how to display a font face based on whether and when it is downloaded and ready for use. The 'block period' (invisible fallback font face) is followed by the 'swap period' (fallback font face).
The font is tried one by one downwards. local() uses a font on the visitor's local computer.
RESETRUNFULL
<!DOCTYPE html><html>
<head><style type="text/css">
   @font-face{
      font-family: newfont;
      src: local('Green Web'),
           url('Gabriola.ttf'),
           url('/shared/Shizuru-Regular.ttf');
      font-style:italic;
   }
   p{ font-family:newfont; }
</style></head>
<body>
   <p>Am I a Google Font?</p>
</body></html>