How to use @font-face properly & reliably

The @font-face CSS rule allows the use of custom fonts. This feature pretty much has full browser support, but should be used in the following way to ensure your custom font displays practically anywhere.

You will first need to have the font file that you want to use on your website as a TTF (TrueType), OTF (OpenType) or WOFF (Web Open Font Format) file. Once you have the font file, you can use the @font-face rule in your CSS file to specify the font and where to find it.

Here is an example of how to use the @font-face rule in your CSS:

@font-face {
    font-family: 'My Custom Font';
    src: url('my-custom-font.woff') format('woff');
}

body {
    font-family: 'My Custom Font', sans-serif;
}

In this example, we are defining a new font-family called “My Custom Font” and linking to the font file “my-custom-font.woff” using the src property. The format property is used to specify the format of the font file. In this case, we are using a WOFF file.

After defining the custom font, we are then setting the font-family of the body to “My Custom Font” and a fallback font of “sans-serif”. This means that if the user’s browser does not support the custom font, it will fall back to the “sans-serif” font.

This is all well and good for modern browsers but older ones may not support the WOFF format, so we need to include multiple formats to ensure maximum compatibility. For example, you could also include TTF and OTF formats:

@font-face {
    font-family: 'My Custom Font';
    src: url('my-custom-font.woff') format('woff'),
         url('my-custom-font.ttf') format('truetype'),
         url('my-custom-font.otf') format('opentype');
}

To specify bold and italic variations of a custom font, you will need to have separate font files for each variation. For example, you might have “my-custom-font-bold.woff” and “my-custom-font-italic.woff” in addition to the regular “my-custom-font.woff” file.

Here is an example of how to use the @font-face rule to specify bold and italic variations of a custom font:

@font-face {
    font-family: 'My Custom Font';
    src: url('my-custom-font.woff') format('woff'),
         url('my-custom-font.ttf') format('truetype'),
         url('my-custom-font.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'My Custom Font';
    src: url('my-custom-font-bold.woff') format('woff'),
         url('my-custom-font-bold.ttf') format('truetype'),
         url('my-custom-font-bold.otf') format('opentype');
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: 'My Custom Font';
    src: url('my-custom-font-italic.woff') format('woff'),
         url('my-custom-font-italic.ttf') format('truetype'),
         url('my-custom-font-italic.otf') format('opentype');
    font-weight: normal;
    font-style: italic;
}

@font-face {
    font-family: 'My Custom Font';
    src: url('my-custom-font-bolditalic.woff') format('woff'),
         url('my-custom-font-bolditalic.ttf') format('truetype'),
         url('my-custom-font-bolditalic.otf') format('opentype');
    font-weight: bold;
    font-style: italic;
}

In this example, we are defining four separate @font-face rules: one for the regular font, one for the bold font, one for the italic font, and one for the bold-italic font. Each rule specifies the font-family as “My Custom Font” and provides the location and format of the corresponding font file using the src property. The font-weight and font-style properties are used to specify whether the font is bold or italic.

Once you’ve defined the custom fonts, you can then use CSS to apply them to specific elements on your webpage. For example, you can use the font-weight and font-style properties to make text bold or italic:

p {
    font-family: 'My Custom Font', sans-serif;
}

strong {
    font-weight: bold;
}