Google fonts are not loaded in visual editor

Bugs
, ,
1

Hello, the issue is that half of the times when we open a page for edit in the Builder’s visual editor the Google fonts are not loaded and we need to refresh the page (sometimes much more than one time) to force the font loading.

It is even worse - if we press the publish button at such broken state the actual page also become broken.

When the fonts are not loaded their declaration actually are missing from the paje JSON.

Tis is pretty annoying when we have to change just few pieces of text for a minute, and need to spent 10-15 minutes for refreshing and wait to make sure the output page is correctly loaded.

Builder content link

Tradeapp 3 reasons to invest in Amazon [CFD Disclaimer] | Visual Editor | Builder.io

Builder public api key

52b9e9de7edf45808c777b9f003b2d1b

Detailed steps to reproduce the bug

Jus open a page in visual editor, if the bug not appears, open it again…

Screenshots or video link

builder-font-issue
builder-font-issue1920×520 127 KB

You can see the page on the right page is broken.

Code stack you are integrating Builder with

NextJS 14, React.

Builder SDK1. (We have tried also SDK2 - with it the fonts are actually not loaded all the time and it causes a lot of other issues)

Reproducible code example

2

Hello @SpasTB,

Welcome to the builder.io forum post.

Could you confirm if you are hosting these Google fonts locally or from CDN?

3

Hi, @manish-sharma .

Actually I do not host the fonts anywhere at the moment, I’m just choosing them from the Style tab in the visual editor. Then they appears in the page JSON like this:

"customFonts": [
      {
        "files": {
          "100": "https://fonts.gstatic.com/s/poppins/v20/pxiGyp8kv8JHgFVrLPTed3FBGPaTSQ.ttf",
          "200": "https://fonts.gstatic.com/s/poppins/v20/pxiByp8kv8JHgFVrLFj_V1tvFP-KUEg.ttf",
          "300": "https://fonts.gstatic.com/s/poppins/v20/pxiByp8kv8JHgFVrLDz8V1tvFP-KUEg.ttf",
          "500": "https://fonts.gstatic.com/s/poppins/v20/pxiByp8kv8JHgFVrLGT9V1tvFP-KUEg.ttf",
          "600": "https://fonts.gstatic.com/s/poppins/v20/pxiByp8kv8JHgFVrLEj6V1tvFP-KUEg.ttf",
          "700": "https://fonts.gstatic.com/s/poppins/v20/pxiByp8kv8JHgFVrLCz7V1tvFP-KUEg.ttf",
          "800": "https://fonts.gstatic.com/s/poppins/v20/pxiByp8kv8JHgFVrLDD4V1tvFP-KUEg.ttf",
          "900": "https://fonts.gstatic.com/s/poppins/v20/pxiByp8kv8JHgFVrLBT5V1tvFP-KUEg.ttf",
          "600italic": "https://fonts.gstatic.com/s/poppins/v20/pxiDyp8kv8JHgFVrJJLmr19lEN2PQEhcqw.ttf",
          "italic": "https://fonts.gstatic.com/s/poppins/v20/pxiGyp8kv8JHgFVrJJLed3FBGPaTSQ.ttf",
          "300italic": "https://fonts.gstatic.com/s/poppins/v20/pxiDyp8kv8JHgFVrJJLm21llEN2PQEhcqw.ttf",
          "regular": "https://fonts.gstatic.com/s/poppins/v20/pxiEyp8kv8JHgFVrFJDUc1NECPY.ttf",
          "900italic": "https://fonts.gstatic.com/s/poppins/v20/pxiDyp8kv8JHgFVrJJLm81xlEN2PQEhcqw.ttf",
          "700italic": "https://fonts.gstatic.com/s/poppins/v20/pxiDyp8kv8JHgFVrJJLmy15lEN2PQEhcqw.ttf",
          "100italic": "https://fonts.gstatic.com/s/poppins/v20/pxiAyp8kv8JHgFVrJJLmE3tFOvODSVFF.ttf",
          "800italic": "https://fonts.gstatic.com/s/poppins/v20/pxiDyp8kv8JHgFVrJJLm111lEN2PQEhcqw.ttf",
          "200italic": "https://fonts.gstatic.com/s/poppins/v20/pxiDyp8kv8JHgFVrJJLmv1plEN2PQEhcqw.ttf",
          "500italic": "https://fonts.gstatic.com/s/poppins/v20/pxiDyp8kv8JHgFVrJJLmg1hlEN2PQEhcqw.ttf"
        },
        "variants": [
          "100",
          "100italic",
          "200",
          "200italic",
          "300",
          "300italic",
          "regular",
          "italic",
          "500",
          "500italic",
          "600",
          "600italic",
          "700",
          "700italic",
          "800",
          "800italic",
          "900",
          "900italic"
        ],
        "kind": "webfonts#webfont",
        "category": "sans-serif",
        "version": "v20",
        "menu": "https://fonts.gstatic.com/s/poppins/v20/pxiEyp8kv8JHgFVrJJHedw.ttf",
        "lastModified": "2022-09-22",
        "subsets": [
          "devanagari",
          "latin",
          "latin-ext"
        ],
        "family": "Poppins"
      },
      {
        "files": {
          "regular": "https://fonts.gstatic.com/s/bebasneue/v14/JTUSjIg69CK48gW7PXooxW5rygbi49c.ttf"
        },
        "family": "Bebas Neue",
        "kind": "webfonts#webfont",
        "menu": "https://fonts.gstatic.com/s/bebasneue/v14/JTUSjIg69CK48gW7PXoo9W9hzg.ttf",
        "variants": [
          "regular"
        ],
        "version": "v14",
        "subsets": [
          "latin",
          "latin-ext"
        ],
        "category": "sans-serif",
        "lastModified": "2023-08-25"
      }
    ],

I was thinking to upload them as custom fonts within Builder, but didn’t find a way how to define something like global @font-face and abandoned this idea.

4

Hello!

What I’ve noticed is that Builder.io places the @font-face on our page. Consequently, after some edits, it gets confused and detects this @font-face as part of our code, thus no longer adding it to their CSS. Then they appears in the page JSON like this:

"customFonts": [
    { "isUserFont": true, "family": "Poppins" }
]

I also mentioned this bug in this thread:

5

Hello @SpasTB, @IgorDevJS,

We are currently investigating the issue internally, and we will keep you updated with any progress.

Thanks,

1 Like
6

Hi @manish-sharma , just let you know this thing happens also when one removes a component.