Experiments reveal (for me) that you only need the @import statement, so in
my site global css file I have this to make 3 Google fonts available:
@import url('
https://fonts.googleapis.com/css2?family=PT+Sans&family=Roboto&family=Source+Code+Pro&display=swap'
);
The preconnect statements are optional for a performance boost and I'm not
sure why the link to googleapis is optional as well (it looks important).
*Greg*
On Thu, 29 Dec 2022 at 14:18, Greg Keogh <[email protected]> wrote:
> Folks (anyone working?!)
>
> I've finally decided there are some nice Google web fonts I'd like to use
> (there are far too many nearly identical ones to choose from). The docs
> recommend the following (blue) lines in the html of each page:
>
> <head>
> <link rel="preconnect" href="https://fonts.googleapis.com";>
> <link rel="preconnect" href="https://fonts.gstatic.com"; crossorigin>
> <link href="
> https://fonts.googleapis.com/css2?family=PT+Serif&display=swap";
> rel="stylesheet">
> <style>
> @import url('
> https://fonts.googleapis.com/css2?family=PT+Serif&display=swap');
> </style>
> </head>
>
> This is okay for one page, but how can I use a font in the hundreds of
> pages in a site? The problem is factoring out the common statements. The
> preconnect lines are optional and I think they can be ignored. The @import
> can be placed in a global link'd css file. But I don't think the link href
> to the font can be factored out and it would have to be inserted into
> hundreds of pages.
>
> Are there HTML5 boffins here who know of a trick or technique to simply
> apply a Google font globally with minimal editing?
>
> Cheers,
> *Greg K*
>
