CSS tutorial :: How to use fonts from the web.
Good day folks. While many of us here design sites using simple fonts, such as "arial", "times new roman" etc. there are some times when we need or want
a bit of a "snazzier" font to make a) The website stand out b) A particullar part of the website to stand out or c) To make it look less formal.
While many of us will go trawling through our fonts folder to find a candidate, there is a much much easier way. Google Web Fonts.
What is Google Web Fonts?
Basically it is a database that Google has built up through user inputted fonts. It is a repository of fonts that you can use on your website.
As you will see when you go onto Google Web fonts there are hundreds to choose from and all are FREE! That's right. They're all free.
Instructions
1. Open up Google Web Fonts by clicking the link.
2. Conduct a search or see a font you like. Click "add to collection":
3. Click "use":
4. Copy the CSS by scrolling down a little; e.g.
Code:
<link href='http://fonts.googleapis.com/css?family=Judson|Dynalight' rel='stylesheet' type='text/css'>
5. Place this in your webpage!
6. Activate font via css e.g.
Code:
<style type="text/css">
h1
{
font-family: 'Arapey';
}
</style>
Things to look out for:
Using these will slow the load of your webpage so use them wisely!
Don't use ridiculous fonts that people cannot read!
Take into mind people that may not be able to read so well (as in bad eyesight) and maybe provide an alternate text.
Using these will slow the load of your webpage so use them wisely!
Don't use ridiculous fonts that people cannot read!
Take into mind people that may not be able to read so well (as in bad eyesight) and maybe provide an alternate text.
That's it for another web design "tip".
Josh
Main Rig.
(14 items) | 
Battlefield 2 review.
Battlefield 2 PC Game EA |
|
Main Rig.
(14 items) |
Battlefield 2 review.
Battlefield 2 PC Game EA |
