New Google Fonts Variable Code | Scrimba | Page 1

deep meadow May 12, 2025, 6:50 AM

#

I'm confused on how to add with the renovation of Google fonts and variable fonts, etc. does anyone have a good video that they've seen that can help add Google fonts in the updated variable fonts format? Here are two examples. One for HTML and one for CSS. Totally confused because it's different than the video. Apologies for being a noob.
html
<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=Happy+Monkey&display=swap" rel="stylesheet">

css
.happy-monkey-regular {
font-family: "Happy Monkey", system-ui;
font-weight: 400;
font-style: normal;
}

inner moat May 12, 2025, 2:10 PM

#

Hi. Have you tried that code yet? Did the output match what you expected?

wanton niche May 14, 2025, 7:27 AM

#

Hi. Perhaps the selector you are using is not the correct one?

sterile herald May 18, 2025, 12:46 AM

#

Instead of .happy-monkey regular put the font family on your body and it will inherit down

body {
  font-family: “Happy Monkey”, system-ui;
   font-weight: 400;
}

And make sure the google font embed code is in the <head> of your html

<html>
<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=Happy+Monkey&display=swap" rel="stylesheet">
</head>
<body>
  <h1>This is my heading</h1>
</body>
</html>

#New Google Fonts Variable Code