CSS3 tutorial to embed custom fonts in web pages

CSS3 tutorial to embed custom fonts in web pages

Until recently, web developers were limited to the use of common fonts. But with @font-face now it is possible to retain the unique / custom fonts, one would like to show in his website, of course only if they have the legal right to post those fonts on the web.

What is @font face

Generally, we’ve been limited to using fonts pre-installed on visitor’s computer. Increasing support of CSS3 ‘@font-face’ allows us to reflect fonts installed on remote servers on to the web pages. Simply by referring to same in your styles.

Style sheet syntax for the same is provided below

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
@font-face
{
font-family: MyCustomBebas;
src: url("BebasNeue-webfont.eot") /* EOT file for IE */
}
@font-face
{
font-family: MyCustomBebas;
src: url("bebas_neue_regular.ttf") /* TTF file for CSS3 browsers */
}
.font_style
{
font-family:"MyCustomBebas", Arial, Helvetica, sans-serif;
}

Utility of @font face

In the above example, we have used an true type font called ‘Bebas Neue’ to reflect on our web pages.

In the above example, you must have noticed that we have 2 ‘@font-face’ tags with 1 refering to ‘.eot’ font format and the other refering to ‘.otf’ font format. Reason being, CSS browsers like chrome and firefox supports / recognises open type (otf) and true type (ttf) font types, but IE browsers support / recongnise only an embeddable open type fonts (eot).

I used an online free font convertor to convert true type font (ttf) to an embeddable open type font (eot).

Saved this converted ‘.eot’ file and regular Bebas Neue ‘.ttf’ font in a folder along with stylesheet and the web page onto which I wanted custom font to reflect.

The ‘@font face’ style syntax given above can go into style sheet or as a style tag in the head region of web page.

Syntax explanation

?
1
2
3
4
5
6
7
8
9
10
@font-face
{
font-family: MyCustomBebas;
src: url("BebasNeue-webfont.eot") /*EOT file for IE */
}
@font-face
{
font-family: MyCustomBebas;
src: url("bebas_neue_regular.ttf") /* TTF file for CSS3 browsers */
}

The first line of the syntax, I have assigned custom font name to ‘font-family’ predifined variable – ‘MyCustomBebas’. This custom name can be anything you like. But it should be noted that you should refer to this custom name in your style class, like the one shown below

?
1
2
3
4
.font_style
{
font-family:"MyCustomBebas", Arial, Helvetica, sans-serif;
}

@font-face syntax second line refers to font source file / path to the same.

where in the IE browser would recognise eot file and thus the font shows up in IE and Google chrome and Mozilla browsers recognise ttf / otf file.

Interestingly, the above utility can also be used to show different fonts in different browsers. Here is an example to show how to do it.

?
1
2
3
4
5
6
7
8
9
10
@font-face
{
font-family: MyCustomGnuolane;
src: url("BebasNeue-webfont.eot") /*EOT file for IE */
}
@font-face
{
font-family: MyCustomGnuolane;
src: url("gnuolane_free.ttf") /* TTF file for CSS3 browsers */
}

In the above case, webpage will show ‘Bebas Neue’ font in IE browsers but ‘Gnuolane’ font in Mozilla Firefox and Google chrome.

Challenges faced:

The same ‘Bebas Neue’ font when I downloaded from different source with extension ‘.otf’ – BebasNeue.otf didn’t work in Google chrome and Mozilla Firefox. The syntax I used for it is given below:

?
1
2
3
4
5
6
7
8
9
10
@font-face
{
font-family: MyCustomBebas;
src: url("BebasNeue-webfont.eot") /*EOT file for IE */
}
@font-face
{
font-family: MyCustomBebas;
src: url("BebasNeue.ttf") /* TTF file for CSS3 browsers */
}

Here too, had saved the otf and converted eot file in the same folder. While the font showed absolutely fine in IE browsers, but didn’t show in Mozilla Firefox and Google chrome browsers. The reason I guessed for it not showing in above mentioned browsers was probably because otf font file must have been corrupt.

Live example of css custom fonts can be seen in our imajine website menulinks / titles. Here we have used ‘Helvetica Light Condensed Black’.

Tags: Embed External font in web pages, add / show custom fonts in web pages, how to show different fonts in websites, chrome font-face otf, @font-face tut

Comments

Post a Comment

Popular posts from this blog

30 Excellent CSS Based Navigation and Buttons Tutorial

Image
30 Excellent CSS Based Navigation and Buttons Tutorial CSS is the most important part in modern standard based web design. Using CSS you can turn any web related nested stuff into a working design. There has been a lot of talk about CSS Work lately. Mostly designer creates the design templates, Photoshop Images or whatever and then developers have their turn to show their creativity. Sometimes, it happens that they mess up something or many things. Among many coding/design issues caused by developers, one in particular really drives me nuts – incorrect usage of CSS and it’s properties. To understand how to design with CSS we choose to start from basics of CSS Navigation and button designs with some fine tutorials which can help you in your projects and daily practices. Here you will find a collection of 30 Excellent CSS Based Navigation and Buttons Tutorial resources and information about creating CSS based designs and also some useful tips for your webdesign habits. CSS N...
Read more

Hardening WordPress Security

Image
Hardening WordPress Security Hardening WordPress Security: 25 Essential Plugins + Tips If you are running a WordPress-powered website, its security should be your primary concern. In most cases, WordPress blogs are compromised because their core files and/or plugin are outdated; outdated files are traceable and it’s an open invitation to hackers. (Image Source:  Fotolia ) How to keep you blog away from the bad guys for good? For starters, make sure you are always updated with the latest version of WordPress. But there’s more. In today’s post, I’ll like to share with you some useful plugins as well as some tips to harden your WordPress security. Full list after jump! Plugins For Better Security WP DB Backup WP DB Backup is an easy to use plugin which lets you backup your core WordPress database tables just by a few clicks. Besides it is so easy, it has also been one of the most used plugin to secure your WP-powered website. WP Security Scan With this plugin, scanning your Wor...
Read more

Create CSS Sprites Within Seconds with SpritePad

Image
Create CSS Sprites Within Seconds with SpritePad Create CSS Sprites Within Seconds with SpritePad SpritePad  is the perfect solution for every web developer: With SpritePad you can  create your CSS sprites within seconds . Simply drag & drop your images onto the canvas and have them immediately available as one PNG sprite + CSS code. No fiddling in Photoshop, no manual assignment of CSS styles. CSS sprites the easy way. SpritePad  is optimized for speeeeed: No download, no setup, no long-winded uploads. It works hassle-free directly in your browser. Move your images around, change options and let the CSS styles get updated automatically. No need to do work twice again. SpritePad also supports team collaboration: Store your CSS sprites as editable versions online, share them within your team and learn more about the endless power auto-alignment. And best of all, SpritePad is Free now. Try it yourself. Requirements: - Demo:  http://spritepad.wearekiss.com/ Lic...
Read more