How to fix font face issue in Android and Midori Browser

Hi Friends,

@font-face was first proposed for CSS2 and has been implemented in Internet Explorer since version 5! However, their implementation relied on the proprietary Embedded Open Type (.eot) format, and no other browsers decided to use this format. With the release of Safari 3.1, however, website makers can use any licensed TrueType (.ttf) or OpenType (.otf) font in their pages.

To use web fonts, each form of the font family must be declared using the @font-face rule. For example see below, this is how we write in CSS file.

@font-face {
font-family: ‘BanksiaRegular';
src: url(‘../fonts/banksia-webfont.eot’);
src: Missing, url(‘../fonts/banksia-webfont.woff’) format(‘woff’), url(‘../fonts/banksia-webfont.ttf’) format(‘truetype’), url(‘../fonts/banksia-webfont.svg#webfontNhlM8z2Q’) format(‘svg’);
font-weight: normal;
font-style: normal;

But, this is not showing up the font we used in android browser although it shows up in opera mobile.  Also doesnt show up in Midori Browser. The fix is that we upload our fonts to gont generator font-squirrel. And after uploading it gives a zip to download and in that we will use the CSS. But to solve this issue we need to add a line where its not showing format(‘eot’) in the source path. You need to add the below code where we specified (Missing) in the above code.

url(‘../fonts/banksia-webfont.eot?#iefix’) format(‘eot’)

Hope this post may let others know how to fix the issue if it arrives in the near future. BYW Google have recently announced that they are also entering the web-font market – with the same free, hosted model as ours i.e. font-face. Have a look at the website and bag some useful information. Let us know if you have anything to be added. Let’s Share and Let’s Other Know…

Comments are closed.