Custom Fonts using @font-face in HTML/CSS – Extended

Custom Fonts using @font-face in HTML/CSS – Extended

For those of you who came here from Google or other search engines please first read part one of this article at Custom Fonts using @font-face in HTML/CSS

While working on one of my previous website project that uses custom fonts i tried a new way of calling @font-face and it worked. Its a lot easier and doesn’t need any particular file to use with your CSS file. The first approach that i discussed for using custom fonts in your website is good but was difficult to implement.

Lets start with the CSS code

@font-face 
{ 
	font-family: FontName; 
	src: url('../fonts/font-name.eot');
	src: local(,ò?'),
		url('../fonts/font-name.woff') format('woff'),
		url('../fonts/font-name.ttf') format('truetype'),
		url('../fonts/font-name.svg#font-name') format('svg');
	font-weight: normal;
	font-style: normal;
}

This approach is easier as you won’t need to create a CSS file, as you must have read the font generator generates a CSS file to use with your fonts so it will unload around 115KB file from the old approach that i discussed earlier. This time we don’t need this. We will simply use font generator Font Squirrel (http://www.fontsquirrel.com/fontface/generator) to generate us all font files that we use for different Browsers. and we will just ignore the CSS file that it generated. Just copy all font files in a folder lets say we name it “fonts” as i have used that name in the CSS code for calling different fonts files. And at the end of our CSS document simply add the code that i have given above. Please change the folders and font names appropriately.

We will simply call it like:

font-family: FontName, Arial, Helvetica;

Please make sure you add a font file name in your font list that is default in different OS platforms that is much closer in appearance with your custom font that you want to use as sometimes the browsers don’t read font files or because of server issues they can’t locate the font files, so i will suggest its wise to use default operating system environment fonts in your CSS custom font family declaration.

Feel free to ask any questions, or if you need any help just comment. I will try to answer your questions as soon as possible.

.