React Router > Adding Google Fonts to React Project

Adding Google Fonts

Here we're adding Google Fonts through the @import url CSS rule. We found this font through Google Fonts. When you've found the font you like on Google Fonts, click "select" on the font, and then in the sidebar, choose @import. Once you've pasted the import rule like we have it in styles.css (shown in the editor to the right), you can then define the font-family on the body of the document as we are doing here. Now, all the fonts are rendered with our new font family. Hurray! Note: In our special editor, you can't paste in external files in the index.html doc, so that's why we opted to go with this approach instead of adding a link tag.

Lesson 6/26

@import url('https://fonts.googleapis.com/css2?family=Josefin+Sans:wght@300;400&display=swap');

body {
  margin: 0;
  font-family: "Josefin Sans", sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background-color: #f8f8f8;
  font-size: 18px;
}

h1 {
  font-size: 1.5rem;
}

Open Sandbox