Home Whiteboard Practice Code Graphing Calculator Online Compilers Articles Tools
Tutorials Courses Jobs

How to add multiple font files for the same font using CSS?

HTML CSS Web Development Front End Technology

When creating web pages, using multiple font files for the same font family ensures optimal display across different browsers and devices. Some browsers support .woff files while others work better with .ttf or .eot formats.

Syntax

@font-face {
    font-family: 'FontName';
    src: url('font.woff2') format('woff2'),
         url('font.woff') format('woff'),
         url('font.ttf') format('truetype');
}

Method 1: Using @font-face Rule

The @font-face rule allows you to define custom fonts with multiple file formats as fallbacks. The browser will use the first supported format 

<!DOCTYPE html>
<html>
<head>
    <style>
        @font-face {
            font-family: 'CustomFont';
            src: url('/fonts/customfont.woff2') format('woff2'),
                 url('/fonts/customfont.woff') format('woff'),
                 url('/fonts/customfont.ttf') format('truetype');
            font-weight: normal;
            font-style: normal;
        }
        
        @font-face {
            font-family: 'CustomFont';
            src: url('/fonts/customfont-bold.woff2') format('woff2'),
                 url('/fonts/customfont-bold.woff') format('woff'),
                 url('/fonts/customfont-bold.ttf') format('truetype');
            font-weight: bold;
            font-style: normal;
        }
        
        .custom-text {
            font-family: 'CustomFont', Arial, sans-serif;
            font-size: 24px;
            margin: 20px 0;
        }
        
        .bold-text {
            font-family: 'CustomFont', Arial, sans-serif;
            font-weight: bold;
            font-size: 20px;
        }
    </style>
</head>
<body>
    <h2>Multiple Font Files Example</h2>
    <p class="custom-text">This text uses the custom font with fallbacks.</p>
    <p class="bold-text">This text uses the bold variant of the custom font.</p>
</body>
</html>

Text appears using the custom font if available, otherwise falls back to Arial or the default sans-serif font. The bold text shows the heavier weight variant.

Method 2: Using Web Font Services

Google Fonts automatically provides multiple font formats and weights for the same font family through a single link 

<!DOCTYPE html>
<html>
<head>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;700&display=swap" rel="stylesheet">
    <style>
        .roboto-light {
            font-family: 'Roboto', sans-serif;
            font-weight: 300;
            font-size: 18px;
            margin: 15px 0;
        }
        
        .roboto-regular {
            font-family: 'Roboto', sans-serif;
            font-weight: 400;
            font-size: 18px;
            margin: 15px 0;
        }
        
        .roboto-bold {
            font-family: 'Roboto', sans-serif;
            font-weight: 700;
            font-size: 18px;
            margin: 15px 0;
        }
    </style>
</head>
<body>
    <h2>Google Fonts Multiple Weights</h2>
    <p class="roboto-light">This is Roboto Light (300 weight)</p>
    <p class="roboto-regular">This is Roboto Regular (400 weight)</p>
    <p class="roboto-bold">This is Roboto Bold (700 weight)</p>
</body>
</html>

Three paragraphs display the same Roboto font family in different weights: light, regular, and bold. Google Fonts automatically serves the appropriate font files for each browser.

Key Benefits

Method Benefits Best For
@font-face Full control, custom fonts, offline support Custom branding, unique fonts
Web Font Services Easy implementation, optimized delivery, multiple formats Standard fonts, quick setup

Conclusion

Using multiple font files ensures cross-browser compatibility and optimal performance. The @font-face method gives you complete control over custom fonts, while web font services like Google Fonts provide convenience and automatic optimization.

Updated on: 2026-03-15T15:46:37+05:30

14K+ Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements