@font-face Support

Motivation

CSS support for different font styles is basically limited to the 'font-style' and 'font-weight' properties. 'font-style' is limited to 'normal', 'italic', and 'oblique'. But fonts often come in "families" that offer a broader spectrum of styles than CSS can support using these properties. Support for "non-standard" styles is available by using '@font-face' rules that link a particular font to a specific font file.

Inside a '@font-face' rule it is possible to supply a list of files for a particular font in different formats and locations. The file uses will be the first found in the list. This maximizes the chance that the font used in rendering matches the artist's intention. This list can include both downloadable fonts (such as WOFF fonts) and locally installed fonts. Originally, allowing the use of local fonts was intended to save having to wait for a font to download if it was already available locally. With higher Internet speeds and with designers not wanting to be limited to the fonts that come with the operating system, local fonts are rarely used. However, the use of '@font-face' rules with local fonts can be quite useful for Inkscape.

Inkscape's Use

Fully support '@font-face' is quite difficult as Pango does not support "user-fonts", that is fonts directly used out of a file (or even encoded within the SVG file itself). Adding this support to Pango would be quite a bit of work. Inkscape can, however, still benefit from '@font-face' rules in two ways:

Support "non-standard" styles

While Inkscape can't directly link to a font file, it should be possible through '@font-face' to provide access to fonts that now generate a "Warning: Font face with same CSS values already added" warning. This requires being able to match the font name in the 'local' value to a particular system font.

Support use of downloadable fonts

Inkscape won't be able to directly support downloadable fonts such as WOFF fonts but it can make their use easier by allowing an artist to reference the same font as a downloadable font and as a system font. Inkscape will use the installed system font while the same file displayed in a browser after being downloaded from a server will use the downloaded font.

Implementation

Implementation can be broken into three parts:

Parsing the @font-face rule

We use libcroco to handle style files. While libcroco supports parsing of '@font-face' rules, Inkscape does not have the required code to store the results. This is relatively easy to fix and I have code to do so.

Linking font name to Pango font

Pango provides a list of all system fonts. It provides family name, style name, and face name. It is not clear how these map to the names used in @font-face. According to the CSS Fonts Level 3, local fonts are described by their PostScript name or by their full font name (this is operating system dependent: Safari uses PostScript name). The Pango family name and style name appear to be coming from the "Preferred Family" and "Preferred Styles" (as shown by FontForge) and not "Family" and "Style (SubFamily). In any case, CSS dictates that only the "Fullname" be used in matching (which matches the PostScript "Fontname").

Linking @font-face font to Pango font

Once we can find the correct Pango names we need to link the font properties in the style element or property to the correct Pango font. This can be done by searching a list of @font-face declarations for one that matches the given properties. At first, we can just try 'font-family'. Once we find the proper "@font-face" rule we get the local font name which is then matched to the correct Pango font. We then use that font for rendering the text.