CSS Tips & Tricks - Fonts

Thu Apr 5, 2018

How can I change the fonts that are used on my site?

You can define what fonts are used on your website with the property of “font-family” in your CSS file.

Example: body { font-family: Arial, Helvetica, sans-serif; }

The font-family property should have multiple font options in it. Each browser will try to load the first one, in this case - Arial,  and if the browser doesn’t recognize the first font, it will try the next font.

What fonts are recognized by the web automatically (web safe)?

A full list of these can be found at http://www.cssfontstack.com/ along with the browsers that support each.

Some of my favorite commonly used ones are below:

  • font-family: "Times New Roman", Times, serif;

  • font-family: Arial, Helvetica, sans-serif;

  • font-family: Verdana, Geneva, sans-serif;

  • font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;

  • font-family: Georgia, serif; 

How can I use a font that isn’t web safe?

There are lots of different ways to pull in non-web safe fonts. My favorite way because of it’s ease of use and cost (free) is Google Fonts.

You can go to https://www.google.com/fonts and click the blue button that says ‘Add to Collection’ for each font that you want to reference on your site. I added to my collection the fonts Roboto and Lobster (because it’s Summer in New England).

As you add fonts to your collection you will see them stack up at the bottom of your browser window and on the upper right corner of the bottom gray bar, you can see three buttons - Choose, Review, Use. When you click on Use it will ask you to select all the variations of that font that you want to use on your site. The key to this piece is to keep an eye on the top left meter that monitors the affect on your page load time. You don’t want to get that into the red area where using nice fonts would negatively affect your site performance.

Once you have chosen the styles of the fonts that you want to use, you can skip to step 3 on Google Fonts, which is to add the code to your website. They will give you a font file to reference (that Google hosts) in the head code of your template like below:

<link href='http://fonts.googleapis.com/css?family=Lobster|Roboto:400,500,700' rel='stylesheet' type='text/css'>.

Step 4 on Google Fonts is to reference the fonts in your CSS file. It gives you exact examples on how to reference the ones that you chose, along with a back-up font, like below:

font-family: 'Lobster', cursive;

font-family: 'Roboto', sans-serif; 

How can I style some lines of font to be a different case?

There is a CSS property that you can use to do this called text-transform. There are three options for this style.

  • text-transform: uppercase; - TURNS YOUR FONTS INTO ALL UPPERCASE

  • text-transform: lowercase; - turns your font into all lowercase

  • text-transform: capitalize; - Turns Your Font Into All Propercase 

What are some example of ways to style my fonts?

There are various ways to style the look of the text on your site. Some of my most commonly used ways are below.

  • Font Style

    • font-style: normal - normal text (default)

    • font-style: italic - italicize your text

    • font-style: oblique - basically outputs like bold italic text

  • Font Size

    • font-size: 12px

  • Font Weight

    • font-weight: bold - bold font

    • font-weight: normal - normal font (default)

    • font-weight: 700

      • Using a number for the font weight is a way to target a specific weight from one of the options of Google Fonts that they gave you. For example, Google gave me the weights for Roboto of 400, 500, and 700 (in bold below) which lets me choose a specific weight: <link href='http://fonts.googleapis.com/css?family=Lobster|Roboto:400,500,700' rel='stylesheet' type='text/css'>

Casey Aiello
Casey Aiello
Professional Services Manager | Web Consultant/Designer | Percussion Software

Along with being a Consultant, Casey is also the Professional Services Team Lead at Percussion and our in-house designer. She has a strong background in responsive web design and development. Casey knew that she wanted to work in the tech field ever since she was in elementary school. That strong passion led her to be a volunteer and strong advocate of various organizations that work to get more young women involved and excited about science and technology careers. In her free time, Casey enjoys spending time relaxing with family and friends.