Question 421718 in Html Question posted in
Some basic documentation can be found here.

Html – CSS font @import declaration

I’m running into an issue with a CSS font @import. The following works (font gets rendered as expected):

*, *::before, *::after {
    margin: 0;
    padding: 0;
}

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600&family=Unbounded:wght@400;500;600&display=swap');

h1, h2, h3, h4, h5, h6 {
    font-family: 'Unbounded', cursive;
}

If I do any of this:

  • move the @import to the top of the file
  • move the import into the html <head> section
  • delete the *, *::before, *::after block

the font doesn’t render any longer.

Example: https://codepen.io/xyzuser/pen/raBvRjK

My goal is to move the import into the <head> section. What’s the recommended way to fix this issue?

Tags:

2

Answers


  1. 0

    This is Google’s recommended embed code for the <head> section for the pair of fonts you’re using:

    <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=Space+Grotesk:[email protected]&family=Unbounded:[email protected]&display=swap" rel="stylesheet">

    Put that code into a snippet and it works just fine.

    enter image description here

    .space-grotesk {
  font-family: 'Space Grotesk';
}

.unbounded {
  font-family: Unbounded;
}
    <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=Space+Grotesk:[email protected]&family=Unbounded:[email protected]&display=swap" rel="stylesheet">

<h1 class="space-grotesk">Space Grotesk</h1>
<h1 class="unbounded">Unbounded</h1>
    Login or Signup to reply.
  2. 0

    In CSS, @import rules must appear at the very top of your stylesheet, before any other style rules, including universal selectors like *. This is part of the CSS specification. If the @import is not at the top, it may be ignored, and your font won’t load.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search