How to add Custom Font for Body Typography?

Store Design
1

We have a custom font from Google Fonts that we want to use for our body font on all blog posts and potentially all pages on our site. I’ve downloaded the folder from Google with all of the font files (.woff, .woff2, etc.).

I can’t find a good tutorial for how to do this for Brooklyn theme. Any ideas?

1 Like
2

Hi @IlluminateLabs

Here looks like a fairly new guide, looks very detailed to me

https://support.weareunderground.com/article/272-how-do-i-add-a-custom-font-to-my-theme

So looks like

  1. Paste the src links of your font files in your stylesheet CSS

  2. upload the files to your asset folder

  3. include a CSS element that links all the headings you want to target and apply the font family to those elements.

3

Hello, @IlluminateLabs

Thanks for post

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

4

@JohnFromJotting this only works for themes that company develops. I already read that tutorial and tried it and contacted them but it doesn’t work for shopify-developed themes.

5

@KetanKumar thanks for sending this over. Where do I get asset URL from? I simply downloaded the font files to my local device.

6

@IlluminateLabs

Yes, please flow above step

you can do it

7

@KetanKumar I’m asking what to input for “asset_url” This isn’t clear to me.