I’ve purchased the Archetype Motion Theme, they have documentation for adding a custom font: https://archetypethemes.co/blogs/motion/how-do-i-add-custom-fonts?_pos=1&_sid=3868771be&_ss=r
I’ve followed the documentation, I’m sadly new to Shopify dev, but I figured it couldn’t be too different from Wordpress - I’m still missing something because the custom font is not loading. I’ve added it to the assets section (woff, woff2) and then I added the proper code to the stylesheet to call on those fonts. I then changed the line of code for all header fonts to call on this new custom font, however it just changed all my headers to a serif font instead of my new script font.
{%- style -%}
@font-face {
font-family: ‘buffaloregular’;
src: url(‘buffalo-regular-webfont.woff2’) format(‘woff2’),
url(‘buffalo-regular-webfont.woff’) format(‘woff’);
}
}
:root {
–typeHeaderPrimary: ‘buffaloregular’;
–typeHeaderFallback: {{ settings.type_header_font_family.fallback_families }};
–typeHeaderSize: {{ settings.type_header_base_size | default: ‘32’ | append: ‘px’ }};
–typeHeaderWeight: {{ settings.type_header_font_family.weight }};
–typeHeaderLineHeight: {{ settings.type_header_line_height | default: 1.4 }};
–typeHeaderSpacing: {{ settings.type_header_spacing | default: ‘25’ | divided_by: 1000.00 | append: ‘em’ }};
–typeBasePrimary:{{ settings.type_base_font_family.family }};
–typeBaseFallback:{{ settings.type_base_font_family.fallback_families }};
–typeBaseSize: {{ settings.type_base_size | default: ‘16’ | append: ‘px’ }};
–typeBaseWeight: {{ settings.type_base_font_family.weight }};
–typeBaseLineHeight: {{ settings.type_base_line_height | default: 1.6 }};
–typeBaseSpacing: {{ settings.type_base_spacing | default: ‘50’ | divided_by: 1000.00 | append: ‘em’ }};
–iconWeight: {{ settings.icon_weight | default: ‘5px’ }};
–iconLinecaps: {{ settings.icon_linecaps | default: ‘miter’ }};
}