|
Computers & Writing Systems
You are here: Type Design > Resources Using SIL Fonts on Web Pages
Important Notice This page is now out of date. An updated guide is available at https://software.sil.org/fonts/webfonts/. Updated 2020-05-01 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 optionsThere 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 systemThe 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 fontsYou 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. Some very old browsers do not support the @font-face rule, in which case 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 serverWOFF (Web Open Font Format) is a font 'wrapping' technology that is has become the standard for web fonts for the long-term future and has broad support. It compresses the font data, so is more efficient (and faster) than referring to hosted TrueType or OpenType fonts. All modern browsers support WOFF, and most SIL font packages now include WOFF versions. 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 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 serviceGoogle Web Fonts is a fast and free service for web designers. It offers a wide range of fonts and supports a wider range of browsers than the @font-face techniques, including older versions of Internet Explorer. Several SIL fonts are available from this service. The best way to get this working is to go to Google Web Fonts, search for the font of interest and follow the instructions. There are multiple ways to use the service. Using Gentium Basic as an example, 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 technologiesThere 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 supportModern 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(/cms/scripts/%22http%3A/site/fonts/Scheherazade-Regular.woff%22) 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 https://dev.w3.org/csswg/css3-fonts/#propdef-font-feature-settings. For more information about turning on Graphite features, see Using Graphite in Mozilla Firefox. Non-Latin fontsSome 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 techniquesHere are some places to look for information on using fonts on web pages: Known problem areasInternet Explorer 6/7/8Internet 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 sizeThe 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-2024 SIL International, all rights reserved, unless otherwise noted elsewhere on this page. |