Home

Contact Us

General

Initiative B@bel

WSI Guidelines

Encoding

Principles

Unicode

Training

Tutorials

PUA

Conversion

Resources

Utilities

TECkit

Maps

Resources

Input

Principles

Utilities

Tutorials

Resources

Type Design

Principles

Design Tools

Formats

Resources

Font Downloads

Gentium

Doulos

IPA

Rendering

Principles

Technologies

OpenType

Graphite

Resources

Font FAQ

Links

Glossary


NRSI: Computers & Writing Systems

SIL HOME | SUPPORT | DONATE

You are here: Type Design > Resources
Short URL: http://scripts.sil.org/using_web_fonts

Using SIL Fonts on Web Pages

Victor Gaultney, 2016-10-11

Updated 2016-10-11 to add information on using OpenType and Graphite feature support.


SIL fonts can be successfully used on web pages. There are many strategies available, and some tricks to making them work well. A basic assumption is that the page text is encoded as Unicode UTF-8 text.

Primary options

There are four main options for designing web pages that use SIL fonts. They are described here and demonstrated on another page.

Use fonts on the viewer's system

The technique that works for most current browsers is to have the user download the font from the SIL web site and install it. The text style can then be set using CSS to refer to that particular font. Although this has the highest browser support, it does require a user-installed font. If the font is not installed the system will attempt to display your text using some other available font, and the text could become unreadable.

For example, to set the general text font to Gentium put the following in your CSS:

p { font-family: Gentium, serif; }

For more information see the  W3schools page.

Refer to server-based fonts

If your viewer is using a relatively recent non-Microsoft browser (Safari 3.1+, Firefox 3.5+, Opera 10+, Chrome 4+), you can host the normal SIL font on your server and refer to it on your web pages using the CSS @font-face rule. Note that we currently do not host our normal font files on our servers for use by others in this way - you need to host them yourself. The SIL Open Font License allows this - see the OFL-FAQ for more information.

If the browser does not support the @font-face rule, the system will attempt to display your text using another available font according to the list you define, and the text could become unreadable. Note that versions of Internet Explorer up through 8 do not support @font-face for normal server fonts.

For example, to make the Gentium font available to your web pages place it on your site, then refer to it in CSS in the following way, where 'site/fonts' is your domain and the path to where you have stored the font:

