[Resolved] Local Font – Only 1 will work

[Brenden]

I am attempting to add 2 local fonts, but only 1 will work at a time. Only the font listed last in the CSS works. Both fonts will work, but only if they are listed last.

Here is the CSS

@font-face {
    font-family: 'Melodiously';
    src: url('/wp-content/themes/montana-bride/Melodiously.woff2') format('woff2'),
         url('/wp-content/themes/montana-bride/Melodiously.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Henderson';
    src: url('/wp-content/themes/montana-bride/HendersonSans.woff2') format('woff2'),
         url('/wp-content/themes/montana-bride/HendersonSans.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

Here is a staging url – https://montanabride.wpengine.com/style-guide/

Heading 1 is attempting to load ‘Melodiously’ but it is not working because it is first in the css.
Heading 2-6 is loading ‘Henderson’.

[Fernando]

Hi Brenden,

How are you adding the @font-face rules currently? Can you try adding them through Appearance > Customize > Additional CSS to test?

Let us know how it goes.

[Brenden]

That solved the problem. The CSS was in the child theme, but I am thinking there must be an issue with that file. Thank you for the idea to move it to Customize > Additional CSS.

[Fernando]

I see. Perhaps there’s a syntax error somewhere there or some other issue.

You can try these CSS error checkers to test:

https://codebeautify.org/cssvalidate
http://csslint.net/

You’re welcome, Brenden!

[Brenden]

Yep, I had an error. 🙁 Thank you for your help!

[Fernando]

You’re welcome, Brenden!

[Author]

Posts