Web FontFont User Guide
Contents
1. 2 Browser Support Web FontFonts come in two formats Embedded OpenType EoT which is a legacy format for Internet Explorer versions 4 8 and the new Web Open Font Format worr Browser Web FontFont support Internet Explorer EOT from version 4 WoFF from version 9 Firefox wobFF from version 3 6 Google Chrome woFF from version 6 Safari WwoFF from version 5 0 6 Opera woFF from version 11 10 Using Webfonts with Cascading Style Sheets css Upload the font files to your web server You need two files one EoT and one worF for each font style you want to use in your site Use the css code example below to address your web fonts Replace the example font file urL with its appropriate path on your server first for Internet Explorer lt 9 e font face font family MyKievit src url fonts KievitWebPro Medium eot then for WOFF capable browsers font face font family MyKievit src url fonts KievitWebPro Medium woff format woff The value of the font family property MyKievit in this example is only used internally in your style definitions so you could set it to any name you like Make sure to keep it shorter than 32 characters though or Internet Explorer will not display your webfonts When the font face rule for Eor precedes the rule for worF fonts older Internet Explorer versions will use the zor fonts and Internet Explorer 9 will use the worr fonts which is the d2. transmitted For example the Apache HTTP Server versions 2 provides compression by the module mod_deflate Below is the module s default configuration in which only text files are compressed lt IfModule mod_deflate c gt AddOutputFilterByType DEFLATE text html text plain text xml lt IfModule gt Modify your configuration as shown below to have your Apache HTTP Server compress EOT fonts as well before transmitting them This only works as intended if you have defined a separate MIME type for EOT fonts see above Add the mim type for zor fonts to the list of types to be compressed in your mod_deflate configuration lt IfModule mod_deflate c gt AddOutputFilterByType DEFLATE text html text plain text xml application vnd ms fontobject lt IfModule gt This measure will reduce the traffic volume generated by zor fonts by about 50 to 60 WOFF font files are already pre compressed so further compression is not necessary WEB FONTFONT USER GUIDE SECTION C SYSTEM Blocking Hotlinking of Webfont Files ADMINS ee re When other websites are linking directly to your hosted webfont files also called hotlinking they are using your fonts which they haven t licensed and they are using your bandwidth adding to your site s traffic costs The Web FontFont EULA End User Licence Agreement requires that you take reasonable measures against hotlinking and direct access to font files A reasonable measure is u
3. weight bold font style italic p font family MetaUnitSlab Tahoma sans serif Please note that Internet Explorer ignores css style linking for or FontFonts and uses syn thetic styles instead so these style linking definitions are only useful for worrF fonts See next section for a workaround for ror fonts in Internet Explorer B 5 WEB FONTFONT USER GUIDE SECTION B WEB DEVELOPERS B 6 Style linking Workaround for EorT Internet Explorer 4 8 If you want to avoid the display of synthetic bold and italic styles for Eor fonts in Internet Explorer you can change the appropriate css rules for the affected browser versions You have to redefine all font properties for elements which would otherwise use a style linked variant To apply this in Internet Explorer versions 4 8 only you can use a condi tional comment in your HTML code to link to a browser specific css file in addition to your standard css files lt link rel stylesheet href screen css type text css media screen gt lt link rel stylesheet href print css type text css media print gt lt if lt IE 9 gt lt link rel stylesheet href ie specific css type text css media screen gt lt endif gt The contents of the file ie specific css would look like this first redefine EOT styles as separate families e font face font family KavaWebPro Italic was KavaWebPro src url fonts KavaWebPro I
4. Italic combination you can build any groups you want The example below makes a group that links the Light to the Extra Bold weight and both their italics e font face font family Unit src url fonts UnitWebPro Light woff format woff font face font family Unit src url fonts UnitWebPro ExtraBold woff format woff font weight bold e font face font family Unit src url fonts UnitWebPro LightItalic woff format woff font style italic font face font family Unit src url fonts UnitWebPro ExtraBoldItalic woff format woff font weight bold font style italic pii font family Unit Arial sans serif line height 1 25em WEB FONTFONT USER GUIDE SECTION B WEB You could even tie an Italic from a completely different font family into your style linked DEVELOPERS group In this example FF Unit Slab Italic is paired with Fr Meta OPER e font face font family MetaUnitSlab src url fonts MetaWeb Book woff format woff font weight normal font style normal e font face font family MetaUnitSlab src url fonts MetaWeb Bold woff format woff font weight bold font style normal font face font family MetaUnitSlab src url fonts UnitSlabWeb Italic woff format woff font weight normal font style italic e font face font family MetaUnitSlab src url fonts UnitSlabWeb BoldItalic woff format woff font
5. NTFONT USER GUIDE SECTION D USER SETTINGS D 13 Disabling Webfonts in Firefox Type about config into the address field and hit enter Confirm the warning dialogues that appear then use the Filter field to search for gfx downloadable_fonts enabled Double click to change the setting to false as shown below Restart Firefox 3 about config Mozilla Firefox 3 6 Beta 4 5 x File Edit View History Bookmarks Tools Help aC X a Dowo O AA L about config Filter gfx d x gfx downloadable_fonts enabled user set boolean false Disabling Webfonts in Internet Explorer Menu Extras Internet Options General Accessibility check Ignore font styles specified on Web pages as shown below This setting will always use the fonts you specified in your Internet Explorer display settings m Formatting IV Ignore font styles specified on Web pages I Ignore font sizes specified on Web pages User style sheet I Format documents using my style sheet Sye sheet Browse cs WEB FONTFONT USER GUIDE
6. WEB FONTFONT USER GUIDE VERSION 4 July 2011 SECTIONS About This User Guide Web Developers System Administrators User Settings SECTION A ABOUT THIS USER GUIDE This Web FontFont User Guide contains information aimed at different groups of people web developers system adminis trators and website visitors Section B is for web developers It shows how to get started using Web FontFonts for display on your website Section C contains information for system administrators about which configuration changes may be necessary to suc cessfully serve webfonts from your web server Section D outlines some issues visitors of your website may experience in connection to webfonts and may assist site owners in answering webfont related support requests For more general information about Web FontFonts e g language support please refer to the OpenType User Guide 2011 FSI FontShop In ernational All rights reserved All information in this document is provided as is with out warranty of any kind either expressed or implied and is subject to change without notice All trademarks mentioned in this document are the trademarks or registered trademarks of their respective holders Mac OS and Sa fari are trademarks of Apple Inc registered in the U S and other countries Text typefaces FF Nexus Mix Sans Typewriter All WEB FONTFONT USER GUIDE SECTION B WEB DEVELOPERS
7. e identical to optimizeLegibility in this setting On Mac OS Firefox ignores these settings and always uses optimizeLegibility WEB FONTFONT USER GUIDE SECTION C SYSTEM ADMINS The configuration snippets given in this section are short examples and may not contain everything that is required to make a certain feature work in your specific server setup Please always double check the configurations against your web server s manual if you are in doubt about what they do exactly MIME Types for Webfonts To ensure proper handling of webfont files by your web server you should add their corresponding MIME types to your MIME configuration File suffix MIME type eot application vnd ms fontobject woff application font woff Microsoft Internet Information Server 11s already has a MIME type entry for Eor but not for worrF 11s will not send worr files to a client at all unless you add the mime type for WoFF fonts as shown below Fie Help 9 46 8 mputer Management Local gO gt FS1 226 PC gt Sites gt Default WebSite System Tools 4 L ee Task Scheduler E Event Viewer MIME Types E Shared Folders a B Local Users and Groups Pees i Use this feature to manage the list of file name Edit Performance Application Pools extensions and associated content types that are Rae i Device Manager 4 Ea ual served as static files by the Web server Help f fault Wel l Storage Group by No Group
8. ese lines directly into your Apache configuration Please refer to the server documentation if you re not sure where to put them exactly Apache style to IIS rewrite rules See http apache modrewrite rules for details There are circumstances in which referrer information is not sent when it should be e g if a website visitor uses certain ad blocking plug ins In this rare case the above configuration will cause fallback fonts to be displayed instead of your specified webfonts Car WEB FONTFONT USER GUIDE SECTION D USER Rendering Issues on Windows SETTINGS Web FontFonts are optimized for screen display with ClearType font smoothing turned on ClearType is enabled by default in Windows Vista Internet Explorer 7 Firefox 4 and newer versions To enable ClearType Click Start then open the Control Panel click Appearance and Themes then click Display In the Appearance tab click Effects Click to select the Use the following method to smooth edges of screen fonts check box then select ClearType in the list box Click OK in the two open dialog windows to apply the changes Please see http support microsoft com kb 306527 for further information on ClearType If users can not or do not want to use ClearType or similar font smoothing methods for some reason they may prefer to disable webfonts in their browser Please refer to the next two sections for how to do this in Firefox and Internet Explorer D 22 WEB FO
9. esired behaviour WEB FONTFONT USER GUIDE SECTION B WEB DEVELOPERS B 3 You can then reference your font family in css font stacks by the name you gave it as you would any other system font For example body font family MyKievit Arial sans serif line height 1 4em You should always set the line height css property otherwise the baseline positions and line spacing will differ between browsers Building Style linked Groups of Fonts Style linked fonts are being used in all HTML elements that usually display variants of their default fonts e g em emphasis italic by default and strong strong emphasis bold by default Use the font weight and font style properties inside your font face rules to define groups of style linked fonts under a common family name font face font family Unit src url fonts UnitWebPro Regular woff format woff font face font family Unit src url fonts UnitWebPro Bold woff format woff font weight bold e font face font family Unit src url fonts UnitWebPro Italic woff format woff font style italic font face font family Unit src url fonts UnitWebPro BoldItalic woff format woff font weight bold font style italic WEB FONTFONT USER GUIDE SECTION B WEB DEVELOPERS B14 p font family Unit Arial sans serif line height 1 35em You don t have to stick to the usual Regular Bold Italic Bold
10. ing E Disk Management Services and Applications ftansicn MIME Type a Wy Internet Information Services dsp application octet stream Gy Services dwp application octet stream ij WMI Control emz Online Help application octet stream eot application octet stream oe application octet stream la application octet stream hhk application octet stream chhp application octet stream a m J Features View Content View File name extension woff MIME type application font woff WEB FONTFONT USER GUIDE SECTION C SYSTEM ADMINS Cc 10 Strange Log File Entries Caused by Internet Explorer You may notice entries like the ones below in your web server log files GET fonts DaxCompactWeb Black eot HTTP 1 1 200 104992 GET fonts DaxCompactWeb Black woff 20format 22woff 22 HTTP 1 1 404 290 The first request is a correct one The second request occurs due to a bug in Internet Explor er Internet Explorer does not understand the font face rule for worF fonts and misinter prets it resulting in an erroneous request for a non existing file This second log entry may safely be ignored Using Content Compression for Webfont Files Activating content compression in your web server can reduce traffic volume and loading times Files are compressed on the fly before sending them to the client thus reducing the amount of data to be
11. n so that fallback fonts are used the em and strong elements will be rendered identical to regular text in Internet Explorer because the font variant and font weight properties have been reset to normal Internet Explorer 9 exhibits the same behaviour when in Compatibility Mode Make sure you are using the browser in Standards Mode in case you notice any problems You can tell Internet Explorer to use its latest Standards Mode by adding this meta element to the head element of your HTML page lt meta http equiv X UA Compatible content IE edge gt WEB FONTFONT USER GUIDE SECTION B WEB DEVELOPERS B 8 Controlling Kerning and Ligatures via css You can use the non standard css property text rendering to control the usage of kerning and ligatures in Firefox version 3 It can take these four values e auto The browser will make educated guesses about when to optimize for speed legibility and geometric precision when displaying text Firefox currently uses optimizeLegibility if the font size is 20 pixels or larger and optimizeSpeed for smaller fonts e optimizeSpeed Rendering speed takes precedence over legibility and geometric precision Kerning and standard ligatures are disabled e optimizeLegibility Legibility takes precedence over rendering speed Kerning and standard ligatures are enabled e geometricPrecision Prefers geometric precision to rendering speed and legibility Currently results ar
12. talic eot e font face font family KavaWebPro Bold was KavaWebPro src url fonts KavaWebPro Bold eot font face font family KavaWebPro BoldItalic was KavaWebPro src url fonts KavaWebPro BoldItalic eot em is usually displayed using the italic variant Redefine font family using the new separate font entry from above and reset the font variant property from italic to normal to avoid slanting the italic again em font family KavaWebPro Italic font variant normal WEB FONTFONT USER GUIDE SECTION B WEB DEVELOPERS B 7 strong is usually displayed using the bold weight Redefine font family using the new separate font entry from above and reset the font weight property from bold to normal to avoid emboldening the bold again strong font family KavaWebPro Bold font weight normal Combinations of strong and em are usually displayed using the bold italic font Redefine font family using the new separate font entry from above and reset the font weight property from bold to normal as well as italic to normal to avoid emboldening and slanting the bold italic again strong em em strong font family KavaWebPro BoldItalic font weight normal font style normal The only drawback of this solution is that if the webfont display should fail for some reaso
13. tilizing origin and referrer checking in your web server Each request for a font file which doesn t come from a page of your own site will be blocked after you add the rules below to your server configuration the example is for Apache HTTP Server Let s say you have uploaded the webfont files onto to your site www example com into a sub directory called fonts Make a new file named inside this directory and paste these lines into it RewriteEngine On RewriteCond HTTP Origin http s www example com NC RewriteRule woff eot NC L RewriteCond HTTP_REFERER RewriteRule woff eot F NC L Options Indexes Replace example com by your own host name The dot must be preceded by a backslash The www means that both urts with and without the www prefix are valid for your site and s means that your site may be accessed via HTTPs or plain HTTP Requests for all files ending in woff or eot with an origin HTTP header i e request com ing from a site other than your own or an empty referrer will now receive an HTTP error 403 forbidden The line Options Indexes disables the file listing for the fonts directory If you get an HTTP error 500 internal server error after editing the htaccess file or if the file has no effect your server probably does not allow changing configuration settings this way In case you can t or don t want to use an htaccess file you can put th
Download Pdf Manuals
Related Search