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.