2013 November 19 Archive - EXEIdeas

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+. I Have My Font Only In .ttf Format?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. Now how to use custom fonts in your Web/Blog? If you have a website or blog then simply add the code on top of your CSS file or css style tag by copy-paste. After coping, edit the code with your own font links (Given in Red).@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;}How To Get Font-Family Name?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. p {font-family: Champignon Alt Swash;::}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.