How To Custom Fonts To The Font_Picker On Shopify Store?

Shopify adds a custom font to the font_picker is user-friendly interface lets you personalize your store's typography.

For Developers, we'll walk you through integrating the font_picker into your theme's settings file, granting store administrators complete control over typography. No time to code? No problem! We'll also guide you through using a third-party app to add custom fonts without code.

Let's find out!

What Is Font-Picker Mean On Shopify?

Previously, adding fonts required developers to manually specify each option in the theme. Now, the new "font_picker" setting simplifies this process by generating a dynamic interface where store owners can browse and select fonts directly from Shopify's library. This gets rid of the need to configure things by hand and makes it easier for store owners to change how their store looks and feels.

This library includes free fonts from Google Fonts, licensed fonts from Monotype, and even web-safe fonts.  

Check out these articles to learn more about the font_picker:

• Font_picker.
• Browse available fonts.

How To Implement The Font_Picker Into The Settings.Schema File?

In this guide, we'll walk you through implementing the font picker into your theme's settings.schema.json file. This will allow your store's administrators to customize the typography to their liking easily.

However, if you don't have much time and don't like coding, scroll down and refer to our "How To Add Custom Font To Shopify Store? (Without Code)" section below.

Step 1: Set Up With Font_Picker

To use font_picker, you need to add a setting to your theme's settings_schema.json file. This setting defines where the font_picker will appear in the theme editor.

Here’s a basic format:

Here's our example:

In this example, we've added a Font Picker setting for the heading font. The id references the setting in your theme's code. The label is the name that will appear in the theme editor. The default sets the initial font choice.

We strongly advise that developers create a font_picker with a different ID to avoid setting_data.json values conflicting with the settings. That way, there won't be any problems when you update themes. In this case, we were using the ID header_font_new.

The usual setting does what you'd expect it to do, which is to load a basic font. Any font in the library can be used; We just used "work_sans_n6" for this. Bear in mind that the correct naming format must be used. The Shopify font library has a list of possible options that writers can use.

Step 2: Select Your Font On Shopify Theme Editor

When the type is set, font_picker creates a font picker field filled with fonts from the Shopify font library. In this case, the Shopify theme editor is where we can find the Work Sans font.

An example of output after setting the type font_picker.

We can set the scale's values with the min, max, and step settings. The unit setting, in this case, pixels, tells the scale what unit to use for measurements. The Shopify help pages go into more depth about how to use the range value.

Once you've added this setting, you can easily select a font for their headings. They'll see a dropdown menu with all the available options from Shopify's library.

Step 3: Changing How Your Font Looks 

Once you've added the Font Picker setting to your theme, you'll need to connect it to the actual font styles in your theme's code (stylesheet). This lets the theme display the chosen font.

We recommend you read the detailed instructions for this step in Shopify's article on using Shopify's new font_picker settings.

How To Add Custom Font To Shopify Store? (Without Code)

We already said that the font_picker can only be used with free fonts from Google Fonts, licensed fonts from Monotype, and web-safe fonts. If you need to use your own custom fonts, we recommend using the Fontify Google & Custom Fonts app, a paid version that costs only $3/month.

Here are three simple steps to use the Fontify app to add custom fonts to your Shopify store:

Step 1: Install the "Fontify Google & Custom Fonts" app from the Shopify App Store.

Before using the $3 monthly premium plan, you should try our guide to changing fonts from Google Fonts with the Fontify app.

Step 2: After upgrading to the premium plan, select the "Upload" tab and upload your font file. The Fontify app accepts .ttf, .otf, and .woff formats.

Step 3 (Optional): After downloading the font file, scroll downto customize elements, and custom stylesheets with Fontify.

We have deep-in instructions:

Tips For Add Custom Fonts To Shopify Store

In this section, we'll guide you through the process of choosing the best font format for your theme and how to ensure it works seamlessly across different browsers and devices.

Preparing Font Files Format

Although you don't have to be a web developer to design for the web, you need some technical skills.

• WOFF is the top choice for most modern browsers. It's fast and efficient.
• TTF and OTF are older formats that might still be needed for some older browsers.
• SVG is mostly used for design applications and isn't ideal for web fonts.
• EOT is an old format that's rarely used today.

To begin, the font style you choose and use during the creation process will depend on the platforms your users use. WOFF has the best speed and access for current platforms. However, other platforms may need you to embed an OTF or TTF font if they don't support it. Both methods might be needed for some plans.

The SVG font file is neither old nor new, so it's best left to design-only programs. Some older computers still support it, but most newer ones have stopped and switched to WOFF.

You might use an EOT font if you're making a website for people who use Internet Explorer, but this is becoming less likely. For faster speed, though, using a system font is better.

Quality Assurance Testing Font

When using Shopify's font library, it's important to include bold, italic, and bold-italic versions of each font. This ensures that your text looks consistent across different browsers and devices.

If your theme uses a rich text editor (like the one for blog posts or product descriptions), users can make text bold, italic, or both.

Finding out which font weight is being shown in Firefox's font tools is one of the best ways to make sure that the real weights are being loaded. The Fonts view displays all of the font settings used by the chosen element when you use the Firefox dev tools to investigate an element on the page.

The fonts tab dashboard in Firefox's font tool.

If you use another website browser, refer to our article: What kind of font does Shopify use?

FAQs

Can I Use Google Fonts As Custom Fonts In Shopify?

Yes, you can use Google Fonts as custom fonts in your Shopify theme. You should use the instructions we've covered in this article to add custom fonts to your store.

Can I Use Custom Fonts With Shopify’s Free Themes?

Yes, you can use custom fonts with Shopify's free themes. While free themes may have limitations compared to premium themes, they generally allow you to customize fonts.

Will Add A Custom Font Slow Down My Shopify Store?

Yes, adding a custom font to your Shopify store can potentially slow it down. The browser needs to download and render the font file, which can add extra load time.  

That's why we recommend you use optimized formats like WOFF or WOFF2, which can help reduce loading times.

Key Takeaway

By following our steps outlined in this article, you can effectively customize the fonts used in your Shopify store through the font_picker. This allows you to create a unique and visually appealing shopping experience for your customers.

Want to find out more about customizing your Shopify store? Check out our blog for more tutorials and tips.