@font-face {
  font-family: Gentium;
  src: url(http://site/fonts/Gentium.ttf);
}

Then define your font styles to refer to the font by defined name, as in the earlier example:

p { font-family: Gentium, serif; }

For a more in-depth explanation and documentation see the  W3C site.

Use standard WOFF fonts hosted on your server

WOFF (Web Open Font Format) is a font 'wrapping' technology that is poised to become the standard for web fonts for the long-term future and has broad support, even in Internet Explorer 9. It compresses the font data, so is more efficient (and faster) than referring to hosted TrueType or OpenType fonts. It also is likely to have better long-term support. As of October 2010, WOFF fonts are supported in Firefox 3.6+, Chrome 6, Internet Explorer 9 preview versions and development versions of Safari.

We are working to provide standard WOFF versions of our fonts that you can download and host on your server. The following fonts are curently available:

If a WOFF version of an SIL font is not yet available directly from SIL, or you wish to modify the fonts in some way, you are allowed to create and host custom WOFF versions of SIL fonts under certain situations. See the OFL-FAQ for specific details.

To use the Gentium Plus test WOFF fonts, copy them to your server and refer to them in your CSS:

@font-face {
  font-family: GentiumPlus;
  src: url(http://site/fonts/GentiumPlus-R.woff);
}
@font-face {
  font-family: GentiumPlus;
  font-style: italic;
  src: url(http://site/fonts/GentiumPlus-I.woff);
}

Then define your font styles to refer to the font by defined name:

p { font-family: GentiumPlus, serif; }

More information on WOFF fonts is available from the  W3C and  Mozilla websites.

Use the free Google Web Fonts service

Google Web Fonts is a new, fast and free service for web designers. It promises a wider range of browser support than the @font-face techniques, including older versions of Internet Explorer. Currently only two families of SIL fonts are part of that service - Gentium Basic and Andika - but more will follow over time.

The best way to get this working is to go to  Google Web Fonts, search for 'Gentium' and follow the instructions. There are multiple ways to use the service. One way is to include the following link in the head element of your HTML page:

<link href='http://fonts.googleapis.com/css?family=Gentium+Basic:400,400italic&subset=latin,latin-ext'
      rel='stylesheet' type='text/css'>

Then define your font styles to refer to the font by the standard name used by Google:

p { font-family: 'Gentium Basic', serif; }

One thing to carefully note is that if you want support for extended Latin characters you need to be sure to include '&subset=latin,latin-ext' in the link. Otherwise the font will only support basic Latin usage. Extended Cyrillic requires a similar specification.

For more information on using this service see  Google Web Fonts.

Other formats and technologies

There are other web fonts technologies, such as  EOT (Embedded OpenType). Each of these modifies the font in some way, and so according to the SIL Open Font License (OFL) the font name must be changed. You are allowed to use these technologies to deliver fonts to web pages, but you must change the font names and follow all other OFL rules. We do not offer any support for these technologies. Note that although Google Web Fonts uses these techniques they have signed a special agreement with SIL that allows them to release modified fonts with the original names.

OpenType and Graphite feature support

Modern browsers support activation of OpenType features through CSS properties for both local and externally loaded fonts.

It is possible to make use of OpenType and/or Graphite font features in an HTML page by specifying them with CSS. To do this you must know the ID of the feature of interest in the font and the value you wish to use. This information is usually included in the font documentation.

In this example we will use the Scheherazade font.

To declare the font, the CSS syntax is:

@font-face {
        font-family: Scheherazade-Regular;
        src: url("http://site/fonts/Scheherazade-Regular.woff") format("woff");
    }

Change "//site/fonts/" to your domain and the path to where you have stored the font.

To declare the feature, the syntax is:

.sch-cv12-R {
        font-family: Scheherazade-Regular; 
        -webkit-font-feature-settings: "cv12" 1; 
        -moz-font-feature-settings: "cv12" 1; 
        font-feature-settings: "cv12" 1; 
}

Please note the order for the "font-feature-settings". It's important to put them in that order in order for them to work in as many browsers as possible.

To use the feature, the syntax is:

class='sch-cv12-R normal'

It is also possible to use other features, such as selection of language features. In the following example, the default Scheherazade font is selected (as you have defined it) and the Urdu (ur) language is selected. Any alternate features defined in Urdu will be displayed.

class='sch-dflt-R normal' lang='ur'

More complete documentation of feature settings in CSS can be found at  http://dev.w3.org/csswg/css3-fonts/#propdef-font-feature-settings.

For more detail on how to specify fonts on web pages see Using SIL Fonts on Web Pages.

For more information about turning on Graphite features, see  Using Graphite in Mozilla Firefox.

Non-Latin fonts

Non-Latin/Non-Roman fonts, and some complex Roman fonts may not work well on web pages. There are complexities regarding text encoding and browser and OS rendering support. We have not done an exhaustive test with our fonts and various browser/OS combinations, and so cannot give definitive support details. The best way to see if the font works for you is to create a page with your specific combination of font and language data and test it in the browsers and operating systems your viewers will be using.

Sources for further tips and techniques

Here are some places to look for information on using fonts on web pages:

Known problem areas

Internet Explorer 6/7/8

Internet Explorer 6/7/8 supports fonts installed on the user's system, but does not support TTF, OTF or WOFF fonts loaded from a server. It does support the @font-face rule, but only for EOT (Embedded OpenType) fonts. SIL fonts can be converted to EOT files, but that modification requires a name change (according to the SIL Open Font License). There are also many web services that offer to enable fonts for IE 6/7/8, but they too modify the fonts and require a name change. IE9 will directly support WOFF fonts. Use of web fonts services such as Google Web Fonts can significantly increase your browser compatibility.

Font size

The size of SIL font files can tend to be larger than others due to the extensive character sets supported. This can be a performance problem, even taking into account automatic compression and caches. If you find that the performance is too slow, the SIL Open Font License allows you to open the font in an editor, such as FontForge, and strip out the glyphs that you do not require. Two things to keep in mind: This modification will require you to change the font name. It will also likely break any OpenType or Graphite code.




© 2003-2017 SIL International, all rights reserved, unless otherwise noted elsewhere on this page.
Provided by SIL's Non-Roman Script Initiative. Contact us here.