❮ Previous Next ❯

CSS Fonts & Font Selection

  • Learn how to style text in CSS with font families, sizes, weights, and Google Fonts.

  • How Fonts Shape Readability, Brand Identity & User Experience

    Font Selection is IMPORTANT 

    Choosing the right font has a huge impact on how users experience your website.

    Fonts are not decoration
    Fonts are communication tools 

    A good font:

    Makes content easy to read

    Builds trust
    Creates brand identity
    Improves user comfort

    In simple words Fonts decide whether users stay… or leave

  • Why Choosing the RIGHT Font Matters

    Readability 

    If text is hard to read:

    • Users feel tired

    • Users lose interest

    • Users exit the site

    Easy-to-read font = happy eyes 

    Brand Identity 

    Fonts silently tell users who you are.

    Corporate → clean & serious
    Creative → playful & modern
    Luxury → elegant & thin

    Color, Size & Font Work Together 

    Font alone is not enough.

    You must also choose:

    • Correct font color

    • Correct font size

    • Proper spacing

    Bad combo = bad UX
    Good combo = professional design

    The CSS font-family Property

    The font-family property defines which font an element should use.

Font Family in CSS

This CSS code sets the paragraph p tag font to Arial, with Helvetica and sans-serif as fallback options if the first font is not available. 

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

  • Fallback Font System 

    Browsers may not support every font.

    So CSS tries fonts one by one:

    First choice
    Backup font
    Generic family (last option)

    Golden Rule:

    Always start with your preferred font
    Always end with a generic font family

    Font Names with Multiple Words

    If a font name has more than one word, use quotes:

Font Names with Multiple Words

When a font name contains more than one word, it must be written inside quotes in CSS, such as "Times New Roman", with fallback fonts provided after it. 

p {
  font-family: "Times New Roman", Times, serif;
}
  • Wrong: Times New Roman
    Correct: "Times New Roman"

Multiple Font Families

This example shows how different font families can be applied to different classes, with fallback fonts to ensure proper text display if the primary font is unavailable. 

.p1 {
  font-family: "Times New Roman", Times, serif;
}
.p2 {
  font-family: Arial, Helvetica, sans-serif;
}
.p3 {
  font-family: "Lucida Console", "Courier New", monospace;
}

  • Safe
    Professional
    Browser-friendly

    CSS Generic Font Families

    CSS has 5 generic font families.
    Every font belongs to one of these.

    Serif Fonts 

    What are Serif Fonts ?

    Serif fonts have small decorative strokes (serifs) at the ends of letters.
    These tiny strokes help guide the eye while reading long text.

    Key Characteristics

    Formal look
    Elegant appearance
    Traditional style
    Easy to read in printed content

    Where are Serif Fonts Used ?

    • Newspapers

    • Books

    • Magazines

    • Academic & official documents

    Popular Serif Font Examples

    • Times New Roman

    • Georgia

    • Garamond

Serif Fonts (Generic Font Family)

Serif fonts have small decorative strokes at the ends of letters and are commonly used for a formal and traditional look. 

<!DOCTYPE html>
<html>
<head>
    <title>Serif Font Example</title>
    <style>
        body {
            background-color: #f5f5f5;
            padding: 20px;
        }

        .heading {
            font-family: "Georgia", "Times New Roman", serif;
            color: #222;
        }

        .text {
            font-family: "Garamond", "Times New Roman", serif;
            font-size: 18px;
            line-height: 1.6;
            color: #444;
        }
    </style>
</head>
<body>
    <h1 class="heading">Serif Font Example</h1>
    <p class="text">
        This paragraph is written using a serif font. 
        Serif fonts are commonly used in books and newspapers 
        because they are easy to read.
    </p>
</body>
</html>

  • What Happens Here ?

    Browser first tries Georgia
    If not available → uses Times New Roman
    If none found → uses default serif font

    Font Fallback Concept 

    Always write multiple fonts:

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

    This ensures font safety across all devices 

    When to Use Serif Fonts ?

    Long text content
    Formal websites
    Educational or literary platforms

  • Sans-Serif Fonts 

    What are Sans-Serif Fonts ?

    Sans-serif fonts have clean, smooth letters without any decorative strokes at the ends.
    “Sans” means without, so sans-serif = without strokes.

    Key Characteristics

    ✔ Modern look
    ✔ Minimal & clean design
    ✔ Very easy to read on screens
    ✔ Perfect for digital content

    Where are Sans-Serif Fonts Used ?

    • Websites

    • Mobile apps

    • Software interfaces

    • Blogs & dashboards

    Most apps like Instagram, Google, and Facebook use sans-serif fonts because they are clear and screen-friendly.

    Popular Sans-Serif Font Examples

    • Arial

    • Verdana

    • Helvetica

