Fonts

IMPORTANT

Ensure you have the correct license for your font, including permission to use it on a commercial website.

WARNING

The font files must include WOFF and WOFF2 formats. Other formats like EOT, TTF, and OTF are not supported for Webfonts.

Custom Fonts - Self-hosted

Step ① - upload the font

From your Shopify admin, go to Content → Files.
Click Upload files
Select up to 20 files to upload.
Each file can be up to 20 MB in size.
Click Open to upload the files.
To get the file URL, hover over the file, click the , then click Copy link

Step ② - prepare your font

From your Shopify admin, go to Online Store → Themes
Click ••• → Edit code
Search for global-fonts.liquid and open the file.
Use OpenThinking's @font-face generator to create the necessary code for your font.
Copy the generated code and paste it into the global-fonts.liquid file.
Click Save when finished.

Step ③ - load the font into your theme

From your Shopify admin, go to Online Store → Themes
Click Edit theme
In the left panel, go to Theme settings → Typography
Enable custom fonts by toggling Enable custom fonts.
You're done! 🎉

External services

If instead of a self-hosted font, you want to use an external service like Google Fonts or TypeKit (Adobe Fonts), you can do so by adding the embed code to your OpenThinking Shopify theme.

From your Shopify admin, go to Online Store → Themes
Click ••• → Edit code
Open the global-fonts.liquid file.

Choose your provider:

To add Google Fonts to your Bullet theme, paste the embed code you've got, inside the file, e.g. Roboto

html

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">

Below that, add this style block to define your theme fonts:
html
```
<style>
:root {
 --fontFamily: "Inter"; /* main font */
 --hFontFamily: "Inter"; /* heading font */
 --logoFontFamily: "Inter"!important; /* logo font */
}
</style>
```
NOTE
Replace "Inter" with the font name you're using. (e.g. "Roboto")
NOTE
To apply the font only to the main body text, remove:
css
```
--hFontFamily: "Inter";
--logoFontFamily: "Inter"!important;
```
To apply it only to headings, remove the other entries and keep:
css
```
--hFontFamily: "Inter";
```
NOTE
To use different fonts for each location (body, heading, logo), add multiple fonts from your embed provider (google, adobe etc.) and update each line with the correct font name.
Click Save

Fonts ​

Custom Fonts - Self-hosted ​

Step ① - upload the font ​

Step ② - prepare your font ​