NO BUG: Inconsistent Font Rendering – Some Fonts Display Correctly, Others Do Not

Browser: Chrome 132
OS: Windows
URL: https://maispin.tw/
Video: Jam


:small_blue_diamond: Issue Description

I am experiencing an issue in Bricks Builder where some fonts render correctly, while others appear inconsistent (thicker/thinner or not loading properly).

  • Certain fonts display correctly, but some fall back to system fonts, causing inconsistent weight and rendering.
  • **The Chrome DevTools console logs “Slow network is detected,” and some fonts fail to load, falling back to default system fonts. => Chrome Platform Status **
  • Even after trying multiple solutions, the issue persists.

:small_blue_diamond: What I’ve Tried

  1. Migrating the site to a new server using Guru
  • When I migrated the site to a new environment using Guru (without changing any settings), the issue did not occur.
  1. Forcing global font weight settings in Bricks Builder
  • I manually set all font weights under Bricks → Design Settings → Global Typography to ensure consistency, but the issue persists.
  1. Disabling all WordPress plugins and clearing cache
  • I completely disabled all WordPress plugins and cleared all cache (WordPress cache), but the issue still remains.

:small_blue_diamond: Request

Could you please advise if Bricks Builder has a way to ensure fonts always load consistently without falling back to system fonts?
Is there an option to enforce font-display: swap; or another method within Bricks Builder to maintain consistent font rendering?

I appreciate your help and look forward to your response. Thank you! :pray:

Hi,
Thanks so much for your report!

I can see from the custom font URLs that you didn’t follow the instructions in the Academy and didn’t upload each font style separately, correct?

I assume you uploaded the fonts in bulk and only entered the URL for each font. Am I right in my assumption? If so, please use the method described in the Academy with 2-3 fonts as a test - then it should work as expected.

Best regards,
timmse

Yes, at the moment we don’t have any customized fonts on our side.
We haven’t bothered to disable google fonts so that we can just select Noto Sans TC.
I thought it was only necessary for other fonts that are not google fonts.

But I’ll try to fix it in that direction now!

Thank you very much!!
I’ve found that the problem may indeed be that the original google load was too large and too long, and there may be a problem with resources being discarded, resulting in some of the characters not being able to find a text file that can be used correctly.

Disabling the loading of google fonts in the Bricks builder settings, and introducing a specific font alone did help​:sparkles::sparkles::sparkles:

However, since I probably have tons of stops, I thought I’d share that I ended up using the following to do the separate loading of fonts

I directly use custom CSS to introduce global fonts.

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@100..900&family=Noto+Sans:ital,wght@0,100..900;1,100..900&display=swap');  /* Traditional Chinese + English */

body {
    font-family: 'Noto Sans', sans-serif;
} 

h1, h2, h3, h4, h5, h6,button,a,input,textarea,select,option,label,span,div,p {
    font-family: 'Noto Sans', sans-serif;
}

Hey Elizabeth,
I’m glad you were able to solve the problem.

1 Like