Fonts

Using Google Fonts

Integrating Google Fonts into your theme can enhance the typography and overall design of your store. One of the primary advantages of using Google Fonts is the extensive library they offer, allowing you to choose from hundreds of typefaces that can align perfectly with your brand identity. This variety enables a unique and visually appealing aesthetic for your store, which can significantly impact customer engagement.

The implementation of Google Fonts is also straightforward. You can easily add them to your theme by including small amount of code into Custom Liquid section, which making them accessible to all users.

However, it’s essential to consider the potential downsides of using Google Fonts. Loading these fonts can take longer than utilizing fonts from Shopify’s native library, which may impact your site’s performance. While Google Fonts are generally optimized, incorporating multiple font weights or styles can lead to increased loading times, which is a critical factor for maintaining a fast and efficient user experience.

Ultimately, the decision to use Google Fonts in your theme should be based on your design goals, performance considerations, and brand identity. If you find a Google Font that resonates with your vision, it can enhance your store's appearance and readability.

How to add Google Font into Theme

Find Fonts

You can use Google Fonts for headings, body text, or both. Select one or two fonts you like and add them to your basket. Then, go to the details page to locate the necessary code snippets. You'll be using the @import method for your Shopify theme.

Prepare the Code

Copy the URL lines from the Google Fonts code provided. Replace the URLs in our code below with the new Google Font URLs. Also, modify the font names to match those from Google Fonts, replacing any placeholder names in our code with the correct ones.

{% style %}
  @import url('https://fonts.googleapis.com/css2?family=Rubik+Wet+Paint&display=swap');
  @import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap');

  :root{
    --font-body-family: "Open Sans", sans-serif;
    --font-body-style: normal;
    --font-body-weight: 400;

    --font-heading-family: "Rubik Wet Paint", system-ui;
    --font-heading-style: normal;
    --font-heading-weight: 400;
  }
{% endstyle %}

Use the Code

Add a new Custom Liquid section to the Footer group in the theme, and paste your modified code into the Liquid field. (It’s important to place this section in the Footer group; otherwise, changes will only appear on the current template.)

Check Your Site

You might not see changes in the Shopify customizer (as it blocks outgoing requests), but once you save and preview your site outside of the customizer, you should see the new fonts displayed correctly.