How to Use Custom Font in Blog/Website

Blog/Website beauty depends upon its different parts, i.e. fonts, color scheme, divisions, images etc. Fonts are the important one for a pleasant look to reader or viewer. Simple words in cool fonts are much powerful than huge literary sentences.

Adding custom font is easy, especially for one having its own webhosting server. Simply upload font files on your server and embed them in your CSS. If you don’t have your own webhosting server i.e. you are using BlogSpot or your webhosting plan have a limited traffic, even then you don’t have to worry, just upload your files to Google Code. Google Code is a best server for uploading your J-Query, JavaScript, CSS, Font and other files.

There are four main types of font files that should be used.

• .ttf True Type Font: Supported by Mozilla Firefox 3.5+, Opera 10+, Safari 3.1+, Google Chrome 4.0+, Internet Explorer 9+. 
• .eot Embedded Open Type: Supported by Internet Explorer 4+. 
• .svg Scalable Vector Graphics: Supported by Opera 8.0+, Safari 3.0+. 
• .woff Web Open Font Format: supported by Mozilla Firefox 3.6+, Google Chrome 5+, Opera Presto 2.7+, Internet Explorer 9+, Safari from release 5.1+. 

So for cross-browser CSS all the four types of font files are necessary. But the problem is that normally font is available in .ttf format only. Therefore for other three formats we need a converter that converts .ttf format into the other three. There are many converters or font kit creators, available in market, but the best online font-face / font-kit creator are Font Squirrel and Code & More.

I personally prefer the 2nd one. To use these online font-face generator simply upload your .ttf file and get your custom font face kit. Our sister site Web Font Kit is a good source of Pre upload font-face kits. If you don’t want to waste your time in uploading font files, then Web Font Kit is surely waiting for your visit.

Applying Code

Now how to use custom fonts in your Web/Blog? If you have a website then simply add the code on top of your CSS file by copy-paste or if you own a blog then Follow these steps:

Dashboard >Your Blog > Template > Customize > Advanced >Add CSS

and copy-paste the code. After coping, edit the code with your own font links (Given in Red).

Code

@font-face {font-family: 'Champignon Alt Swash';
src: url('https://born4banned.googlecode.com/files/champignon_alt_swash.eot');
src: url('http://born4banned.googlecode.com/files/champignon_alt_swash.eot?#iefix') format('embedded-opentype'),
url('https://born4banned.googlecode.com/files/champignon_alt_swash.woff') format('woff'),
url('https://born4banned.googlecode.com/files/champignon_alt_swash.ttf') format('truetype');
url('https://born4banned.googlecode.com/files/champignon_alt_swash.svg') format('svg');
font-weight: bold; font-style: normal;}

Font-family value can be easily found in your .ttf file. Double click the .ttf file to open it and use the Typeface Name as Font-family value. To use the font just use font-family: Your fonts Typeface Name; in the respective CSS property.

Example

p {font-family: Champignon Alt Swash;
font-size: 30px;
:
:}

One last but important thing is that use a small size font file to avoid longer loading time. If you have any queries regarding this article feel free to ask.