How to Use .otf (OpenType Format) Fonts on Your Web Site

Using OTF font files is actually pretty easy.

1. Copy the OTF file/fies to a folder of your choice,
2. Declare your @font-face rule,

@font-face {
font-family: 'Quicksand';
src: url('/fnt/Quicksand_Bold.otf') format("opentype");

3. For ASP.NET applications add <mimeMap> declaration to your web.config file (see below).

When you try to use .otf font files in your ASP.NET web site, you may not be able to see your new font in action right away. Do you know why? Because you are probably getting a 404 “Not Found” error for your .otf file.(Open Google Chrome's Developer Tools, click “Network” and refresh your website to see this error)

The problem is that the IIS doesn’t know how to serve these new files unless we tell it how. This can be easily done in the web.config’s <system.webServer> section by adding the following snippet:


<mimeMap fileExtension=".otf" mimeType="font/otf" />

Now you should see your custom font rendering successfully in many major browsers. I can confirm that .otf files are rendered in the latest versions of Internet Explorer, Chrome, and Firefox.

Hope this helps someone.

Good luck,

Leave a Reply

Your email address will not be published. Required fields are marked *

Warning: mysqli_num_fields() expects parameter 1 to be mysqli_result, boolean given in /home/biginf5/public_html/wp-includes/wp-db.php on line 3215