CSS Tutorials
Tags:
Categories: ,

Overview

There are many ways to apply a font to the text on your site, including the use of web-safe fonts, custom fonts, and Google fonts.

Web-Safe Font Families

When setting a font to be used site-wide or even on a specific set of elements, a font-family is used.

The font-family property specifies the font for an element containing several font names as a “fallback” system. The browser will try the first font, then the second, and so on, using the first font available to it.

Often, the use of web-safe font families will allow for a faster-loading site and help to keep the site looking as intended by the developer.

body {
    font-family: "Times New Roman", Times, serif;
}

@font-face Rule

If one of the web-safe font families isn’t what you’re lookin for, you can add a font to the site by using the @font-face Rule. What this does is allows you to upload a specialty font along with your site, and link to it in a .css document. Then you can include it in your styles.

@font-face {
    font-family: "Open Sans";
    src: url("/fonts/opensans-regular-webfont.woff2") format("woff2"),
       url("/fonts/opensans-regular-webfont.woff") format("woff");
}

Note

Only one font-family can be included per @font-face { ] rule. However, you can use as many @font-face { } rules as you need to include numerous custom fonts.

@font-face {
    font-family: "Open Sans";
    src: url("/fonts/opensans-regular-webfont.woff2") format("woff2"),
       url("/fonts/opensans-regular-webfont.woff") format("woff");
}
@font-face {
        font-family: "OpenSansBold";
        src: url("/fonts/OpenSans-Bold.ttf") format("truetype");
    }

Note

Linking to your custom font only makes it available to your site and the user’s browser. You will still need to apply it to the various page elements (see below).

When the user lands on your site, the specialty font will be downloaded to their browser and used to display the text of your site.

The following uses a web-safe font family for the bulk of the website (set on the <body> tag), and uses the @font-face font for the heading tags.

body {
    font-family: "Times New Roman", Times, serif;
}
h1, h2, h3, h4, h5, h6 {
    font-family: OpenSansBold, sans-serif;
}

Google Font

Google has a large repository of fonts that can be linked to and used for free. What you do is go to their font repository and choose the font (and any specific font characteristics you want), and then either link to it on an HTML page (not the best way) or import it into your CSS style sheet (better).

HTML link:

<link rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Raleway:400,300,600">

@import Rule:

If using the @import method, do so just after the opening @charset line, before any specific styling rules are being written.

@charset "UTF-8";
/* CSS Document */


@import url("https://fonts.googleapis.com/css?family=Raleway:300,400,600");

Using the font is no different than using a web-safe font family or @font-face custom font.

body {
    font-family: Raleway, sans-serif;
    font-weight: 300;
}

CSS Notes:

If you like our content, and find it helpful, please consider making a small donation. Thank you!

We’d like to acknowledge that we learned a great deal of our coding from W3Schools and TutorialsPoint, borrowing heavily from their teaching process and excellent code examples. We highly recommend both sites to deepen your experience, and further your coding journey. We’re just hitting the basics here at 1SMARTchicken.