Sans-Serif Fonts

Sans-serif fonts do not have decorative strokes at the ends of letters and are commonly used for a clean, modern, and screen-friendly appearance. 

<!DOCTYPE html>
<html>
<head>
    <title>Sans-Serif Font Example</title>
    <style>
        body {
            background-color: #f0f0f0;
            padding: 20px;
        }

        .title {
            font-family: "Helvetica", "Arial", sans-serif;
            color: #222;
        }

        .content {
            font-family: "Verdana", "Arial", sans-serif;
            font-size: 18px;
            line-height: 1.6;
            color: #444;
        }
    </style>
</head>
<body>
    <h1 class="title">Sans-Serif Font Example</h1>
    <p class="content">
        This paragraph uses a sans-serif font. 
        Sans-serif fonts are widely used on websites 
        because they look clean and modern on screens.
    </p>
</body>
</html>

  • What Happens Here ?

    Browser first tries Helvetica
    If not available → uses Arial
    If none found → uses default sans-serif font

    Why Sans-Serif is Best for Screens ?

    Clear letter shapes
    No extra strokes = less visual noise
    Better readability on small screens 

    When to Use Sans-Serif Fonts ?

    Websites & web apps
    Mobile UI
    Landing pages
    Modern designs

  • Monospace Fonts 

    What are Monospace Fonts ?

    Monospace fonts are fonts where every character has the same width.
    Whether it’s I, M, 1, or @ → all take equal space.

    That’s why they are called mono (one) + space (width).

    Key Characteristics

    All letters & symbols have equal width
    Technical & mechanical appearance
    Perfect alignment of text
    Easy to read code & data

    Where are Monospace Fonts Used ?

    • Coding & programming

    • Terminals / Command Prompt

    • Logs & tabular data

    • Debugging output

    ATM receipts and typewriter text use fixed-width fonts so numbers line up perfectly.

    Popular Monospace Font Examples

    • Courier New

    • Lucida Console

    • Monaco

Monospace Fonts

Monospace fonts have equal spacing between all characters and are commonly used for coding and technical content. 

<!DOCTYPE html>
<html>
<head>
    <title>Monospace Font Example</title>
    <style>
        body {
            background-color: #f4f4f4;
            padding: 20px;
        }

        .code-title {
            font-family: "Courier New", monospace;
            color: #333;
        }

        .code-block {
            font-family: "Lucida Console", "Monaco", monospace;
            background-color: #1e1e1e;
            color: #00ffcc;
            padding: 15px;
            font-size: 16px;
            border-radius: 6px;
        }
    </style>
</head>
<body>
    <h2 class="code-title">Monospace Font Example</h2>
    <pre class="code-block">
		This is a monospace text example.
		Every character has equal spacing.
		Used commonly for displaying code.
    </pre>
</body>
</html>

  • What Happens Here ?

    Each letter occupies equal space
    Code is neatly aligned
    Looks like a real coding terminal 

    Why Monospace is Best for Coding ?

    Easy to spot errors
    Proper alignment of brackets { }
    Consistent spacing improves readability

    When to Use Monospace Fonts ?

    Code snippets
    Developer tools
    Terminal-style UI
    Logs & configuration files

    When NOT to Use ?

    Long paragraphs
    Articles or blogs
    General website text

    Monospace = same-width characters
    Best for technical content
    Makes code readable & structured
    Essential font for developers

  • Cursive Fonts 

    What are Cursive Fonts ?

    Cursive fonts are designed to look like handwritten text.
    The letters usually flow into each other, giving a personal and artistic feel.

    Think of cursive fonts as digital handwriting.

    Key Characteristics

    Decorative & stylish
    Personal and creative look
    Letters often connected
    Not suitable for long paragraphs

    Where are Cursive Fonts Used ?

    • Greeting cards

    • Invitations

    • Creative designs

    • Signatures & logos

    Birthday cards and wedding invitations often use handwritten fonts to feel warm and personal

    Popular Cursive Font Examples

    • Brush Script MT

    • Lucida Handwriting

