With the use of simple CSS, you can easily use your custom font on your website. But many people find problem getting it work on Internet Explorer. Here is the trick that works across all the browsers. I hope this solution will help many people who are stuck with this problem. I will explain it with a simple example:
CSS Code:
@font-face {
font-family: ‘MyCustomFont’;
src: url(‘fonts/Ayuma2yk.eot?’), /* IE */
url(‘fonts/Ayuma2yk.ttf’);
}
‘MyCustomFont’ is the name you want to give to the font family. It is recommended to copy fonts to a separate folder. Ayuma2yk.ttf is a random test font I have used for example.
For Internet Explorer, please note the important tricks here:
1) Instead of common ttf (True Type) font, Internet Explorer requires .eot (Embedded Open Type) font. If you do not have eot, there are so many tools available online, using which you can easily convert your .ttf file to .eot.
2) Use .eot line first. Yes, write the .eot property before .ttf to make it work in IE.
3) Use a question mark after eot font name! Now this is weird, isn’t it?
That’s all. The custom font family is ready to be used now. You can use it normally like you use other fonts.
span style=”font-family:MyCustomFont;”>Hello World!</span>
Please Download an example created with HTML/CSS using the link below.
| Download Sample |
Fonts for Webviews in your iOS App
Use the following HTML markup to use fonts in iOS web views:
<div style=”font-family: Verdana”>A quick brown fox jumps over the lazy dog.</div>
<div style=”font-family: Verdana”>A QUICK BROWN FOX JUMPS OVER THE LAZY DOG.</div>
Fonts for Webviews in your Android App
Use the following HTML markup to use fonts in Android web views:
<html>
<head>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Verdana">
<style>
body {
font-family: 'Verdana';
}
</style>
</head>
<body>
<div>A quick brown fox jumps over the lazy dog.</div>
<div>A QUICK BROWN FOX JUMPS OVER THE LAZY DOG.</div>
</body>
</html>
If you want to use common HTML content for both your iOS and Android apps, you can use the following HTML markup that works for webviews in both your iOS and Android apps:
<html>
<head>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Tahoma">
<style>
body {
font-family: 'Tahoma';
}
</style>
</head>
<body>
<div style="font-family: Tahoma">A quick brown fox jumps over the lazy dog.</div>
<div style="font-family: Tahoma">A QUICK BROWN FOX JUMPS OVER THE LAZY DOG.</div>
</body>
</html>
Thanks for the timely help.
other option is Google Web Fonts
Google Web Fonts is a very easy option when you want to select the font from the available list, instead of using your custom font. Thanks for feedback!