CODEWITHSUNDEEP
htmlcssfontsfont-face
lastnoob
lastnoob

Reputation: 648

CSS @font-face does not work with multiple font weights

I'm trying to load some custom fonts, but for some reason, only one weight is loaded on the front-end. I have checked in the devtools.

Here's my CSS:

/* FONTS */

@font-face {
    font-family: 'CalibreWeb';
    src: url('http://staging.parcelpet.com/wp-content/themes/oceanwp-child-theme/fonts/CalibreWeb-Regular.eot'); /* IE9 Compat Modes */
    src: url('http://staging.parcelpet.com/wp-content/themes/oceanwp-child-theme/fonts/CalibreWeb-Regular.woff2') format('woff2'), /* Super Modern Browsers */
         url('http://staging.parcelpet.com/wp-content/themes/oceanwp-child-theme/fonts/CalibreWeb-Regular.woff') format('woff'), /* Modern Browsers */
    font-weight: 400;

}
@font-face {

    font-family: 'CalibreWeb';
    src: url('http://staging.parcelpet.com/wp-content/themes/oceanwp-child-theme/fonts/CalibreWeb-Semibold.woff2'); /* IE9 Compat Modes */
    src: url('http://staging.parcelpet.com/wp-content/themes/oceanwp-child-theme/fonts/CalibreWeb-Semibold.woff2') format('woff2'), /* Super Modern Browsers */
         url('http://staging.parcelpet.com/wp-content/themes/oceanwp-child-theme/fonts/CalibreWeb-Semibold.woff') format('woff'), /* Modern Browsers */
    font-weight: 600;
}

You can check it here that there are some text which tries to use the CalibreWeb font-family with a font-weight of 400 (e.g. the subheading after Advice Hub.)

Any idea what could be the issue?

Upvotes: 0

Views: 2913

Answers (1)

user12359228
user12359228

Reputation:

It appears there is an error in your CSS syntax, causing some of the fonts to not be loaded.

To fix the syntax, use a semicolon on the second line of the second src value.

@font-face {
    font-family: 'CalibreWeb';
    src: url('http://staging.parcelpet.com/wp-content/themes/oceanwp-child-theme/fonts/CalibreWeb-Regular.eot');
    src: url('http://staging.parcelpet.com/wp-content/themes/oceanwp-child-theme/fonts/CalibreWeb-Regular.woff2') format('woff2'),
         url('http://staging.parcelpet.com/wp-content/themes/oceanwp-child-theme/fonts/CalibreWeb-Regular.woff') format('woff');
    font-weight: 400;
}
@font-face {
    font-family: 'CalibreWeb';
    src: url('http://staging.parcelpet.com/wp-content/themes/oceanwp-child-theme/fonts/CalibreWeb-Semibold.woff2');
    src: url('http://staging.parcelpet.com/wp-content/themes/oceanwp-child-theme/fonts/CalibreWeb-Semibold.woff2') format('woff2'),
         url('http://staging.parcelpet.com/wp-content/themes/oceanwp-child-theme/fonts/CalibreWeb-Semibold.woff') format('woff');
    font-weight: 600;
}

Upvotes: 1

Related Questions