Fonts

You can add fonts to your theme in the following ways:

• Use fonts from Shoplazza’s font library
• Use custom fonts

📘

Tip

In general, fonts are a separate resource that need to be downloaded by the browser before any text is rendered, which impacts a store's overall performance. To make the theme more performant, system fonts that are already installed on the customers computer can be used by merchants that choose fonts from the System fonts category of the Shoplazza font library.

System fonts

System fonts are fonts that are already installed on a user’s computer. This removes the need for browsers to download the font before rendering text and makes the theme more performant. System fonts are listed with the available fonts, noted with a system badge, and will show under the System fonts category in the theme editor font picker.

If you choose to use system fonts, then the font that’s used to render text will depend on the user’s operating system. There are two generic system font types. The following are examples of fonts within those types:

• sans-serif: BlinkMacSystemFont, Segoe UI, Roboto, Ubuntu, and Helvetica Neue.
• serif: Iowan Old Style, Apple Garamond, Baskerville, Times New Roman, Droid Serif, Times, and Source Serif Pro.

Custom fonts

If you want to use a font not included in Shoplazza's font library you can use fonts from third-party solutions like Google fonts.

With most third-party font solutions, you have the following options for including the font in your theme:

• Reference the font through the third-party's hosting
• Upload the font files to your theme

If you include custom fonts in your theme and want to provide merchants with the ability to choose the font, then you need to create a setting for the selection, such as a select setting. You can then reference the setting value in your CSS when defining which font to use for the associated elements.

Third-party hosted fonts

If a font is hosted with a third party, then they'll usually provide the <link> tag to include the font in your theme:

<link rel="stylesheet" href="[font-style-url]">

📘

Tip

The <link> tag is often included in theme.liquid, or your chosen layout file.

Host fonts in your theme

If you have your own font files, then follow these steps to include the font in your theme:

Non-admin

If you're planning on pushing your theme to a store using Shoplazza CLI, uploading a theme ZIP file, using distributing the font with a theme through the Shoplazza Theme Store, then you should store the font in the assets folder of the theme. These steps should be performed in a local code editor, not the admin code editor.

1. Add the font files to the assets directory.
2. Create a @font-face CSS rule so that you can reference the font. Use the shoplaza_asset_url filter to output the URL for the font file:

@font-face {
  font-family: "Font name";
  src: url("{{ '[font-file-name]' | shoplaza_asset_url }}") format("[font-format]");
}

Add Shoplazza fonts to your theme

The following outlines how to use fonts from the Shoplazza font library in your theme:

• Add a font_picker type setting to allow merchants to choose their font in the theme editor. The value of this setting is returned as a font object.
• Use one of the following font filters to load the chosen font:
  • Use the font_face filter to insert the default @font-face declaration.
  • Use the font_url filter to access a CDN URL, so that you can create a custom @font-face declaration.
• Reference the chosen font to set any specific CSS stylings, such as font-family, font-weight, and font-style.

Available fonts

The following fonts are free to use on all Shoplazza online stores: