Adding a Google Font the right way

Hi,

We are looking to add a Google Font that is unavailable on Builder and we don’t want to download the font and upload it to builder since it’s a hosted Google font anyway. We have seen some posts that vaguely talk about a that it would just work and show up in Builder.

What are the specifics to achieving this?

Here is the font we are try to get into Builder’s font menu

Hi John,

Thanks for contacting Builder Support. I hope you’re doing well.

We currently offer a limited selection of Google Fonts in Builder, but not all of them. So, either you can add/upload the font using this article or by using the Google Fonts API.

Note: Any fonts already installed in your Shopify theme or site’s CSS automatically work with Builder and Builder Theme Studio–you do not need to add them separately.

​If you still have any concerns or questions, please do reach out to us. Thank you

Hi Manish,

Thank you for the info. We are still confused site’s CSS fonts are supposed to show up in the font selector. Also, should we add those fonts to our main site or to our builder CSS code? Does it matter where the CSS fonts are added?

1 Like

Hi @jayshay

Fonts added via CSS don’t appear in the typography chooser. Instead, that method would work like any other CSS code. For example, you can use your site’s style sheet to declare all tags with a class as DM Serif Display (this can be wherever you set your global styles). Then, place a text box on the page and add the CSS class at the bottom of the Style tab.

We’d recommend uploading the font file to Builder if you aren’t already downloading the font somewhere else in your app. :raised_hands:

Thanks,
~Logan from Builder.io

hi @logan Thanks for the clarification!