Cursive Fonts

Cursive fonts look like handwriting and are mainly used for decorative purposes, not for long readable text. 

<!DOCTYPE html>
<html>
<head>
    <title>Cursive Font Example</title>
    <style>
        body {
            background-color: #fafafa;
            padding: 20px;
        }

        .cursive-title {
            font-family: "Brush Script MT", cursive;
            font-size: 36px;
            color: #333;
        }

        .cursive-text {
            font-family: "Lucida Handwriting", cursive;
            font-size: 20px;
            line-height: 1.4;
            color: #555;
        }
    </style>
</head>
<body>
    <h2 class="cursive-title">Cursive Font Example</h2>
    <p class="cursive-text">
        This text looks like handwriting.
        Cursive fonts are great for decoration,
        but not for long reading.
    </p>
</body>
</html>

  • What Happens Here ?

    Text looks handwritten
    Gives artistic & friendly vibe
    Perfect for short messages

    Why Not Use Cursive for Long Text ?

    Letters are complex
    Hard to read quickly
    Causes eye strain

    When to Use Cursive Fonts ?

    Headings
    Quotes
    Logos
    Decorative text

    When NOT to Use ?

    Blogs
    Articles
    Instructions
    Long content

    Cursive fonts look handwritten
    Best for decoration
    Use in small amounts
    Avoid for long text

  • Fantasy Fonts 

    What are Fantasy Fonts ?

    Fantasy fonts are highly decorative, artistic, and playful fonts.
    They are designed to grab attention and create a fun, imaginative, or dramatic mood.

    Think of fantasy fonts as costume fonts — used for special occasions, not everyday wear.

    Key Characteristics

    Decorative & eye-catching
    Playful or dramatic look
    Strong personality
    Not suitable for serious or long content

    Where are Fantasy Fonts Used ?

    • Games & gaming websites

    • Movie posters & titles

    • Event banners

    • Creative or fantasy-themed designs

    Movie titles like fantasy films or adventure games often use bold, dramatic fonts to create excitement

    Popular Fantasy Font Examples

    • Copperplate

    • Papyrus

Fantasy Fonts

Fantasy fonts are decorative and creative fonts used to add a dramatic and stylish look to text. 

<!DOCTYPE html>
<html>
<head>
    <title>Fantasy Font Example</title>
    <style>
        body {
            background-color: #fdf6f0;
            padding: 20px;
        }

        .fantasy-title {
            font-family: "Copperplate", fantasy;
            font-size: 34px;
            color: darkred;
        }

        .fantasy-text {
            font-family: "Papyrus", fantasy;
            font-size: 18px;
            color: #444;
        }
    </style>
</head>
<body>
    <h2 class="fantasy-title">Fantasy Font Example</h2>
    <p class="fantasy-text">
        Fantasy fonts are fun and creative.
        Use them to add drama and style!
    </p>
</body>
</html>

  • What Happens Here ?

    Text looks artistic & dramatic
    Perfect for creative themes
    Grabs user attention instantly

    Why Fantasy Fonts Are Not for Serious Content ?

    Hard to read
    Look unprofessional in formal websites
    Distract users

    When to Use Fantasy Fonts ?

    ✔ Game websites
    ✔ Event posters
    ✔ Logos & branding
    ✔ Creative banners

    When NOT to Use ?

    Business websites
    Blogs & articles
    Educational platforms
    Long paragraphs

    Fantasy fonts are decorative & playful
    Best for creative designs
    Use sparingly
    Never use for serious content

    Font Examples Table:

    Generic FamilyExample Fonts
    SerifTimes New Roman, Georgia, Garamond
    Sans-serifArial, Verdana, Helvetica
    MonospaceCourier New, Monaco
    CursiveBrush Script MT
    FantasyPapyrus

  • What Are Web Safe Fonts ?

    Web Safe Fonts are fonts that are:
    Available on most devices
    Supported by all major browsers

    Important:
    There is NO 100% guaranteed font, so fallback is required.

