Add Custom Fonts to Shopify theme
Convert your free ttf fonts to woff and woff2 using the mighty fontsquirrel.
- go to your theme in shopify.
- upload your woffs to assets directory.. assets directory wont upload a folder. So just - upload the fonts files.
In your layout > theme.liquid file. Add custom css code to the header. asset_url is Shopify way of grabbing the fonts from your assets directory.
Ensure to specify the correct font weights to avoid fuzzy font rendering.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<style>
@font-face {
font-family: "Aktiv Grotesk";
src:
url(aktivgrotesk-black-webfont.woff2) format("woff2"),
url(aktivgrotesk-black-webfont.woff) format("woff");
font-weight: 900; /* important */
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Aktiv Grotesk";
src:
url(aktivgrotesk-bold-webfont.woff2) format("woff2"),
url(aktivgrotesk-bold-webfont.woff) format("woff");
font-weight: 700;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Aktiv Grotesk";
src:
url(aktivgrotesk-medium-webfont.woff2) format("woff2"),
url(aktivgrotesk-medium-webfont.woff) format("woff");
font-weight: 500;
font-style: normal;
font-display: swap;
}
/* Use the exact weight */
h1,
h2,
h3 {
font-family: "Aktiv Grotesk", sans-serif;
font-weight: 900;
}
</style>
Furthermore, in regards to font smoothing.
Preloading helps the browser fetch the sharpest cut earlier and avoid fallback “flash” that can look rough.
Place these in <head> (theme.liquid). Keep crossorigin.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<link
rel="preload"
href="aktivgrotesk-black-webfont.woff2"
as="font"
type="font/woff2"
crossorigin
/>
<link
rel="preload"
href="aktivgrotesk-bold-webfont.woff2"
as="font"
type="font/woff2"
crossorigin
/>
<link
rel="preload"
href="aktivgrotesk-medium-webfont.woff2"
as="font"
type="font/woff2"
crossorigin
/>
Enable platform smoothing (helps most on macOS)
1
2
3
4
5
html {
-webkit-font-smoothing: antialiased; /* Safari/macOS */
-moz-osx-font-smoothing: grayscale; /* Firefox/macOS */
text-rendering: optimizeLegibility; /* optional */
}
How to load your custom font through your site
Use css inheritence to allow your fonts to work through the theme editor rather then custom coding every single element.
Redeclare your theme variables
You need to override variables like this that are set as root values var(--font-heading-weight)
To do this, add some reset code to your theme.liquid head.
1
2
3
4
5
6
7
8
<style>
:root {
--font-heading-family: 'aktivblack', sans-serif;
--font-heading-weight: 900;
--font-body-family: 'aktivmedium', sans-serif; /* optional */
--font-body-weight: 500; /* optional */
}
</style>