W3.CSS Fonts

Verdana is the default font used in W3.CSS.Verdana has a good letter spacing, and is easy to read. Verdana is also the default font for W3C

Using Another Default Font

Using another default font in W3.CSS is very easy:

Example

body, h1, h2, h3, h4, h5, h6 {
  font-family: Arial, Helvetica, sans-serif;
}

Using Font Classes

With W3.CSS you can use 4 different built-in font classes:

  • w3-serif
  • w3-sans-serif
  • w3-monospace
  • w3-cursive
  • This is w3-serif

    Norway has a total area of 385,252 square kilometers and a population of 5,438,657 (December 2020). Norway is bordered by Sweden, Finland and Russia to the north-east, and the Skagerrak to the south, with Denmark on the other side.

    Norway has a total area of 385,252 square kilometers and a population of 5,438,657 (December 2020). Norway is bordered by Sweden, Finland and Russia to the north-east, and the Skagerrak to the south, with Denmark on the other side.

    Example

    <p class="w3-serif">

    This is w3-sans-serif

    Norway has a total area of 385,252 square kilometers and a population of 5,438,657 (December 2020). Norway is bordered by Sweden, Finland and Russia to the north-east, and the Skagerrak to the south, with Denmark on the other side.

    Norway has a total area of 385,252 square kilometers and a population of 5,438,657 (December 2020). Norway is bordered by Sweden, Finland and Russia to the north-east, and the Skagerrak to the south, with Denmark on the other side.

    Example

    <p class="w3-sans-serif">

    This is w3-monospace

    Norway has a total area of 385,252 square kilometers and a population of 5,438,657 (December 2020). Norway is bordered by Sweden, Finland and Russia to the north-east, and the Skagerrak to the south, with Denmark on the other side.

    Norway has a total area of 385,252 square kilometers and a population of 5,438,657 (December 2020). Norway is bordered by Sweden, Finland and Russia to the north-east, and the Skagerrak to the south, with Denmark on the other side.

    Example

    <div class="w3-monospace">

    This is w3-cursive

    Norway has a total area of 385,252 square kilometers and a population of 5,438,657 (December 2020). Norway is bordered by Sweden, Finland and Russia to the north-east, and the Skagerrak to the south, with Denmark on the other side.

    Norway has a total area of 385,252 square kilometers and a population of 5,438,657 (December 2020). Norway is bordered by Sweden, Finland and Russia to the north-east, and the Skagerrak to the south, with Denmark on the other side.

    Example

    <div class="w3-cursive">

    Web Safe Sans Serif Fonts

    Font FamilySafe Fallback
    ArialHelvetica, sans-serif
    HelveticaArial, sans-serif
    VerdanaGeneva, sans-serif
    GenevaVerdana, sans-serif
    TahomaArial, sans-serif
    Trebuchet MSArial, sans-serif
    Arial is considered the safest sans-serif font on the web. It is installed on all Windows machines (99.8%) and all Mac machines (98.7%).
    Helvetica is the preferred fallback because the two fonts are almost identical. Helvetica runs on all Mac machines (100%) but on fewer Windows machines (7.3%).

    Using Arial with Helvetica fallback, or Helvetiva with Arial fallback, covers both worlds.

    Verdana is also considered to be a web safe sans-serif font. It runs on all Windows machines (99.8%), and all Mac Machines (99.1%).
    Geneva is Verdanas preferred fallback, because the two fonts are quite similar, and Geneva runs on all Mac machines (99.6%).
    Tahoma was the standard font in Windows 95. It works on 99.9% of all Windows machines, and 91.7% of all Mac machines.
    Trebuchet MS has been released with all Windows operating systems (99.7%) since Microsoft Windows 2000. It is also included on Macs machines (97.1%), iOS and Chrome OS.

    Source: CSS Font Stack

    This is Arial

    Norway has a total area of 385,252 square kilometers and a population of 5,438,657 (December 2020). Norway is bordered by Sweden, Finland and Russia to the north-east, and the Skagerrak to the south, with Denmark on the other side.

    Norway has a total area of 385,252 square kilometers and a population of 5,438,657 (December 2020). Norway is bordered by Sweden, Finland and Russia to the north-east, and the Skagerrak to the south, with Denmark on the other side.

    Example

    <style>
    body, h1, h2, h3, h4, h5, h6 {
      font-family: Arial, Helvetica, sans-serif;
    }
    </style>

    Arial is ranked #1 in use on the Web.

    This is Helvetica

    Norway has a total area of 385,252 square kilometers and a population of 5,438,657 (December 2020). Norway is bordered by Sweden, Finland and Russia to the north-east, and the Skagerrak to the south, with Denmark on the other side.

    Norway has a total area of 385,252 square kilometers and a population of 5,438,657 (December 2020). Norway is bordered by Sweden, Finland and Russia to the north-east, and the Skagerrak to the south, with Denmark on the other side.

    Example

    <style>
    body, h1, h2, h3, h4, h5, h6 {
      font-family: Helvetica, Arial, sans-serif;
    }
    </style>

    Helvetica is ranked #2 in use on the Web.

    This is Verdana

    Norway has a total area of 385,252 square kilometers and a population of 5,438,657 (December 2020). Norway is bordered by Sweden, Finland and Russia to the north-east, and the Skagerrak to the south, with Denmark on the other side.

    Norway has a total area of 385,252 square kilometers and a population of 5,438,657 (December 2020). Norway is bordered by Sweden, Finland and Russia to the north-east, and the Skagerrak to the south, with Denmark on the other side.

    Example

    body, h1, h2, h3, h4, h5, h6 {
      font-family: Verdana, Geneva, sans-serif;
    }

    Verdana is ranked #3 in use on the Web.

    This is Geneva

    Norway has a total area of 385,252 square kilometers and a population of 5,438,657 (December 2020). Norway is bordered by Sweden, Finland and Russia to the north-east, and the Skagerrak to the south, with Denmark on the other side.

    Norway has a total area of 385,252 square kilometers and a population of 5,438,657 (December 2020). Norway is bordered by Sweden, Finland and Russia to the north-east, and the Skagerrak to the south, with Denmark on the other side.

    Example

    body, h1, h2, h3, h4, h5, h6 {
      font-family: Geneva, Verdana, sans-serif;
    }

    This is Tahoma

    Norway has a total area of 385,252 square kilometers and a population of 5,438,657 (December 2020). Norway is bordered by Sweden, Finland and Russia to the north-east, and the Skagerrak to the south, with Denmark on the other side.

    Norway has a total area of 385,252 square kilometers and a population of 5,438,657 (December 2020). Norway is bordered by Sweden, Finland and Russia to the north-east, and the Skagerrak to the south, with Denmark on the other side.

    Example

    body, h1, h2, h3, h4, h5, h6 {
      font-family: Tahoma, "Trebuchet MS", sans-serif;
    }

    This is Trebuchet MS

    Norway has a total area of 385,252 square kilometers and a population of 5,438,657 (December 2020). Norway is bordered by Sweden, Finland and Russia to the north-east, and the Skagerrak to the south, with Denmark on the other side.

    Norway has a total area of 385,252 square kilometers and a population of 5,438,657 (December 2020). Norway is bordered by Sweden, Finland and Russia to the north-east, and the Skagerrak to the south, with Denmark on the other side.

    Example

    body, h1, h2, h3, h4, h5, h6 {
      font-family: "Trebuchet MS", Tahoma, sans-serif;
    }

    This is Segoe UI

    Norway has a total area of 385,252 square kilometers and a population of 5,438,657 (December 2020). Norway is bordered by Sweden, Finland and Russia to the north-east, and the Skagerrak to the south, with Denmark on the other side.

    Norway has a total area of 385,252 square kilometers and a population of 5,438,657 (December 2020). Norway is bordered by Sweden, Finland and Russia to the north-east, and the Skagerrak to the south, with Denmark on the other side.

    Example

    body, h1, h2, h3, h4, h5, h6 {
      font-family: "Segoe UI", Arial, sans-serif
    }

    Segoe UI is the default font in Windows 10. It is also the default heading font in w3resource an W3.CSS.

    Web Safe Serif Fonts

    Font FamilySafe Fallback
    Times New RomanTimes, serif
    Georgiaserif
    Times New Roman is considered the most web safe serif font. It works on all Windows machines (99.7%) and all Mac machines (97.4%).

    Some older operating systems might have an alternative version called Times, so it is smart to use Times as a fallback as well as serif.

    Georgia is also considered very safe. It is a little larger than Times New Roman, but works well on most Windows machines (99.4%) and Mac machines (97.5%).

    To be on the safe side, use serif as fallback.

    This is Times New Roman

    Norway has a total area of 385,252 square kilometers and a population of 5,438,657 (December 2020). Norway is bordered by Sweden, Finland and Russia to the north-east, and the Skagerrak to the south, with Denmark on the other side.

    Norway has a total area of 385,252 square kilometers and a population of 5,438,657 (December 2020). Norway is bordered by Sweden, Finland and Russia to the north-east, and the Skagerrak to the south, with Denmark on the other side.

    Example

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

    This is Georgia

    Norway has a total area of 385,252 square kilometers and a population of 5,438,657 (December 2020). Norway is bordered by Sweden, Finland and Russia to the north-east, and the Skagerrak to the south, with Denmark on the other side.

    Norway has a total area of 385,252 square kilometers and a population of 5,438,657 (December 2020). Norway is bordered by Sweden, Finland and Russia to the north-east, and the Skagerrak to the south, with Denmark on the other side.

    Example

    body, h1, h2, h3, h4, h5, h6 {
      font-family: Georgia, serif;
    }

    Monospace Fonts

    In a monospace font, all letters occupy the same width.

    Monospaced fonts are often used to display computer code.

    Font FamilySafe Fallback
    Courier Newmonospace
    Lucida ConsoleMonaco, monospace
    MonacoLucida Console, monospace

    Courier New is considered the most web safe monospace font. It is installed on most Windows and Mac machines.

    Lucida Console does not run on Mac. Monaco does not run on Windows.

    One solution is to use Monaco as fallback for Lucida Console.

    There are no 100% web safe fonts, but you can always use w3-monospace.


    This is w3-monospace

    Norway has a total area of 385,252 square kilometers and a population of 5,438,657 (December 2020). Norway is bordered by Sweden, Finland and Russia to the north-east, and the Skagerrak to the south, with Denmark on the other side.

    Norway has a total area of 385,252 square kilometers and a population of 5,438,657 (December 2020). Norway is bordered by Sweden, Finland and Russia to the north-east, and the Skagerrak to the south, with Denmark on the other side.

    Example

    <div class="w3-monospace">


    This is Courier New

    Norway has a total area of 385,252 square kilometers and a population of 5,438,657 (December 2020). Norway is bordered by Sweden, Finland and Russia to the north-east, and the Skagerrak to the south, with Denmark on the other side.

    Norway has a total area of 385,252 square kilometers and a population of 5,438,657 (December 2020). Norway is bordered by Sweden, Finland and Russia to the north-east, and the Skagerrak to the south, with Denmark on the other side.

    Example

    body, h1, h2, h3, h4, h5, h6 {
      font-family: "Courier New", monospace;
    }

    This is Lucida or Monaco

    Norway has a total area of 385,252 square kilometers and a population of 5,438,657 (December 2020). Norway is bordered by Sweden, Finland and Russia to the north-east, and the Skagerrak to the south, with Denmark on the other side.

    Norway has a total area of 385,252 square kilometers and a population of 5,438,657 (December 2020). Norway is bordered by Sweden, Finland and Russia to the north-east, and the Skagerrak to the south, with Denmark on the other side.

    Example

    body, h1, h2, h3, h4, h5, h6 {
      font-family: "Lucida Console", Monaco, monospace;
    }

    There are no web safe handwriting fonts, but you can safely use w3-cursive.

    This is w3-cursive

    Norway has a total area of 385,252 square kilometers and a population of 5,438,657 (December 2020). Norway is bordered by Sweden, Finland and Russia to the north-east, and the Skagerrak to the south, with Denmark on the other side.

    Norway has a total area of 385,252 square kilometers and a population of 5,438,657 (December 2020). Norway is bordered by Sweden, Finland and Russia to the north-east, and the Skagerrak to the south, with Denmark on the other side.

    Example

    <div class="w3-cursive">