How can I get multiple font weights working using @font-face

Question

Paragraph text is not 400 weight as expected, it renders at 600 weight the same as h1. If I switch my @font-face declarations then both the h1 and p render at 400 weight. So the last @font-face declaration is the only one that gets rendered.

This is my css:

@font-face {
  font-family: "Karbon";
  src: url("./fonts/karbon/Karbon-Regular.woff2") format("woff2"),
       url("./fonts/karbon/Karbon-Regular.woff") format("woff"),
       url("./fonts/karbon/Karbon-Regular.otf") format("opentype");
}
@font-face {
  font-family: "Karbon";
  src: url("./fonts/karbon/Karbon-Semibold.woff2") format("woff2"),
       url("./fonts/karbon/Karbon-Semibold.woff") format("woff"),
       url("./fonts/karbon/Karbon-Semibold.otf") format("opentype");
  font-weight: 600;
}
h1 {
  font-family: "Karbon", tahoma;
  font-weight: 600;
}
p {
  font-family: "Karbon", tahoma;
  font-weight: 400;
}

This is in functions.php

function orbit_bb_custom_fonts ( $system_fonts ) {
    $system_fonts[ 'Karbon' ] = array(
      'fallback' => 'tahoma',
      'weights' => array(
        '400',
        '600',
      ),
    );  
  return $system_fonts;
}
add_filter( 'fl_theme_system_fonts', 'orbit_bb_custom_fonts' );
add_filter( 'fl_builder_font_families_system', 'orbit_bb_custom_fonts' );

I have two WordPress sites: one local build, one staging at https://brucem37.sg-host.com/. A possible clue is that this issue only happens on computers that aren't the one I built the website on, i.e. it looks perfect on my own computer.

As I'm using Beaver Builder, I followed this guide: https://docs.wpbeaverbuilder.com/bb-theme/defaults-for-styles/typography/add-web-fonts-complex-example/

I've spent hours scouring the internet for a possible solution and trying things that don't work so any help would be greatly appreciated!

score 0 · Answer 1 · answered Jan 20 '22 at 10:06

0

I guess you shoud set up font-weight: 400 for the normal. Write me, if you already tried. I found this example, maybe it will help: https://stackoverflow.com/a/28339483/17803626

(I dont have enough points to write to comments)

answered Jan 20 '22 at 10:06

Lucie

185
10

I had it that way initially, but it doesn't make a difference in this case. I'm thinking it has to be something to do with Wordpress permissions due to the fonts working perfectly when logged in. – thisisannie Jan 20 '22 at 22:00

score 0 · Answer 2 · answered Jan 20 '22 at 23:15

I still don't know what the problem was but I've solved it in an unsatisfying way that will have to make do.

@font-face {
  font-family: "Karbon";
  src: url("./fonts/karbon/Karbon-Regular.woff2") format("woff2"),
       url("./fonts/karbon/Karbon-Regular.woff") format("woff"),
       url("./fonts/karbon/Karbon-Regular.otf") format("opentype");
  font-weight: 400;
}
@font-face {
  font-family: "Karbon Semibold";
  src: url("./fonts/karbon/Karbon-Semibold.woff2") format("woff2"),
       url("./fonts/karbon/Karbon-Semibold.woff") format("woff"),
       url("./fonts/karbon/Karbon-Semibold.otf") format("opentype");
  font-weight: 600;
}
h1 {
  font-family: "Karbon Semibold", tahoma;
  font-weight: 600; // only useful for fallback font
}
p {
  font-family: "Karbon", tahoma;
  font-weight: 400; // only useful for fallback font
}

The downside is that I now can't use font-weight to change the weight of the font.

score 0 · Accepted Answer · answered Jan 27 '22 at 21:55

The problem is in the minified CSS. In WordPress, child themes need to have a Template header in style.css stylesheet. If this is missing, the theme will be "broken" and cause random issues.

/*
Theme Name: foo
Version: foo
Description: foo
Author: foo
Author URI: foo
template: foo
*/

How I found the answer: Having broken theme also prevented upload of featured image for posts and in solving that, the fonts were also resolved.

How can I get multiple font weights working using @font-face

3 Answers3