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?