How to use custom font in Sitecore

Different browsers will use different font types for using custom font in HTML. From the blog, we can understand the compatibility of different font types in various browsers.

Font Type	IE	Mozilla	Safari	Chrome	Opera
.ttf	No	3.5+	3.1+	2.0+	10+
.otf	No	3.5+	3.1+	No	10+
.eot	4+	No	No	No	No
.svg	No	No	3.1+	0.3+	9.0+
.woff	No	Yes	???	???	???

                     .ttf – All browsers which are compatible to CSS3.

All the font types may be having same name. 

@font-face

{

    font-family: 'Brandon';

    src:      url('/~/media/css/fonts/Brandon.eot') format('embedded-opentype'),

              url('/~/media/css/fonts/Brandon.woff') format('woff'),

url('/~/media/css/fonts/Brandon.ttf') format('truetype'),;

}

For example: Brandon.ttf, Brandon.otf, Brandon.eot. If we upload all the types in 

same folder as like the below screenshot and when we request for ‘eot’ extension, 

it may download any of the font-type or same. Mostly it will download the first 

item in the folder. This is not consistent.  

 When I tested with the below url, http://sample/~/media/css/fonts/brandon.eot, 

it downloaded woff font type. 

So ideally the above CSS should be able to download the font depending upon the extension 

and the browsers.  

Few hacks and ideas: 

1.       Rename the font file name for each type, upload it in Media library and use it 

in CSS src attribute. Then the requested url should be able to download the font as 

we will be having one font in each type.

 Also add the following mime type for the font. 

Font Type	Mime
.ttf	font/truetype
.otf	font/opentype
.eot	application/vnd.ms-fontobject
.woff	application/x-font-woff

2.       In IE9, you may get error “@font-face failed OpenType embedding permission check. 

Permission must be Installable.” Fix: “Obtain the correct permission or licenses for 

embedding the font.” 

– Source: http://blog.beacontechnologies.com/custom-fonts-i-internet-explorer/ 

If anyone has solution to request multiple font types with same file name in Sitecore, please comment and provide me the solution.