cssfonts

What is the correct way to set custom font with bold or italic (etc.) iterations?

Let's say I need to put a custom font on my website.

I have this font, let's say it's called "Aphias". I use this question: https://stackoverflow.com/a/43366402/3536236 and have the CSS thus:

@font-face {
    font-family: 'Aphias';
    src: url('/assets/fonts/Aphias.woff') format('woff'), 
         url('/assets/fonts/Aphias.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

Ok, but the font I have has lots of separate files for different iterations, such as a Bold file and an italic file.

My font directory contains:

Aphias.ttf
Aphias.woff
Aphias-Bold.ttf
Aphias-Bold.woff
Aphias-Italic.ttf
Aphias-Italic.woff

What is the correct way to add these iterations to the CSS so that - for example; the <strong></strong> version of the font is loaded at the correct time, or when a text is marked as font-weight: bold; that the bold iteration is displayed:

Eg

    @font-face {
        font-family: 'Aphias';
        src: url('/assets/fonts/Aphias.woff') format('woff'), 
             url('/assets/fonts/Aphias.ttf') format('truetype');
        font-weight: normal;
        font-style: normal;
    }
    
    
    p {
        font-family: 'Aphias', Arial, sans-serif;
        font-size: 1rem;
    }

    p > span {
        font-weight: bold;
    }
    
    
    
<p>
This is some text with the custom font on display. Loaded from the font file. 

<span>This is the same text but should be bold / heavy font.</span></p>

The only way I think I can do it is with multiple @font-faces but they don't seem to work.

eg

@font-face {
    font-family: 'Aphias';
    src: url('/assets/fonts/Aphias.woff') format('woff'), 
         url('/assets/fonts/Aphias.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Aphias Italic';
    src: url('/assets/fonts/Aphias-Italic.woff') format('woff'), 
         url('/assets/fonts/Aphias-Italic.ttf') format('truetype');
    font-weight: normal;
    font-style: italic;
}

@font-face {
    font-family: 'Aphias Bold';
    src: url('/assets/fonts/Aphias-Bold.woff') format('woff'), 
         url('/assets/fonts/Aphias-Bold.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
}

I can't find any documentation on this specific issue. How do I get this to work? The similar question here: Defining CSS @Font-Face bold italic answers don't actually answer the question asked.

Solution

  • The way to use the same font in different variations is to define its own -@font-face for each type, and call them all the same name in font-family. Then in your use of the font - if you define in CSS for example: font-style: italic; then the browser will know to go to the font that is of type italic, and according to your example, it will look like this:

    @font-face {
font-family: 'Aphias';
src: url('/assets/fonts/Aphias.woff') format('woff'),
url('/assets/fonts/Aphias.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}

@font-face {
font-family: 'Aphias';
src: url('/assets/fonts/Aphias-Italic.woff') format('woff'),
 url('/assets/fonts/Aphias-Italic.ttf') format('truetype');
 font-weight: normal;
 font-style: italic;
}

@font-face {
 font-family: 'Aphias';
 src: url('/assets/fonts/Aphias-Bold.woff') format('woff'),
 url('/assets/fonts/Aphias-Bold.ttf') format('truetype');
 font-weight: bold;
 font-style: normal;
}

    And when you want to use the font in a specific way, for example with bold, you do it like this:

    <p>
This is some text with the custom font on display. Loaded from the font file.

<span>This is the same text but should be bold / heavy font.</span></p>

p {
 font-weight: bold; 
}

    This will load the bold version of 'Aphias'.