Help adding custom fonts

[donatasp94]

Problem

I'm quite new to Slate and can't seem to be able to figure out how to add custom fonts. I tried solutions from here - Add custom fonts to slate 1.x, but none of them work, I just get Module parse failed: Unexpected character ' ' (1:4) You may need an appropriate loader to handle this file type. errors.

Any help would be much appreciated

[huguestennier]

We're working on documentation on working with custom fonts, but here's how it should look :

• Add your font files in a flat structure (no subfolders) in assets/fonts
• Add your font-face declaration in any .scss file like styles/theme.scss and make sure your src path are relative to the fonts folder :

@font-face {
  font-family: 'geomanistblack';
  src: url('../fonts/geomanist-black-webfont.eot');
  src: url('../fonts/geomanist-black-webfont.eot?#iefix') format('embedded-opentype'),
       url('../fonts/geomanist-black-webfont.woff2') format('woff2'),
       url('../fonts/geomanist-black-webfont.woff') format('woff'),
       url('../fonts/geomanist-black-webfont.ttf') format('truetype'),
       url('../fonts/geomanist-black-webfont.svg#geomanistregular') format('svg');
  font-weight: normal;
  font-style: normal;
}

h1 {
  font-family: 'geomanistblack';
}

You will have to run yarn deploy once after you added the fonts to make sure they are on Shopify's CDN.

[donatasp94]

Doesn't seem to be working. As soon as I add:

@font-face {
	font-family: 'Corbel';
	src: url('../fonts/37C2F5_0_0.eot');
	src: url('../fonts/37C2F5_0_0.eot?#iefix') format('embedded-opentype'),
	     url('../fonts/37C2F5_0_0.woff2') format('woff2'),
	     url('../fonts/37C2F5_0_0.woff') format('woff'),
	     url('../fonts/37C2F5_0_0.ttf') format('truetype');
	font-weight: bold;
  	font-style: italic;
}

to theme.scss, I start getting the same errors as before:

./assets/fonts/37C2F5_1_0.woff 1:4
Module parse failed: Unexpected character ' ' (1:4)
You may need an appropriate loader to handle this file type.
(Source code omitted for this binary file)
 @ ./assets/styles/theme.scss (../node_modules/css-loader??ref--11-1!../node_modules/postcss-loader/lib??postcss!../node_modules/sass-loader/lib/loader.js??ref--11-3!./assets/styles/theme.scss) 7:894-929
 @ ./assets/styles/theme.scss
 @ ./assets/scripts/layout/theme.js
 @ multi ../node_modules/@shopify/slate-tools/tools/webpack/hot-client.js ./assets/scripts/layout/theme.js

Replicated the error with a fresh Slate install and a different font

[huguestennier]

Do you only get the error on the .woff file? or all the file? so (4-5 error messages)

I just did the steps with a fresh yarn create slate-theme my-new-theme and it works fine.

Maybe it's a font problem?

[donatasp94]

I get errors for all of the files (eot, ttf, woff, woff2). I'm on Windows 10, if that makes any difference

I tested the fonts that I need (Corbel from Myfonts), then different fonts from Google Fonts and Fontsquirrel. I get errors for all of them.

Could someone try downloading the woff+ttf Webfont kit with the default subset from here - https://www.fontsquirrel.com/fonts/open-sans

And use the following CSS in theme.scss to eliminate the possibility of a font issue?

@font-face {
    font-family: 'open_sansregular';
    src: url('../fonts/OpenSans-Regular-webfont.woff') format('woff'),
         url('../fonts/OpenSans-Regular-webfont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

[donatasp94]

Seems like this is a Windows 10 (or at least my particular Windows 10 setup) issue. Tried replicating the above in Ubuntu VM and got no errors, everything working fine

[huguestennier]

We did not extensively test on Windows but it's something we plan to do, so I can't really help you more right now. Gonna keep this open to make sure we look into it.

Thanks for the issue, @donatasp94!

[skoulix]

@donatasp94 I would suggest to reference your fonts inside the theme.liquid file via the <style> tag.
This way you can use Shopify's 'asset_url' filter. Don't forget to use single quotes outside and double ones inside so these assets won't parsed by Webpack.

An example:

<style>
@font-face {
    font-family: 'MyFont';
    src: url('{{ "MyFont.eot" | asset_url }}');
    src: url('{{ "MyFont.eot?#iefix" | asset_url }}') format('embedded-opentype'),
         url('{{ "MyFont.woff" | asset_url }}') format('woff'),
         url('{{ "MyFont.ttf" | asset_url }}')  format('truetype'),
         url('{{ "MyFont.svg#PerpetuaMT" |  asset_url }}') format('svg');
    font-weight: normal;
    font-style: normal;
}
</style>

I hope this helps.

[t-kelly]

Assets have been simplified in #850 and the change is now available in v1.0.0-beta.12

Docs that have also been updated:

• https://github.com/Shopify/slate/wiki/Slate-themes
• https://github.com/Shopify/slate/wiki/Template-and-layout-bundles
• https://github.com/Shopify/slate/wiki/Local-development

[lock]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.