Monday, 9 July 2012

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. 

No comments:

Post a Comment

Articles

Automatically create new version for Lock & Edit without workflow

Sitecore will create a new version on Lock and Edit if the item is tied to a workflow. For our case, version has to be created even withou...