Achieve Cross Browser Support When Using Custom Font

Blogger has some nice font that you can choose from, but after sometimes you might feel the old fonts from blogger are really lame and you wanted to change them to the new one. Changing a custom font is easy but make it compatible with most browser is a little bit harder. 

When applying a font you will need to use a CSS member declaration @font-face, but using this one doesn't automatically make your blog compatible with most browser. Not all browser support the same fonts format, this table will tell you what type of font is compatible with a browser.

As you can see right there Internet Explorer support only one type of font which is the .eot, mozilla with .ttf or .otf, Chrome with .svg, .ttf, and so on. So this basically tell us what type of font that we need to find to achieve a cross browser compability.

Step 1. Finding the font

The first step that you need to do to apply a custom font to your blog and make it cross browser compatible is finding the font that you want. There are a lot of website there that provide you with free fonts, one of the website that I found quite useful and with a cool design is http://www.fontex.org. In there you just need to search for the font that you wanted to use and then download it. You will get a .zip file, just extract that one, and you will get something like this.

Now after you get this you have completed this step and ready for the next one/

Step 2. Converting the font to each format

So like what you see there what we need is the format .eot, .ttf and .svg to make our font compatible with all browser. Now what you need to do is just convert the font that you have downloaded into one of these format, and if you think it is hard, well it is not because there is a website that let you convert the font into those format.

 

Visit this website @font-face kit generator, and then upload the font that you want to use there. Just wait for a few moment and they will send you a .zip file which contain all the format that you need.

Step 3. Uploading the font

Now after you got all the fonts that you need, you just need to upload those font into the web. For me I usually use dropbox to upload it into the web. Just create account on dropbox website and then upload all the fonts with these format there ( .eot, .svg, .ttf ). 

Step 4. Applying the font to your blog

After you upload all of the font format, you just need to copy each of the link to that font and save it in notepad just to make it easy. Now head to blogger and then go to the Template and then to Edit HTML, and head to <b:skin></b:skin> and put this code somewhere there, don't put it in the bottom though because it might lead to some error in displaying the font. Here is the Code : 

 @font-face {
    font-family: 'Arvo Regular';
    src: url('.eot url');
    src: local('Arvo Regular'), 
         local('Arvo'), 
         url('.ttf url') format('truetype'),
         url('.svg url#font') format('svg'); 
}

So that just it but make sure to change the name of the font in the font-family, in the src: local('Arvo Regular') and in local('Arvo'). So the first src: url simply tells internet explorer where they can get the font that is compatible with the browser. The second one is for the other browser except IE. the first and second src: local tells to check if the user already have the font, if he/she already have one skip the next step. 

Step 5. Using the font in your blog

If you want to change the whole font in the post head to .post-body in Edit HTML and change the font family name to match the one that you put before. Just make sure to put ' ' if the name consist more than one character. If you found any trouble just comment bellow and I will sort that out.

Subscribe TECHNOZZZ for more info about tech
Read our tutorial to make smartphone battery last longer