@Web-fonts

In my previous post I mentioned that I was going to post about @Web-fonts and why I love them. This is that post.

Bored with the standard fonts used for web development? Then look no further! @web-fonts is here to help. Kind of makes it sounds like a superhero…

Anyway, why should you be using @web-fonts when you can just use images? Well, for a start these fonts are readable by the search engines, so they are SEO friendly, plus CSS is able to adjust the fonts to your liking without having to go back to Photoshop (other editors are available) to change the image and re-upload it, those days are now gone!

To start using these new fancy fonts on your designs I would check out Google Web Fonts Here you will find a huge list of font that are available to use, FREE of charge.

First thing is to pick a font, once selected simply click the “use this font” tab and copy the <link href=’http://fonts.googleapis.com/css?family=Redressed&v1&#8242; rel=’stylesheet’ type=’text/css’> line into your <head>

Then all you need to do is call font-family: ‘Redressed’, arial, serif; on any section of your CSS you want to display the font.

Job done.

For a working example I made this site a little while ago, while it’s a work in progress and I’m not fully sure I am happy with the font selection, this page will give you an idea of how it works and displays. Feel free to take a look at the code if you fancy, just don’t nick it, ok?

http://applegatestudios.co.uk/html5/

Advertisements