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...' ); 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 <gfkeogh@gmail.com> 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*