Google font font-face automatically imported?

Hello dear Wappler users !

I was importing a Google Font in my CSS file.
And it appears that Wappler automatically “extracted and imported” the font-face related to it ?

At the same time, I stumbled upon that article that explains why it’s not a great idea to do so as the extrated output is most likely to be adapted to the current browser :

So should I uncomment this auto-generated font-face section ?

Thank you very much for your input/feedback ! :slight_smile:

Hey @jeoff75,
What does that mean exactly? Can you show an example of what this extract and import is?

Sure.

What I mean is that I copy this import in my .css file…

And then a few minutes later the .css file is filled with font-face declarations like :

I’m not sure if it’s automatic in the background or if there is a certain action I’m doing when working that triggers this. :slight_smile:

If you’re looking for Google to host the font CSS files and serve them dynamically (like a CDN), you’ll want to link to the CSS file from your header in your HTML file:

<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro&display=swap" rel="stylesheet">

Use this rather than the @IMPORT function

I was expecting the @import in my .css file to be a smarter way to build my webapp.
As it prevents me from forgeting to include the font on each page + connects a logical “dependancy” built into the .css file, as it needs the font in question.

Am I having a wrong approach for this ? :slight_smile:

Thank you very much for your help !

Have a look at this:

https://www.giftofspeed.com/avoid-using-css-import/

Do you not use an include file on all your pages with common code such as linked stylesheets, scripts etc? Then you only have to have included it once in the include file.

Do you mean “include a JS file that loads other resources” ?
Or another mechanism ?
Thanks !

Good to know.
Thank you for the resource Max !

No, just a simple

<?php include 'name_of_your_include_file.php';?>

which then contains common bits of code such as links to css files, links to scripts etc.
Just the same way as you would use them for a Nav Bar, Header or Footer.

Fair point.
I tend to forget about php (planing to move all our backend to node).
But in that case that would help.
Thank you !

hi… UKRiggers… now that you mention this… do you have a solution for this… seems im not getting any responses… Server side include (php include) - moves include out of <head>

As i need the PHP includes to remain in the “header” part of the site and NOT move to the body…

Have you tried putting your <head> </head> tags inside of your PHP include file?

did not think about that… will have to check…will need to see the complications and how it might be rendered…