A little lost on updating fonts in the starter theme, here's what I did to my index.css

Hello, trying to change the fonts to the google font “Space Grotesk”

Here are the steps I took:

  • Created a “fonts” folder in assets.
  • Put the necessary .eot, .svg, .ttf, .woff, and .woff2 files in the fonts folder
  • Opened index.css
  • Removed lines 25 and 26

–font-family-sans: -apple-system, BlinkMacSystemFont, “Segoe UI”, Roboto, Helvetica, Arial, sans-serif, “Apple Color Emoji”, “Segoe UI Emoji”, “Segoe UI Symbol”;
–font-family-mono: “SFMono-Regular”, Consolas, “Liberation Mono”, Menlo, Courier, monospace;

  • Added the following code after the :root section and before the HTML section

/* space-grotesk-regular - latin /
@font-face {
font-family: ‘Space Grotesk’;
font-style: normal;
font-weight: 400;
src: url(’…/fonts/space-grotesk-v5-latin-regular.eot’); /
IE9 Compat Modes /
src: local(’’),
url(’…/fonts/space-grotesk-v5-latin-regular.eot?#iefix’) format(‘embedded-opentype’), /
IE6-IE8 /
url(’…/fonts/space-grotesk-v5-latin-regular.woff2’) format(‘woff2’), /
Super Modern Browsers /
url(’…/fonts/space-grotesk-v5-latin-regular.woff’) format(‘woff’), /
Modern Browsers /
url(’…/fonts/space-grotesk-v5-latin-regular.ttf’) format(‘truetype’), /
Safari, Android, iOS /
url(’…/fonts/space-grotesk-v5-latin-regular.svg#SpaceGrotesk’) format(‘svg’); /
Legacy iOS */

*Then I changed the the font-family in the HTML section to

font-family: ‘Space Grotesk’, Fallback, sans-serif;

This didn’t seem to do anything though.

Here’s a screenshot of the my current css file:

What did I screw up here?

Have you cleared your browser cache?