Support » Theme: Twenty Twenty-Two » Font weight 300 is not displayed

  • Resolved Jonas


    I use WP 61. and TT2 1.2.

    Reader: Windows 10 with Chrome and Firefox in current version.

    Following problem:
    If the font “Source Serif Pro” with the weight “normal” is installed as the system font on the reader’s PC, this weight is displayed at H1 to H4 although the standard weight is used in the backend.
    Is there a solution to prevent the fallback to “normal” and display the selected font-weight?

    On the www I found sometihing like:
    @font face {
    src: url(‘/xx.woff2’) format(‘woff2 supports variations’),
    url(‘/xx.woff2’) format(‘woff2-variations’);
    font-weight: 400 700;


Viewing 7 replies - 1 through 7 (of 7 total)
  • Moderator Kathryn P.


    Hi @elbsegler – could you please provide me with a link to your site so I can have a look at some examples directly?

    Does this affect h1-h4 blocks added within the body of post and page content only, or does it also affect elements like post and page titles as well?

    Are h5-h6 not affected by this issue?

    Thread Starter Jonas


    Hi @zoonini ,
    Thank you for your concern.

    This is one example:

    It is important that the font Source Serif Pro (Regular 400) is installed as a system font on the PC or laptop to see the effect.

    H5 and H6 are treated differently in TT2’s theme.json.The page title appears to be affected as well.
    I have included two images on the website mentioned above. With and without installed system font.

    The page source line 84 contains the following note:
    @font-face{font-family:”Source Serif Pro”;font-style:normal;font-weight:200 900;font-display:fallback;src:local(“Source Serif Pro”), url(‘/wp-content/themes/twentytwentytwo/assets/fonts/source-serif-pro/SourceSerif4Variable-Roman.ttf.woff2’) format(‘woff2’);
    Maybe the “fallback” is a hint?

    Thread Starter Jonas


    I added two more screenshots. Namely from the network monitor. Here you can see that in the event of this error, the font is not obtained from the server.

    But unfortunately, I don’t have a solution. I’m not a programmer. 🙁

    • This reply was modified 7 months, 2 weeks ago by Jonas.
    Moderator Kathryn P.


    Hi @elbsegler – thanks for the details and the examples on the test site, very helpful. While I don’t have a Windows machine to test on directly, I went ahead and reported this as a bug here:

    If you have any information to add, feel free to let me know or add it to the ticket directly as a comment.

    In terms of a workaround, you might try bypassing the use of Source Serif Pro altogether by adding a Google Font instead, and assigning it to the h1-h4 headings… let me know if that works if you give that a go.

    With local("Source Serif Pro"), the theme searches for an installed version of the font first. If you navigate to the Customizer—you may need to visit your site and type ‘/wp-admin/customize.php’ at the end of the address to access it—you could try pasting these styles in the Additional CSS panel:

    @font-face{font-family:"Source Serif Pro";font-style:normal;font-weight:200 900;font-display:fallback;src:url('/wp-content/themes/twentytwentytwo/assets/fonts/source-serif-pro/SourceSerif4Variable-Roman.ttf.woff2') format('woff2');font-stretch:normal;}@font-face{font-family:"Source Serif Pro";font-style:italic;font-weight:200 900;font-display:fallback;src:url('/wp-content/themes/twentytwentytwo/assets/fonts/source-serif-pro/SourceSerif4Variable-Italic.ttf.woff2') format('woff2');font-stretch:normal;}

    (If your site uses a subdirectory, that needs to be in both url references.)

    Thread Starter Jonas


    Thank you for opening a ticket.

    Thanks for your tip. It works wonderfully. So the fallback is a problem. Your CSS snippet bypasses the original. Perfect.

    Moderator Kathryn P.


    Awesome, glad @sabernhardt’s CSS workaround did the trick for now!

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘Font weight 300 is not displayed’ is closed to new replies.