Preview Google Fonts in a dynamic content page

[hisoka]

How do I load and preview google fonts in a dynamic page using node within wappler? I can only see the result after I preview the whole page in chrome with the layout added on top of the content when it adds the header.

Only workaround I found it’s paste:

<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=DM+Serif+Display&display=swap">

    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap">

Inside the content page instead of the layout this way I can see it in wappler. It’s this a good practice? or am I being silly and there is a better way

[sid]

Hi.
This is the correct way of doing it. Such links should be on the layout page.

[hisoka]

Thanks for your reply!

Then, there is not a way to be able to preview the content page in the correct final form while i’m building something? Since the links will be in the header and the header is in the layout page, so I assume they are not loaded in the content page while im working on it.

Thanks!

[sid]

That is correct.
There are many limitations apart from just the font, because of this missing layout.
There is a Feature Request (FR) for this. You can vote on it if you need it.

[pedrosuarez00]

To preview Google Fonts on dynamic Content Pages within Wappler, one possible solution is to “import” them from the styles.css file:

@import('https://fonts.googleapis.com/css2?family=DM+Serif+Display&display=swap');

(don’t forget to reload the design view after that)

So you don’t need to use the links on every content page. I hope this helps.

If SEO is important for you, when you finish your design you can remove the @import in style.css and use <link> again only in the header of the layout page, which can improves perfomance because it can preload the font.

[Teodor]

This has been improved in Wappler 5.0.4
Make sure to enable the experimental features.