CODEWITHSUNDEEP
csswordpressfont-facewebfonts
Daniel Vickers
Daniel Vickers

Reputation: 1064

Local Font Declaration Not Loading Italic/Bold

I know there's plenty of questions on here regarding loading fonts using font face however I have checked them all (or at least a great deal of them) and nothing seems to work...

@font-face {  
    font-family: 'Open Sans';
    font-weight: 400;
    font-style: normal;
    font-display: swap;
    unicode-range: U+000-5FF;
    src: local('Open Sans'),
    url('../../fonts/open-sans/open-sans-regular.woff2') format('woff2'),
    url('../../fonts/open-sans/open-sans-regular.woff') format('woff');
}

@font-face {  
    font-family: 'Open Sans';
    font-weight: 400;
    font-style: italic;
    font-display: swap;
    unicode-range: U+000-5FF;
    src: local('Open Sans'),
    url('../../fonts/open-sans/open-sans-italic.woff2') format('woff2'),
    url('../../fonts/open-sans/open-sans-italic.woff') format('woff');
}

@font-face {  
    font-family: 'Open Sans';
    font-weight: 700;
    font-style: normal;
    font-display: swap;
    unicode-range: U+000-5FF;
    src: local('Open Sans'),
    url('../../fonts/open-sans/open-sans-bold.woff2') format('woff2'),
    url('../../fonts/open-sans/open-sans-bold.woff') format('woff');
}

@font-face {  
    font-family: 'Open Sans';
    font-weight: 700;
    font-style: italic;
    font-display: swap;
    unicode-range: U+000-5FF;
    src: local('Open Sans'),
    url('../../fonts/open-sans/open-sans-bold-italic.woff2') format('woff2'),
    url('../../fonts/open-sans/open-sans-bold-italic.woff') format('woff');
}
//End Open Sans

I then load the script using:

wp_enqueue_style( 'font-open-sans', get_template_directory_uri().'/assets/scss/css/open-sans.css', false, NULL, 'all');

Console throws no 404's and in the Page Source I can see the css file is loaded correctly. However, when attempting to use font-weight: bold; font-weight: 700; font-style: italic; nothing happens it just remains normal.

File structure:

- theme
    > assets
        > fonts
            > open-sans
                > open-sans-italic.woff
                > open-sans-italic.woff2
        > scss
            > css
                > open-sans.css

Update

After checking the styles tab of inspector I can see the line is called however, it has a line through it (but is not over ridden anywhere until the default browser font: inherit code.

Also to note it correctly bolds in Safari, but not Chrome. Even though both show it crossed out.

The inclusion of both files types means all browsers can serve a font as long as the version is sooner than something like 2014. My chrome is 80.0.3987.132 so I know it's not a version issue.

https://caniuse.com/?search=woff https://caniuse.com/?search=woff2

Update

The issue was fixed by removing local('Open Sans')

I have checked my mac and have discovered I have a lot of TTF files installed, with names that don't match. I will not mark an answer as I don't understand why this still doesn't bold for Chrome but does for Safari. Please someone with knowledge of this feel free to answer with detail to claim the bounty.

Update

Answer has been provided that means the local declaration can stay!

Upvotes: 4

Views: 853

Answers (1)

Ihar Aliakseyenka
Ihar Aliakseyenka

Reputation: 14183

The issue you're facing is because you've told it to look for the same local font file instead of defining the weight/font-style for each instance.

Try to add font-weight/style in src: local for example:

src: local('Open Sans 400'), //Regular
src: local('Open Sans 400i'), //Regular Italic
src: local('Open Sans 700'), //Bold
src: local('Open Sans 700i'), //Bold Italic

or alternatively you could use:

src: local('Open Sans'),
src: local('Open Sans Italic'),
src: local('Open Sans Bold'),
src: local('Open Sans Bold Italic'),

Upvotes: 2

Related Questions