Design 2 HTML, E-Mail Template Implementation, WordPress, Joomla, Drupal Professional

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.

One of my latest project involved @font-face which means using a custom font for your web content. It was my first experience working with @font-face as I never heard about it before therefore I thought I will share my experience with my readers.

As you know we cannot use custom fonts in a website as it will not properly display on a computer which doesn’t have these fonts installed, thus it will be replaced by system default fonts, in windows if a font is missing it is normally replaced by Times New Roman, so to avoid this we define font like font-family: Arial, Helvetica, sans-serif, Arial is default for Windows, Helvetica is default for Mac. About Sans-serif I never used Mac personally so I am not sure if it is available on Mac or not but it is surely installed by default in Windows. So this is the normal approach we follow so that we know how our website text will show up in different platforms.

What if we want to use a stylish custom font which is not installed by default in any of the Operating systems, in fact we want to show a specific custom font on all platforms? In normal cases it will be really difficult to do so. So here come’s the use of @font-face, we can achieve this requirement by using @font-face.

It’s not that @font-face is really the only and perfect solution. One of my friends told me to compare my method with cufon. Unlike @font-face cufon is very natural, the output is very delicate with smooth edges, but the only thing that I didn’t liked about it is its JS based. So the problem comes when your visitor is on a secured machine and it won’t let the visitor load JS files, I think most of the firewalls block JavaScript by default. So in my case I didn’t used it. The second disadvantage of cufon is the file I generated through the cufon font generator http://cufon.shoqolate.com/generate/ size is almost 115KB which is really huge compared to the original fonts that I used are of just 52KB, so it made it 52 x 2 + 11 = 115kb, if you expect your site to load quickly within 2 3 seconds then I wont recommend this approach. So let’s look at my best technique that I used in one of my project @font-face.

Read more

I believe you never heard HTML layered approach. Its not new, maybe a few designers are already implementing this in their HTML. This approach is not common in every Design 2 HTML/CSS project as mostly you need very simple kind of html like header, content and footer.
The reason how this article “HTML layered approach” came to my mind is one of my project that is just completed by me http://www.treadfitness.com/ When my client gave me the PSD for this design first thing came into my mind was slice it such that it appears in parts, normally designers and PSD2HTML/CSS conversion experts will slice a layout in smaller images and will then stitch them together making the images lighter as small images appear faster on slow connections. What i believe is that now it doesnt matter if your site images are of higher quality and therefore requires higher bandwidth as using Web 2.0 basic approach never use images in designing your layout remember you can use as many images for content as you want. Wow so if you dont use images how your design is going to be converted in the way it is in PSD. Dont worry friends as now we can call images as background through CSS, and with that strategy your content will first load and then your background images, so your visitors will be able to see the content while your design loads. Now it doesnt mean that you put your whole design into a single image and make it appear in background, try it in a more graceful way. I mean make them appear in layers.
Read more