Question 30724 in Wordpress Question posted in
The official Wordpress documentation can be found here.

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

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!

Tags:

3

Answers


  1. Chosen as BEST ANSWER
    0

    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.


  2. 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)

    Login or Signup to reply.
  3. 0

    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.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search