[{"value":"Add Google Fonts to a theme","id":"vUsQ2","hLevel":2,"level":1,"children":[{"value":"Add via the visual editor","id":"J5xDv","hLevel":3,"level":2},{"value":"Add via embed code","id":"NQhKG","hLevel":3,"level":2}]},{"value":"Add custom fonts to a theme","id":"L68fi","hLevel":2,"level":1,"children":[{"value":"Reference font files from a third-party hosting platform","id":"uqQd9","hLevel":3,"level":2},{"value":"Upload font files to the theme's public directory","id":"oQkja","hLevel":3,"level":2}]}]

Add fonts to a theme

You can add fonts to a theme in the following two ways:

Use Google Fonts.
Use custom fonts.

Tip: Fonts are standalone resource files. The browser prioritizes downloading these files when a page is accessed, which can block the rendering of other page content. Therefore, choose fonts carefully and ensure that the font file sizes are suitable for your website.

Add Google Fonts to a theme

SHOPLINE themes use the Google Fonts library by default, offering a wide range of fonts in various styles that can adapt to different design aesthetics, thus providing users with an attractive and comfortable visual experience.

The following shows two ways of adding Google Fonts to a theme.

Add via the visual editor

In the global settings of the theme editor, find the Typography setting and click Change.
Select the name of the desired font, and click Done.

Add via embed code

To add fonts using embed code, follow these steps:

Step 1: Get the Google Fonts embed code

Go to the Google Fonts website. Search for and select the font you want.
Click the Get Font button.
Click the Get embed code button.
Copy the embed code block.

Step 2: Add the embed code to the theme

Insert the code block in the <head> tag of the theme layout file layout/theme.html, as shown in the following:

<!DOCTYPE html>
<html>
  <head>
    ...
    {{#content "header" /}}
    <!-- New font code block -->
    <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=Big+Shoulders+Stencil:opsz,wght@10..72,100..900&display=swap" rel="stylesheet">
  </head>
  <body>
    ...
  </body>
</html>

Use the font in your theme code. The following is an example of applying the Big Shoulders Stencil font to an h2 heading in a custom HTML section.

/* sections/custom-html/custom-html.css */
.custom-html {
  background-color: rgb(var(--color-background));
}
/* Font reference */
.custom-html h2 {
  font-family: "Big Shoulders Stencil", sans-serif;
}

Step 3: Check the font effect

The effect before applying the Big Shoulders Stencil font:

The effect after applying the Big Shoulders Stencil font:

Tip: Refer to the official website for more detailed information on using Google Fonts.

Add custom fonts to a theme

Integrating custom fonts into your design can contribute to building a strong brand image, enhancing visual appeal, and improving user experience. These elements collectively help distinguish your product in a competitive market.

The following are two methods to incorporate custom fonts.

Reference font files from a third-party hosting platform

Typically, if your font files are hosted on a third-party platform, they provide a font reference code block to easily add to your theme. The following is an example of referencing font files in a theme layout file:

<!-- layout/theme.html -->
<!DOCTYPE html>
<html>
  <head>
    ...
    {{#content "header" /}}
    <!-- 
      Code block provided by the third-party hosting platform
      {{<font-url}}: URL of the remote font file
    -->
    <link href="{{font-url}}" rel="stylesheet">
  </head>
  <body>
    ...
  </body>
</html>

Upload font files to the theme's `public` directory

You can upload your font files to the theme's static resource directory (public) through the following methods:

Upload the theme zip package via the SHOPLINE Admin.
Push the theme to your store using the SHOPLINE CLI.
Upload the font files via the theme code editor.

Suppose you have a font file named my-font.woff, uploaded to the theme in a directory structure like this:

public
└── fonts
    └── my-font.woff

Then, create an @font-face rule for this font to use it anywhere in the theme:

<!-- layout/theme.html -->
<!DOCTYPE html>
<html>
  <head>
    ...
    {{#content "header" /}}
    <!-- New @font-face rule -->
    <style>
      @font-face {
        font-family: 'My Font';
        src: url("{{`fonts/my-font.woff` | asset_url()}}") format('woff');
      }
    </style>
  </head>
  <body>
    ...
  </body>
</html>

Note: Use the asset_url filter to reference the font file, which returns the remote URL of the font file.

Was this article helpful to you?

SHOPLINE

Legal

Add fonts to a theme​

Add Google Fonts to a theme​

Add via the visual editor​

Add via embed code​

Step 1: Get the Google Fonts embed code​

Step 2: Add the embed code to the theme​

Step 3: Check the font effect​

Add custom fonts to a theme​

Reference font files from a third-party hosting platform​

Upload font files to the theme's public directory​