Fallback Fonts

Fallback fonts are backup fonts defined in font-family so that if the first font is not available, the browser automatically uses the next available font. 

p {
  font-family: Tahoma, Verdana, sans-serif;
}

  • If Tahoma fails → Verdana
    If Verdana fails → sans-serif

    Always end with a generic family

    Best Web Safe Fonts List

    Sans-serif:

    • Arial

    • Verdana

    • Tahoma

    • Trebuchet MS

    Serif:

    • Times New Roman

    • Georgia

    • Garamond

    Monospace:

    • Courier New

    Cursive:

    • Brush Script MT

      Font Spotlight (Beginner Friendly)

      Arial

      Most widely used
      Default in many apps
      Extremely safe

      Verdana

      Very readable at small sizes
      Perfect for accessibility

      Times New Roman

      Professional
      Common in news & documents

      Courier New

      Coding & screenplays
      Fixed-width letters

      Brush Script MT

      Elegant
      Hard to read (use carefully)

      Modern Fonts with Google Fonts

      Make Your Website Modern, Beautiful & Professional 

      What are Google Fonts ?

      Google Fonts is a free online library that provides 1000+ modern, beautiful, and web-optimized fonts that you can easily use in your websites.

      Provided by 👉 Google Fonts

      Google Fonts = Stylish fonts + Free + Easy + Safe 

      Why Use Google Fonts ?

      100% Free to use (personal & commercial)
      No downloads required
      Easy to integrate
      Modern & trendy typography
      Works on all major browsers

      Using Google Fonts is like shopping in a free luxury font mall 

      How to Use Google Fonts 

      Step 1: Choose a Font

      Go to Google Fonts website and select a font you like

      Step 2: Add Link in <head>

      <head>

        <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Sofia">

      </head>

      Step 3: Use Font in CSS

      body {

        font-family: "Sofia", sans-serif;

      }

      ✔ That’s it!
      ✔ Your website now uses a Google Font

    Sofia Font (Google Font – Sans-serif)

    Sofia is a Google sans-serif font that gives a website an elegant, friendly, and creative appearance. 

    <!DOCTYPE html>
<html>
<head>
    <title>Sofia Font Example</title>

    <!-- Google Font Link -->
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Sofia">

    <style>
        body {
            font-family: "Sofia", sans-serif;
            background-color: #f9f9f9;
            padding: 20px;
            font-size: 22px;
        }
    </style>
</head>
<body>
    <h2>Sofia Font Example</h2>
    <p>
        This text is using the Sofia Google Font.
        It looks elegant, friendly, and creative.
    </p>
</body>
</html>

    • Why fallback is necessary ?

      • If Google Font fails to load 

      • Browser automatically uses next font 

      Always end with a generic family (serif / sans-serif)

      Using MULTIPLE Google Fonts 

      You can load multiple fonts in one link using 

      Request Multiple Fonts

    Fallback & Multiple Google Fonts

    Fallback fonts are backup fonts used if a Google Font fails to load, and multiple Google Fonts can be added using a single link. 

    <!DOCTYPE html>
<html>
<head>
    <title>Multiple Google Fonts Example</title>

    <!-- Load Multiple Google Fonts -->
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Audiowide|Sofia|Trirong">

    <style>
        body {
            background-color: #f4f4f4;
            padding: 20px;
        }

        h1.a {
            font-family: "Audiowide", sans-serif;
        }

        h1.b {
            font-family: "Sofia", sans-serif;
        }

        h1.c {
            font-family: "Trirong", serif;
        }
    </style>
</head>
<body>
    <h1 class="a">Audiowide Font</h1>
    <h1 class="b">Sofia Font</h1>
    <h1 class="c">Trirong Font</h1>
</body>
</html>

    • Best Practice:
      Use 1–2 fonts only
      Too many fonts = slow website

      Best Practices for Google Fonts

      Use 1 main font + 1 backup font
      Prefer Sans-serif for body text
      Use Serif or fancy fonts for headings only
      Always test on mobile
      Use fallback fonts 

      Common Beginner Mistakes

      Using too many Google Fonts
      Forgetting fallback fonts
      Using decorative fonts for paragraphs
      Large font files causing slow load

    ❮ Previous Next ❯