Use Custom Font in Theme Editor Typography

Store Design

Topic summary

Main issue: A merchant wants their uploaded custom font to appear in the Flow theme’s Typography picker and be applied to headings/body/buttons. Uploading files to Assets and adding custom.css did not make the font show in the Theme Editor settings.

Proposed solution (CSS-based): One responder states it isn’t possible to display custom fonts in the theme’s Typography settings. Instead, upload font files (TTF/OTF/WOFF/WOFF2/SVG) to Assets, add an @font-face rule in theme.scss.liquid (Shopify’s stylesheet), then assign that font-family to headings/body/button selectors. A code snippet was provided illustrating the @font-face syntax (CSS rule that defines a downloadable font).

Alternative guidance: Another participant linked a YouTube tutorial showing how to add custom fonts to Shopify font settings, suggesting it may be possible to expose the font in Theme Editor controls via configuration.

Status: No confirmed resolution. There’s a discrepancy between “not possible in settings, use CSS” versus “possible via settings with a tutorial.” Key open question: whether Flow can natively expose the custom font in its Typography picker without theme configuration changes. Attachments central to understanding: a CSS code snippet and a video link.

Summarized with AI on December 12. AI used: gpt-5.
1

Hello,

I’m trying to use the custom font I’ve uploaded in the theme editor but it’s not showing up in the typography section. I’ve uploaded my fonts to the Assets folder and I’ve added code to my custom.css but the font is not showing in the Typography section on the Flow theme editor. I think I have to do this manually…can anyone provide instructions on how to do so? I’d like to be able to change the headings and body font to my custom font. Any help is appreciated!

1 Like
2

@kferguson1

sorry for that issue also its not possible to show custom font in theme setting its your add individua style

3

Hi thanks for your reply. So how can I use custom fonts on my website?

4

Can you help me with instructions on how to use my custom font for the header, body, and button text of my fonts?

5

Hi…do you think you could help me change the font for my header and body font to my custom font? I need help as soon as possible please!!!

1 Like
6

@kferguson1

Yes, please try

Yes, you can do easy to upload your custom font

  1. Go to Online Store->Theme->Edit code
    2.Asset->/theme.scss.liquid->upload your custom font all font tyep = TTF, OTF, WOFF, WOFF2, SVG
  2. Asset->/theme.scss.liquid->paste below code at the bottom of the file.
@font-face {
font-family: 'Montserrat-Regular';
src: url('{{ 'Montserrat-Regular.eot?' | asset_url }}');
src: url('{{ 'Montserrat-Regular.eot??#iefix' | asset_url }}') format('embedded-opentype'),
url('{{ 'Montserrat-Regular.woff' | asset_url }}') format('woff'),
url('{{ 'Montserrat-Regular.ttf' | asset_url }}') format('truetype'),
url('{{ 'Montserrat-Regular.svg#Montserrat-Regular' | asset_url }}') format('svg');
font-weight: normal;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: antialiased;
}

can you please just change font name, for example, Montserrat-Regular to your custom font name

7

Hi @kferguson1 ,

Please refer the video below how you can add custom fonts in Shopify font settings.