Add custom fonts to slate 1.x

[pveen2]

Problem

In the folder src/assets/fonts i added a custom font so an eot, woff & woff2 file. But i can't use them with the SCSS files

Is there a workaround to add them to the scss?

[t-kelly]

Hey @pveen2 -- you'll need to declare the @font-face in your main layout file (theme.liquid) because you'll need to use liquid, more particularly the asset_url filter:

<style>
  @font-face {
    font-family: "Open Sans";
    src: url("{{ '../assets/fonts/opensans.woff2' | asset_url }}") format("woff2")
  }
</style>

and then reference you font as normal in your .scss file:

p {
  font-family: "Open Sans";
}

Does that work for you?

Related: #410

[pveen2]

Yes @t-kelly, thanks. I thought I already reply. But thanks!

[zomars]

It's not working for me unfortunately, the "assets/fonts" folder is being ignored.

[RustyDev]

I've been wrestling with loading fonts for awhile. The only way I can get this to deploy, is by using global_asset_url. But then I get a 404 from the CDN. The assets/fonts folder is screwing things up:

404 : https://cdn.shopify.com/s/assets/fonts/GTAmerica-Regular.woff2

Here's my code in theme.liquid:

<style>
@font-face {
    font-family: 'GT America Condensed';
    src: url("{{ '../assets/fonts/GTAmerica-CondensedBold.woff2' | global_asset_url }}") format('woff2'),
        url("{{ '../assets/fonts/GTAmerica-CondensedBold.woff' | global_asset_url }}") format('woff');
    font-weight: bold;
    font-style: normal;
}
</style>

The lack of clear documentation around assets is really getting frustrating.

[t-kelly]

Sounds like this needs to be reopened. I'll take a look as soon as I have the chance!

[dictions]

For those looking to solve this today, you can reference web font files from SCSS and the core webpack config will resolve the files. Note that OTFs do not work - see the loader config here.

My slate.config.js file:

const path = require('path');

const alias = {
	'lodash': path.resolve('./node_modules/lodash-es'),
	'scripts': path.resolve('./src/assets/scripts'),
	'styles': path.resolve('./src/assets/styles'),
	'fonts': path.resolve('./src/assets/fonts'),
};

module.exports = {
	slateTools: {
		extends: {
			dev: {
				resolve: {alias}
			},
			prod: {
				resolve: {alias}
			},
		},
	}
};

My fonts.scss file in assets/styles/...:

@font-face {
	font-family: 'Danzza';
	src: url('~fonts/Danzza-Medium.woff');
	font-weight: 500;
	font-style: normal;
}

@font-face {
	font-family: 'Windsor';
	src: url('~fonts/Windsor-Roman.woff');
	font-weight: 400;
	font-style: normal;
}

@font-face {
	font-family: 'Suisse';
	src: url('~fonts/SuisseIntlMono-Regular.woff');
	font-weight: 400;
	font-style: normal;
}

[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.