@font-face support in Safari

From Webfonts.info

Jump to: navigation, search

Webfont support in Safari 3.1 and higher

font-family

@font-face {
   font-family: GraublauWeb;
  }
@font-face {
   font-family: "Graublau Web";
  }


src

You may specify the link to the font with relative or absolute URLs. Safari supports TrueType fonts (.ttf) as well as OpenType fonts with TrueType (.ttf) or PostScript (.otf) outlines.

@font-face {
   font-family: GraublauWeb;
   src: url("GraublauWeb.ttf") format("truetype");
}
@font-face {
   font-family: GraublauWeb;
   src: url("http://www.webfonts.info/fonts/GraublauWeb.otf") format("opentype");
}

You can make this a comma-separated list. You can also add locally-installed fonts. In this example, the webfont will only be downloaded if "Lucida Grande" can't be found on the client's system.

@font-face {
   font-family: GraublauWeb;
   src: local("Lucida Grande"), url("http://www.webfonts.info/fonts/GraublauWeb.otf") format("opentype");
}


font-style

Defines the font style. Only one value ("all", "normal", "italic", "oblique") is allowed.

@font-face {
   font-family: "Graublau Web";
   src: url("GraublauWebItalic.ttf") format("truetype");
   font-style: oblique;
}


font-variant

Apparently not supported! If you use a definition like

font-variant: small-caps;

Safari will NOT register a new font and may overwrite any font previously registered with the same name.


font-weight

Defines the font weight. Possible values: all, normal, bold, 100, 200, 300, 400, 500, 600, 700, 800, 900

Relative values (bolder, lighter) are not permitted.

@font-face {
   font-family: "Graublau Web";
   src: url("GraublauWebBold.ttf") format("truetype");
   font-weight: bold;
}

Safari does not seem to accept comma-separated values for font-weight!


unicode-range

Describes the range of supported characters in the linked webfont. The initial value covers the whole range (U+0-7FFFFFFF) of ISO 10646.

The question mark can be used as a wild card. This font covers Latin 1:

@font-face { 
    font-family: Webfont; src: url(font.ttf) format("truetype");
    unicode-range: U+00??;

This font covers the range from Latin 1 to Cyrillic:

@font-face { 
    font-family: Webfont; src: url(fontCYR.ttf) format("truetype");
    unicode-range: U+0000-U+04FF;

Safari does not seem to accept comma-separated values for unicode-range! If you define a list like "U+00??, U+04??" Safari will NOT register a new font and may overwrite an font previously registered with the same name.


font-stretch

Not yet supported.