Brickspace Lab

We do not provide support for code customizations

If you are not comfortable making code changes, we highly recommend <a href="https://intercom.help/brickspacelab/en/articles/8118269-hiring-shopify-developers" rel="nofollow noopener noreferrer" target="_blank">hiring an expert developer.</a>

___________________________________________________________

💡 Tip: Duplicate your theme before making code changes. This will ensure you have a backup to revert to if needed.

We rely on <a href="https://www.shopify.ca/partners/blog/font-picker" target="_blank" rel="nofollow noopener noreferrer">Shopify's Font Picker</a> to provide a font selection for your store. To access these settings go to Theme settings &gt; Typography.

Installing a font not available in the default selection will involve making some code customizations.

- Please ensure you have a valid license to use the font you are trying to install
- Download your font in webfont file types such as <code>.woff2</code> or <code>.woff</code>
- If you don't have a webfont version of your font, you can use a generator to convert it. Font Squirrel has <a href="https://www.fontsquirrel.com/tools/webfont-generator" target="_blank" rel="nofollow noopener noreferrer">a tool you can use</a> for this.

- Once you have your webfont files you can upload them to your Shopify admin.

1. Open your Shopify adding and navigate to Content &gt; Files
2. Upload each file for your font

1. Open up the theme editor and select <code>theme__styles.liquid</code> from within the snippets folder
2. Add the below code after the <code>{% style %}</code> tag. Be sure to replace <code>MY_FONT</code> with your font name and ensure the URLs are correctly linking to your uploaded font.
 @font-face { font-family: "MY_FONT"; src: url('{{ "MY_FONT.woff2" | file_url }}') format("woff2"), url('{{ "MY_FONT.woff" | file_url }}') format("woff"); }
3. From here you can include your font by updating the below code inside the same file. The variables <code>--type-font-body-family</code> , <code>--type-font-header-family</code> and <code>--type-font-nav-family</code> control the font family used for body, headings and navigation text.
 --type-font-body-family: {{ settings.type_font_body.family }}, {{ settings.type_font_body.fallback_families }}; --type-font-body-style: {{ settings.type_font_body.style }}; --type-font-body-weight: {{ settings.type_font_body.weight }}; --type-font-header-family: {{ settings.type_font_heading.family }}, {{ settings.type_font_heading.fallback_families }}; --type-font-header-style: {{ settings.type_font_heading.style }}; --type-font-header-weight: {{ settings.type_font_heading.weight }}; --type-font-nav-family: {{ settings.type_font_nav.family }}, {{ settings.type_font_nav.fallback_families }};
4. The updated code should look something like this
 --type-font-body-family: 'MY_FONT'; --type-font-body-style: {{ settings.type_font_body.style }}; --type-font-body-weight: {{ settings.type_font_body.weight }}; --type-font-header-family: 'MY_FONT'; --type-font-header-style: {{ settings.type_font_heading.style }}; --type-font-header-weight: {{ settings.type_font_heading.weight }}; --type-font-nav-family: 'MY_FONT';

1. Prepare your font files
 - Please ensure you have a valid license to use the font you are trying to install
 - Download your font in webfont file types such as <code>.woff2</code> or <code>.woff</code>
 - If you don't have a webfont version of your font, you can use a generator to convert it. Font Squirrel has <a href="https://www.fontsquirrel.com/tools/webfont-generator" target="_blank" rel="nofollow noopener noreferrer">a tool you can use</a> for this.
2. Upload font files to your store
 - Once you have your webfont files you can upload them to your Shopify admin.
 1. Open your Shopify adding and navigate to Content &gt; Files
 2. Upload each file for your font
3. Edit theme code
 1. Open up the theme editor and select <code>theme__styles.liquid</code> from within the snippets folder
 2. Add the below code after the <code>{% style %}</code> tag. Be sure to replace <code>MY_FONT</code> with your font name and ensure the URLs are correctly linking to your uploaded font.
 @font-face { font-family: "MY_FONT"; src: url('{{ "MY_FONT.woff2" | file_url }}') format("woff2"), url('{{ "MY_FONT.woff" | file_url }}') format("woff"); }
 3. From here you can include your font by updating the below code inside the same file. The variables <code>--type-font-body-family</code> , <code>--type-font-header-family</code> and <code>--type-font-nav-family</code> control the font family used for body, headings and navigation text.
 --type-font-body-family: {{ settings.type_font_body.family }}, {{ settings.type_font_body.fallback_families }}; --type-font-body-style: {{ settings.type_font_body.style }}; --type-font-body-weight: {{ settings.type_font_body.weight }}; --type-font-header-family: {{ settings.type_font_heading.family }}, {{ settings.type_font_heading.fallback_families }}; --type-font-header-style: {{ settings.type_font_heading.style }}; --type-font-header-weight: {{ settings.type_font_heading.weight }}; --type-font-nav-family: {{ settings.type_font_nav.family }}, {{ settings.type_font_nav.fallback_families }};
 4. The updated code should look something like this
 --type-font-body-family: 'MY_FONT'; --type-font-body-style: {{ settings.type_font_body.style }}; --type-font-body-weight: {{ settings.type_font_body.weight }}; --type-font-header-family: 'MY_FONT'; --type-font-header-style: {{ settings.type_font_heading.style }}; --type-font-header-weight: {{ settings.type_font_heading.weight }}; --type-font-nav-family: 'MY_FONT';

Summary

Adding a custom font