Using custom fonts with @font-face

One of the most limiting factors in web design is the fonts that are available to us.A lot of times we see the use of some graphis in order to present a text with our needed font.

This option might look good but it sets us with problems:

What if the text is dynamic? What we will do once we want to change the text? open photoshop again?
Text that is a graphics file does not suppoert SEO efforts. Search engines does not go over the text that is in an image
These days we do not need these old ways. By using @font-face we can use almost any font we need to display text in our sites.

So what do we need?

We need a copy of the font we want to use, and we need to connect it to the page we will use it in.

In my example i will use Gabriola.ttf as the font.

So in the head tag of my page i will add this code:

	font-family: 'Gabriola';
	src: url('fonts/Gabriola.ttf');



After we connected to the font we implement it on the h1 element. That is that easy.

Now each time we write something inside an h1 element our font will be used. We can change the text or display it dynamically and it will work and make our life much easier.

This is our final result:


And that is it. fun easy and quick.

update: after some readings and experimentations i thought this must be a bit more detailed:

first, IE demend a font in the format of oet and the others demands the otf or ttf formats. So we really need to account for them.

second, when there are several formats IE has some problems , so this is the best way i think to add font-face:

@font-face {
    font-family: Gabriola;
    src: url('fonts/Gabriola.eot');    
    src: local('☺'), url('fonts/Gabriola.ttf') format("truetype"),
                     url('fonts/Gabriola.woff') format("woff");

In this way you have the best chance to implement font-face correctly.

Leave a Reply

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.