How to use custom fonts with CSS3

You’re creating a website for yourself or a new client of yours and you feel that the font face needs an edge to it, it needs to stand out yet the default fonts that are used throughout all browsers don’t cut it? CSS3 allows you to now add custom fonts to websites to allow you to have more flexibility on the website you are creating.

Firstly you need to download a font that you want to use. Font’s can be found at DaFont or FontSquirrel Make sure that the font can be used across all browsers.

Internet Explorer only supports EOT

Mozilla browsers support OTF and TTF

Safari and Opera support OTF, TTF and SVG

Chrome supports TTF and SVG.

This means that if you want to use a font on your website and you want it to be compatible on all browsers, make sure you have the correct files.

Below is the code for implementing the font face. This code needs to be placed either in the style section within the header or an external CSS page.

@font-face

{

font-family: Sansation; <!– Here is what you are calling the font. You will need to use this name when relating to the font –>

src: url(‘font/Sansation_Light.ttf’),  <!– First link to a font file, then followed by a comma –>

url(‘font/Sansation_Light.eot’); <!– Internet Explorer file –>

}

Make sure that if you are uploading the website to an external server, make sure that the files are published aswell to the correct place otherwise the font’s will not work

When you have done that, now choose where you want to use the font. This is how it should look in the style / CSS file.

h1

{

font-family: Sansation, Arial, Sans-serif;

}

Always make sure that the font has a fall back font. If the user is using an old browser that may not be compatible with these new fonts, having a fall back font will allow the website to still look consistent and not use a different font-family i.e. custom font being sans-serif, no fallback font could lead to a serif font.

 

Hope this has helped you today!

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s