RSS
CSS Videos
By Ashton Sanders

CSS Properties

CSS Font-Family

StupidMehOkayGreatAwesome!
(24 votes, avg: 4.08/5)
Loading...

Video Transcript:

Hello again and welcome to CSSvideos.com. My name is Ashton Sanders and this video will be a simple overview of the CSS Property called “Font-Family“.

Font-Family Basics

This attribute, as expected declares the font that will be used for the selector. In this example code, I have given my <body> the font-family of  “Arial”:

body { font-family: Arial; }

This CSS Property is inherited, which means all child elements inside of the selected element also will get the font. So by applying the font-family of “Arial” to the <body> of the page, we have changed all text on our page to use the font of Arial.

(This can easily be overwritten by applying another font to a child element.)

Font-Family Complications

The complications begin when someone does not have a font installed on their computer. The normal nature of this CSS property requires your computer to have the font installed if you want to view it on a website.* So if your computer does not have the font “Arial”, the websites you visit will not display Arial; it will display your default font. For this reason, it is recommended that you use what is called a “font stack”, which is simply a comma-separated list of fonts in the order of preference. This way, each visitor to your website will see the font that is closest to ideal, instead of their default font.

#header { font-family:Arial, Helvetica, sans-serif; }

First the computer will check for “Arial”. If that font is not installed on the computer, it will look for “Helvetica”, and then “sans-serif” if neither previous are available. Most computers these days have “Arial”, but there are still computers out there who don’t have some of the most common fonts.

*There are ways to get your website to display fonts from the website instead of from the visitor’s computer, and I’ll be covering that in the advanced CSS videos.

Please rate and comment to let me know what you think!

Enjoy,
Ashton

This entry was posted by Ashton Sanders on Wednesday, June 15th, 2011 at 2:05 am and is filed under CSS Properties, Text/Font. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

2 Responses to “CSS Font-Family”

  1. Ex Boyfriend Is Engaged says:

    […] a disadvantaged person around them. Do this approach and you will be on the right track: Stop any contact with your ex for at least 21 days and I have reasons why I said that. Firstly it will help stop you from acting […]

  2. Michelle says:

    Hello,
    Where can I find the answer to this….
    *There are ways to get your website to display fonts from the website instead of from the visitor’s computer, and I’ll be covering that in the advanced CSS videos.

    I have decorative fonts and I would like to know how they can be displayed as I see them on my computer (because they are installed on my computer)to everyone who will be visiting my page.
    Thank you!
    Michelle

Leave a Reply

 
 
.love { css: awesome }