Google fonts are not loaded in visual editor

[SpasTB]

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

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

[manish-sharma]

Hello @SpasTB,

Welcome to the builder.io forum post.

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

[SpasTB]

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.

[IgorDevJS]

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:

Google Fonts Not Working from Second Element Onward

Please fill out as many of the following questions as possible so we can help you promptly! If you don’t know how to answer or it does not apply, feel free to remove it or leave it blank. Builder content link e.g. Builder.io: Visual Development Platform Builder public api key go to Builder.io: Visual Development Platform and copy your PUBLIC api key Detailed steps to reproduce the bug e.g. Add a text component and assign a Google font through the editing panel, it will work perfectly. When…

[manish-sharma]

Hello @SpasTB, @IgorDevJS,

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

Thanks,

[SpasTB]

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

[SpasTB]

Hi, @manish-sharma ,

Is there some progress on this issue? The experience is terrible! We spend ~10% of our working to refresh the page until we are sure the public version is okay.

[manish-sharma]

Hello @IgorDevJS, @SpasTB,

We’ve been diligently attempting to replicate this issue on our end using the Gen 1 SDK, but unfortunately, we haven’t had any success thus far. Rest assured, once we’re able to reproduce it, we’ll promptly engage our product team to implement a fix.

To expedite this process, could you kindly provide us with the exact steps you’re taking and the version of the GEN 1 SDK you’re using? This information would greatly assist us in reproducing the issue and facilitating a swift resolution.

[SpasTB]

Yes, sure. We need to fix this issue because our company is planning to migrate all several hundreds vanilla LP to builder.io. I’m having few other questions and few improvement suggestions, but first we need to resolve this one.

I’m trying to keep the project up to date:

"@builder.io/react": "^3.2.6",
"@builder.io/sdk": "^2.2.2",

I was tying also SDK2 but the same issue there was persistent, and switched back to SDK1.

There are not exact steps it happens all the time:

• Some times it happens when open a page within VE to continue my work or just change some text.
• Some times it happens when everything looks normal and just add a new component.
• Yesterday I sow when I’m editing a page and some of my also open the visual editor on the same page the fonts breaks immediately…

Even this morning the first message that I received in the chat was related to this issue:

…to resolve it, I just opened the Visual editor refresh few times until the issue was self fixed and publish the pages once again.

I will send you as a private message an archive of the current state of our Next.js app.

[SpasTB]

In addition here is one interesting screen shot:

The preview looks good, the published page looks good, but the preview thumbnail from the history of the published state looks broken.

[manish-sharma]

Hello @SpasTB,

I wanted to let you know that we were finally able to consistently reproduce the reported issue with Google fonts on our end, and we believe it may be a bug. Thank you for all your input today. We are currently investigating this further with our internal team and will provide you with an update as soon as we make any progress.

In the meantime, as suggested, please try uploading the Google fonts that are not working in the editor as custom fonts.

Thank you!