Can you Change Fonts on Shopify? A Guide

Typography is the art or process of setting and arranging typefaces to stylize the appearance of a product. A font is another word for typeface. Whether you're in the process of designing a magazine, brand identity, or eCommerce website, a distinct font can help define and express your brand voice. Creating a unique expression through type when communicating online is extremely powerful. Choosing the perfect typeface/font can be a big asset for brands to stand out, and it enables them to use a unique voice in their visual communication. According to Information Architect, 95% of web design is actually typographyIn this article, we will go through directions on how to add a custom font to your Shopify store, how to choose a custom font, as well as our favorite resources for discovering fonts for your brand. It's truly a treasure-trove. If you are a novice designer, when choosing a font, we suggest following your intuition to know which font will create the right vibe for your Shopify Plus website.

How to choose a font for your Shopify store

Fonts express emotions and ideas. For example, if your brand identity is fun and colorful, it goes without saying that your web design would have a lot of bright colors and patterns. Another inclusion to the design could be to include a serif font or a decorative font. This portrays your brand as cheerful and fun as opposed to a serif font that may seem out of place. If your brand image is about simplicity and elegance, like our client Sporty & Rich, a contemporary yet classic font like Futura is a good fit. Our client Cult Gaia is all about fantasy and whimsy, so we chose a font that is decorative and stands out: 

cult gaia web design

Here's a list of our favorite typography online resources:

Typographica: a review of typefaces and type books, with occasional commentary on fonts and typographic design.

https://typographica.org

Site Inspire: Siteinspire is a showcase of the finest web and interactive design. Updated everyday.

https://www.siteinspire.com

Fonts in Use: Fonts In Use is a public archive of typography indexed by typeface, format, industry, and period. Supported by examples contributed by the public, they document and examine graphic design with the goal of improving typographic literacy and appreciation. Designers use the site for project research, type selection and pairing, and discovering new ways to choose and use fonts. Updated everyday.

https://fontsinuse.com

Awwwards: recognize and promote the talent and effort of the best developers, designers and web agencies in the world. Updated everyday.

https://www.awwwards.com

The Dieline: Dieline is a blog that exists to serve the packaging community. Their mission is to build a global community of designers and showcase creativity and innovation.

https://thedieline.com

Typewolf: Typewolf is an independent typography resource created by Jeremiah Shoaf. Everyday, he highlights type-driven websites and brand identities.

https://www.typewolf.com

The Brand Identity: A website that is a resource for graphic designers and agencies, highlighting the thought process behind new brand identities.

the-brandidentity.com

Barrel NY: A blog that highlights features from leading D2C brands. Learn more about ecommerce website design and UX.

https://www.barrelny.com/dtc-patterns

Under Consideration: Chronicling and providing opinions on corporate and brand identity work. They cover redesigns and new designs of notable products and companies. We especially love their reviews on logo redesigns.

https://www.underconsideration.com/brandnew/archives/complete

Great Type Foundries to Explore 

type foundry is a company that designs or distributes typefaces, and are top professionals in the industry who specialize in the design and creation of typefaces. At Exhibea, we wanted to highlight our favorite independent font foundries who continue to produce wonderful work on their own. Bring on the inspiration!

type foundries shopify

H&FJ

Commercial Type

Klim Type Foundry (a favorite)

House Industries

Okay Type

Josh Darden

Mark Simonson

Hannes Von Döhren

Type Together

Mark Von Bronkhorst

Ale Paul

Underware

Process Type Foundry

Feliciano type (a favorite)

Future Fonts (a favorite for unique and new fonts)

Colophon Foundry (a favorite)

How to Upload Custom Fonts to your Shopify Store

Please note: you may need the help of a Shopify Partner to add custom fonts to your Shopify Store

Option 1: Choose a font from Shopify's Font Library

Shopify's font library is a collection of fonts that includes system fonts and a selection of Google fonts. These fonts are free to use on all Shopify online stores. To learn more about using Shopify’s font library, refer to Add Shopify fonts to your theme. For variety, we recommend you choose different fonts for the Heading and Body.

choose fonts shopify

Option 2. Upload a custom font

If you want to use a font that's not included in Shopify's font library, then you can upload custom fonts into your theme file.
Step 1: Convert your font file (.ttf) to woff2 and woff using a tool. We like to use transfonter.org
Step 2: Unzip the file. Upload the woff2 and woff file to the Assets section of your theme file (Upload the font files to the assets directory
Step 3:
Create a @font-face CSS rule so that you can reference the font. Use the asset_url filter to output the URL for the font file: Tip: This can be added to your css-variables file (most Shopify themes are using this) or your .css file.

 

Step 4:
In your main style CSS file, reference the chosen font to set any specific CSS stylings, such as font-family, font-weight, and font-style. You may need a developer for help with this step.

Learn more here: https://shopify.dev/themes/architecture/settings/fonts#shopify-font-library

We hope this article was useful to you! Choosing fonts is one of our favorite aspects of our Shopify projects, so enjoy the process. If you want to add custom fonts or need help deciding which font is the one for you, reach out to our team.

Looking to build or redesign your Shopify Plus Website? Check out the Exhibea Website.


Leave a comment

Please note, comments must be approved before they are published


Contact us

Tell us about your project and we will get back you within 1 working day.