All Collections
Web Store
Connecting Google Fonts to Ricochet
Connecting Google Fonts to Ricochet

How to connect and use Google Fonts with the Ricochet Web Store

Britton Hennessy avatar
Written by Britton Hennessy
Updated over a week ago

Google Fonts is a free application that expands your website's ability to load a series of any fonts from a massive collection of over 10,000 typefaces.

Your font options can dramatically change the way your brand is perceived and can help you establish a style online that perfectly matches the personality you want your store to represent.

Google Fonts Best Practices

While it's really easy to get carried away with fonts, every single typeface you add to your website can dramatically increase loading time, and therefore reduce your SEO score.

Google loves websites that load extremely quickly, especially from a mobile device.

Because of this, it's always a good idea to load as few custom fonts as possible.

We recommend that you include up to 2 fonts each with 2 weights (how thick they are) at the absolute most!

A great way to do this is to pick one good display font and one good paragraph font. You can do this effectively by using the pre-built filters within Google Fonts.

If you do end up selecting a lot of fonts, you might find that your website begins to load slowly and your number of users and checkouts decrease.

To Get Started, First Go To fonts.google.com.

  1. Search and sort for the fonts you would like to install on your website. You can use the various filters and options to help you find the style you're looking for.

  2. Click into a specific font and add any desired weights by clicking the + Select This Style link to the right.

  3. As you do this, Google will populate a column on the right which shows the fonts you have elected to install.

  4. Click the "Embed" option in the upper right-hand corner.

  5. In the first gray box, starting with the word <link, copy all of that text.

  6. Navigate back to Ricochet and go to the designer in Web Store > Design

  7. At the bottom is a section titled "Custom Font." Past the link you copied from Google Fonts into that field.

  8. Refresh the page.

  9. Now any font dropdowns in the Web Store designer will include the custom fonts you embedded with Google fonts.

If you want to add more or change your fonts later, just follow the steps again and update the link in the designer. Any old fonts you used will default back to their original state.

Did this answer your question?