Skip to main content

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. 

Popular posts from this blog

How to use SecurityDisabler and UserSwitcher in Sitecore v6.5 – 6

If current context user doesn’t have permission to access this item, Sitecore will return null or throw exception. 
Note: It is recommended to provide context user with appropriate rights than using SecurityDisabler or UserSwitcher.SecurityDisabler:  !SecurityDisabler will elevate the context user to have administrative privilegeand so context user will be able to do anythingon the system.new Sitecore.SecurityModel.SecurityDisabler();UserSwitcher:UserSwitcher allows a segment of code to run under a specific user instead of current context user. new Sitecore.Security.Accounts.UserSwitcher(Sitecore.Security.Accounts.User.FromName("username",false));Sample Code        ///<summary>/// Code snippets explaining SecurityDisabler and UserSwitcher///</summary>privatevoid SecuritySample()        {//Getting Master Database            Sitecore.Data.Database masterDB = Sitecore.Configuration.Factory.GetDatabase("master");//Getting a Sitecore Item            Sitecore.…

How to access Sitecore Items in Code Behind (Sitecore v6.5) – 4

To get a Sitecore Content Item, use Sitecore.Data.Database.GetItem(Path)
­Sitecore Content Item Class: Sitecore.Data.Items.Item(Get Sitecore Item from “/sitecore/content/Home/myItem”)Sitecore.Data.Database master = Sitecore.Configuration.Factory.GetDatabase("master");Sitecore.Data.Items.Item myItem = master.GetItem("/sitecore/content/Home/myItem");If item does not exist or current context user doesn’t have permission to access this item, Sitecore will return null or throw exception. Case is Insensitive while using path to get the items.To get a Sitecore Template Item, use Sitecore.Data.Database.GetTemplate(ID)­Sitecore Template Item Class: Sitecore.Data.Items.TemplateItem(Get Template Item: Folder Template)Sitecore.Data.Items.TemplateItem item = master.GetTemplate(Sitecore.TemplateIDs.Folder);To get a Sitecore Media Item, use Sitecore.Data.Database.GetItem(Path)­Sitecore Media Item Class: Sitecore.Data.Items.MediaItem(Get Media Item from “/sitecore/content/Media Lib…

How to enable Single Sign On in Sitecore with Active Directory Users and Roles

(Assuming that reader has knowledge on Single Sign On)

Single sign on functionality needs the site not to be in anonymous authentication. In IIS, Basic or Windows authentication should be enabled.
How to enable windows authentication in IIS?
Single sign on functionality comes along with Active Directory Module from Sitecore. You can get the latest version from SDN. This module integrates AD to the Sitecore instance. This module needs the LDAP path and few provider configuration settings in web.config file.
SDN Link: http://sdn.sitecore.net/Products/AD/Download.aspx
This module installs LDAP dll, configuration and few aspx pages. Once installed, we get the LDAP login page under /website/Sitecore/admin/ldaplogin.aspx. Along with that, we will be having few more roles in Sitecore.
sitecore\Sitecore Client Account Managing sitecore\Sitecore Client Authoring sitecore\Sitecore Client Configuring sitecore\Sitecore Client Designing sitecore\Sitecore Client Developing sitecore\Sitecore Client Forms Autho…