Add Google Fonts

A visitor only sees your fonts if the browser can download them. Google Fonts hosts hundreds of free, openly licensed families for the web. If you used a font in Figma that is not on Google Fonts, choose the closest Google Fonts match and update your Figma styles.

1. Find your fonts on fonts.google.com. For each family, click Get font. Select only the weights you designed with (for example Regular 400 and Bold 700). Every extra weight makes the page slower.

2. Click Get embed code and copy the <link> code.

   

3. Paste the code in the <head> of index.html, replacing the Google Fonts comment, above the link to styles.css:

   site/index.htmlCopy

   <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=Playfair+Display:wght@700&family=Source+Sans+3:wght@400;700&display=swap" rel="stylesheet">
   <link rel="stylesheet" href="css/styles.css">

   The preconnect lines start the connection to Google early, and display=swap shows a fallback font until yours loads, so text never stays invisible.

4. Set the font names in CSS. In styles.css, the font tokens at the top control every font on the site:

   site/css/styles.cssCopy

   --font-heading: 'Playfair Display', Georgia, serif;
   --font-body: 'Source Sans 3', Arial, sans-serif;

   The list after your font is the fallback stack: fonts to use if yours fails to load. End with a generic family: serif or sans-serif.

5. Save. Keep a copy of this code handy: you paste the same lines into each gallery page in step 4.1.

© Created by Sara Rosenstock, Marietta College Graphic Design.