Knowledgebase
Web Fonts Not Rendering Properly Print this Article
If you are using a web icon font hosted on your own server, such as the popular FontAwesome library, or the Bootstrap Glyphicons, you may have seen this: img
When the font icon isn't rendered in the browser, and instead you see the block with the extended ASCII code for the character, it typically indicates that the font is not downloading properly in that browser. A common cause of this is a missing or misconfigured mime-type for the font file.
There are typically a few different file types associated with each icon font, preferred and called by different browsers, so cover your bases and set them all up in your mime-types mappings.
On Internet Information Server
Open IIS and then highlight the 'Server Name' node of the navigation tree (top-most node). In the right panel, double click the Mime Types icon.
For each of the following types, make sure that the extension exists and is set properly.
- .eot
- application/vnd.ms-fontobject
- .ttf
- application/octet-stream
- .svg
- image/svg+xml
- .woff
- application/x-woff
On Apache
In your website, edit your .htaccess file and add or correct the following lines:
AddType application/vnd.ms-fontobject .eot
AddType application/octet-stream .ttf
AddType image/svg+xml .svg
AddType application/x-woff .woff
