Fonts - Web safe

Web safe fonts:

I will need to use web safe fonts for my website so that when displayed they come up as that font rather than the browser default if the user does not have that font installed.


@FontFace


What is @FontFace

Font face is a way of displaying font on the users browser even if they don't have the specific font/s installed on their machine. It works by having the particular font hosted on your server in which the css rule gets and uses it to show the correct font; by using this method it means that i can have access to a lot more fonts.


Using @FontFace css rule

The basics are pretty simple to implement the @font-face rule, but it is possible to add lots of options to extend its features.

Initially you define the rule, "font-family" is what you want to call the font, "src" is where it can be found, include a "font-weight" (not needed for normal, but required by everything else, bold, thin etc).

@font-face {
    font-family: DeliciousRoman;
    src: url(http://www.font-face.com/fonts/delicious/Delicious-Roman.otf);
    font-weight:400;
}

Then just use it like any other font in any other style rule.

p {
    font-family: DeliciousRoman, Helvetica, Arial, sans-serif;
}

That's pretty much it for basic implementation. Please see our 'Find out more' section to find more in depth articles. When the blog is up and running we will post lots of tutorials explaining the who, what, where and why of @font-face.

There is also google web fonts which offers a similar service.

I can also set my css font choice so that if the font is not installed on the computer it chooses another font choice in the order I set:

font-family: "Franklin Gothic Demi", Verdana, Arial, sans-serif;