How do I add a custom font to the Blockshop theme?

Store Design
1

I am trying to import my custom font into my theme, but I cannot find where to put it. I have already added the .wiff files as assets, however when I’m in the edit code section, there is no ‘theme.scss.liquid’ section. I ony see ‘theme–async.css.liquid’ and ‘theme–critical.css.liquid’ and in neither of those sections can I find the lines of code related to headings. Where do I add the css for the font files!?

Thank you!

2

@Shanj

Yes, you can do easy to upload your custom font

  1. Go to Online Store->Theme->Edit code
    2.Asset->/theme–async.css.liquid->upload your custom font all font tyep = TTF, OTF, WOFF, WOFF2, SVG
  2. Asset->/theme–async.css.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

3

@KetanKumar thanks, I entered this code but it didn’t change anything. I also tried using the code which was given when I purchased the font:

@font-face {
    font-family: 'sailors';
    src: url('sailors-webfont.woff2') format('woff2'),
         url('sailors-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

but this also doesn’t do anything. There must be a step where I define that this font should be used for all headings, no? Also, I only have .woff, .woff2, and .otf files.

4

For anyone else looking for a solution on hosting custom fonts on the Blockshop theme..

I uploaded the fonts to the Assets folder & used the file custom-style.liquid to add the css below. The key to this code working was using file_url, not asset_url as per other example.

@font-face{
font-family: ‘font-name’;
src: url(“{{ ‘font-file-name.woff2’ | file_url }}”) format(‘woff2’),
url(“{{ ‘font-file-name.woff’ | file_url }}”) format(‘woff’),
url(“{{ ‘font-file-name.ttf’ | file_url }}”) format(‘truetype’);
}

:root{
–font–heading–family: “font-name”, sans-serif!important;
–font–heading–weight: 700!important;
}