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 typography. In 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 Loftie is all about comfort and whimsy, so we chose a font that is decorative and stands out:
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
A 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!
H&FJ
Klim Type Foundry (a favorite)
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 StoreOption 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.
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