Custom fonts

Implementing custom web fonts

Shopify has a large library of fonts which are available by default in our themes. Using one of these is the preferred and easiest way to customize your font! View available fonts here.

Custom fonts can be provided by a service, like Google Fonts or Adobe Fonts (previously Typekit), or by uploading the font to your files or an external server.

Both methods require some additional configuration, but we’ve made it all as easy/straightforward as we can!

Custom fonts via a font service

1. Enter the code from your font provider, e.g. Google Fonts or Adobe Fonts (previously Typekit);
2. Copy/paste the full font-family value into the field/setting for the text type you'd like to use this custom font.

The font-family value will be shown by your font provider and should follow the format of: font-family: 'family-name', serif;

Via Adobe Fonts

Adobe Fonts (previously Typekit) work very similarly to Google Fonts but have a few different steps/concepts — check out the Adobe Fonts docs to fill in any questions you have about creating web projects.

Note: that sometimes Adobe/Typekit can take a few minutes to publish/update your web project. If you're not seeing your custom font — and you're sure it's set up correctly — refresh the page in a few minutes and it should start rendering correctly.

Multiple services at once

You can also use both services if you need to! But again, make sure you're not making your users download too much font — users will need to download your custom fonts, which can get heavy! Page speed is critical to maximizing conversions.

Custom hosted fonts via a font provider

Custom hosted fonts must be provided in .woff or .woff2 file format. At least one type must be provided; you may provide both for better browser support.

WOFF files will be provided by your font foundry, or you can convert standard desktop fonts using a webfont generator. We can recommend the FontSquirrel Webfont Generator service to convert our font files into WOFF and WOFF2 format. Fonts must be appropriately licensed for use!

1. Create or download a WOFF or WOFF2 file format.
2. In the Shopify admin, upload to your store's Content > Files.
3. Copy url for each font and enter into the WOFF font url and/or WOFF2 font url field.
4. Enter the name of your hosted font into the Hosted font name field. This must be one word, but you can use hyphens or underscores, e.g. custom-font-name, or custom_font_name
5. Add the font-family family to whichever type of text you'd like to use this custom font. The format should be written as: font-family: 'family-name', serif;

Why use a custom font?

Integrating custom web fonts into your website is an effective way to enhance its visual appeal and establish a unique brand identity. By carefully selecting fonts, following best practices, and ensuring compatibility and readability, you can create a captivating and memorable web experience for your visitors.

Embrace the power of custom web fonts, and let your website's typography speak volumes about your brand.

Branding

Custom fonts can reinforce your brand identity, evoke specific emotions, and establish a consistent visual language across your website.

Differentiation

By choosing unique fonts, you can set your website apart from competitors, enhancing its visual appeal and creating a memorable experience for visitors.

Readability

Carefully selected custom fonts can enhance the readability of your website's content, ensuring that visitors can easily consume information and navigate through your pages.

Choosing the right custom web font

When selecting a custom web font, keep the following considerations in mind:

Readability

Prioritize legibility over style. Opt for fonts that are easy to read, even at different sizes and on various devices.

Compatibility

Ensure that the chosen font is compatible across different web browsers and devices to guarantee a consistent experience for all visitors.

Brand alignment

Select a font that aligns with your brand's personality and message. Consider the emotions and associations the font evokes.

Web font services

Use reputable web font services like Google Fonts, Adobe Fonts, or Typekit, which provide an extensive collection of fonts and easy integration options.

Best practices for custom web fonts

Consider the following best practices to make the most of your custom web fonts:

Limited selection

Limit your use of custom web fonts to a few key styles. Using too many fonts can lead to visual clutter and diminish the overall cohesiveness of your design.

Fallback options

Always provide fallback options by specifying generic font families in case the custom web font fails to load. This ensures that visitors can still read the content.

Performance optimization

Optimize the font files to reduce their size without sacrificing quality. Minify CSS files and leverage caching techniques to improve performance.

Accessibility

Ensure that the custom web font meets accessibility standards. Consider factors like contrast, text scaling, and alternative text for icons or logos.

Align theme