Member Avatar for PhilEaton

The issue I'm having is that I need to add a second stylesheet to my web site. But I'd rather not update the 20+ HTML pages with a <link href="" /> code. Is there any way to link from the existing stylesheet to another? That way I only change one page? The second stylesheet is a font from Google Fonts. Any help would be great!

  • 3 Contributors
  • 4 Replies
  • 208 Views
  • 15 Hours Discussion Span
  • Latest Post Latest Post by PhilEaton

Dani AI

Generated

Short version: there are three practical ways to make a Google Font available site-wide without editing twenty HTML files. 's "copy/paste into the main stylesheet" works for ordinary rules but isn't ideal for a remote font stylesheet. pointed at importing from a central CSS file — that is the least-invasive single-file change, but it comes with performance caveats. The notes below explain how to implement each option correctly and what to watch for.

Place the font import at the very top of the primary stylesheet (before any rules). Example using the Google Fonts CSS2 API:

/* must be the first lines in the main stylesheet */
@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;700&display=swap");

body { font-family: "Open Sans", Arial, sans-serif; }

Preferred practice for best performance is to include the font stylesheet in the HTML HEAD (via a link) and add a preconnect for the font host. That requires changing the shared header/template (one file) rather than every page:

<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;700&display=swap" rel="stylesheet">

Troubleshooting and cautions: an @import entry must be the first thing in the CSS to take effect. @import delays the font request until after the CSS file is fetched, so the HEAD <link> method usually loads faster and avoids layout flashes. Add &display=swap (as shown) to reduce FOIT. If the font still doesn't apply, check the browser devtools network requests, confirm the exact font-family name shown on Google Fonts, clear caches, and ensure any Content-Security-Policy allows fonts.googleapis.com/fonts.gstatic.com. If the site uses server-side includes or a CMS header/footer file, updating that single include is the best long-term solution.

Recommended Answers

All 4 Replies

Member Avatar for JorgeM

Can you just edit the original CSS page and just copy/paste the styles from the new sheet?

Member Avatar for PhilEaton

I have no idea how to do that because it is a font library from google fonts. Its kind of like a server-side javascript library, but server-side font library so I can use fonts that might not exist client side.

Member Avatar for PhilEaton

Great! Thanks so much!

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.