I am trying to customise my fonts on the Narrative theme. I just want to add two fonts. I have uploaded them within the code section but no code I try seems to work.
I want to use deutschlander-2-0.regular.otf as my main header font
and Kollektif.ttf as my body
Anything you can do to help let me know.
https://7ow4yibs39zmpopq-60329754837.shopifypreview.com
password is - Mighty
Hi @MillyBankss ,
Please follow these steps:
@font-face {
font-family: 'deutschlander';
src: url('{{ 'deutschlander-2-0.regular.otf ' | asset_url }}') format('opentype');
font-weight: normal;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Kollektif';
src: url('{{ 'Kollektif.ttf ' | asset_url }}') format('truetype');
font-weight: normal;
font-style: normal;
font-display: swap;
}
You can follow this guide to learn how to add a custom font to any Shopify theme.
Let me know if you need any further assistance.
Kind regards,
Diego
Hi,
Thanks so much for this - unfortunately it hasn’t worked It is showing an error (image 1) when I go to customise my theme and has caused issues with my current theme(Image 2). I can’t see anything that correlates with the error shown (image 3)
Here is the code -
/================ SETTINGS ================/
/*========================================================================================
Liquid Variables
$settings-color-header-text: {{ settings.color_header_text }};
$settings-color-primary-heading-text: {{ settings.color_primary_heading_text }};
$settings-color-primary-body-text: {{ settings.color_primary_body_text }};
$settings-color-button-text: {{ settings.color_button_text }};
$settings-color-header: {{ settings.color_header_bg }};
$settings-color-footer-bg: {{ settings.color_footer_bg }};
$settings-color-footer-text: {{ settings.color_footer_text }};
$settings-color-main-bg: {{ settings.color_main_bg }};
$settings-color-secondary-bg: {{ settings.color_secondary_bg }};
$settings-color-product-card: {{ settings.color_product_cards }};
$settings-color-form-elements: {{ settings.color_form_elements }};
$settings-color-cart-flag: {{ settings.color_cart_flag }};
{% assign header_font = settings.type_header_font %}
{% assign base_font = settings.type_base_font %}
{{ header_font | font_face }}
{{ base_font | font_face }}
@font-face {
font-family: ‘deutschlander’;
src: url(‘{{ ‘deutschlander-2-0.regular.otf ’ | asset_url }}’) format(‘opentype’);
font-weight: normal;
font-style: normal;
font-display: swap;
}
@font-face { font-family: ‘Kollektif’;
src: url(’{{ ‘Kollektif.ttf ’ | asset_url }}’) format(‘truetype’);
font-weight: normal;
font-style: normal;
font-display: swap; }
{%- assign base_font_semi_bold = base_font | font_modify: ‘weight’, ‘+200’ -%}
{%- assign base_font_bold = base_font | font_modify: ‘weight’, ‘bolder’ -%}
{%- assign base_font_italic = base_font | font_modify: ‘style’, ‘italic’ -%}
{%- assign base_font_bold_italic = base_font | font_modify: ‘weight’, ‘bolder’ | font_modify: ‘style’, ‘italic’ -%}
{{ base_font_semi_bold | font_face }}
{{ base_font_bold | font_face }}
{{ base_font_italic | font_face }}
{{ base_font_bold_italic | font_face }}
$settings-font-stack-header-weight: {{ header_font.weight }};
$settings-font-weight-body: {{ base_font.weight }};
$settings-font-weight-body-bold: {{ base_font_bold.weight | default: 700 }};
$settings-font-weight-body-semi-bold: {{ base_font_semi_bold.weight | default: 600 }};
$settings-font-stack-header: {{ header_font.deutschlander }}, {{ header_font.deutschlander }};
$settings-font-style-header: {{ header_font.style }};
$settings-font-stack-body: {{ base_font.Kollektif }}, {{ base_font.Kollektif }};
$settings-font-style-body: {{ base_font.style }};
$settings-font-size-base: {{ settings.type_base_size }};
/================ Product video ================/
/* Create an appropriate poster background color based on background color and brightness */
{%- assign color_main_bg = settings.color_main_bg -%}
{%- assign color_main_bg_brightness = color_main_bg | color_brightness -%}
{%- if color_main_bg_brightness <= 26 -%}
{%- assign background_color_poster = color_main_bg | color_lighten: 10 -%}
{%- elsif color_main_bg_brightness <= 65 -%}
{%- assign background_color_poster = color_main_bg | color_lighten: 5 -%}
{%- else -%}
{%- assign background_color_poster = color_main_bg | color_darken: 5 -%}
{%- endif -%}
$color-video-bg: {{ background_color_poster }};
/*============================================================================
Grid Breakpoints and Class Names
$small: ‘small’;
$medium: ‘medium’;
$medium-down: ‘medium-down’;
$medium-up: ‘medium-up’;
$large: ‘large’;
$large-down: ‘large-down’;
$large-up: ‘large-up’;
$widescreen: ‘widescreen’;
// The $grid-breakpoints list is used to build our media queries.
// You can use these in the media-query mixin.
$grid-breakpoints: (
$small ‘(max-width: #{$grid-medium - 1})’,
$medium ‘(min-width: #{$grid-medium}) and (max-width: #{$grid-large - 1})’,
$medium-down ‘(max-width: #{$grid-large - 1})’,
$medium-up ‘(min-width: #{$grid-medium})’,
$large ‘(min-width: #{$grid-large}) and (max-width: #{$grid-widescreen - 1})’,
$large-down ‘(max-width: #{$grid-widescreen - 1})’,
$large-up ‘(min-width: #{$grid-large})’,
$widescreen ‘(min-width: #{$grid-widescreen})’
);
Hi @MillyBankss ,
You did not follow my instructions at step 3:
Refer: https://i.imgur.com/LVZvqSF.png => https://i.imgur.com/PXwEcpT.png
Please change:
$settings-font-stack-header: {{ header_font.deutschlander }}, {{ header_font.deutschlander }};
=>
$settings-font-stack-header: 'deutschlander ', {{ header_font.fallback_families}};
and
$settings-font-stack-body: {{ base_font.Kollektif }}, {{ base_font.Kollektif }};
=>
$settings-font-stack-body: 'Kollektif ', {{ base_font.fallback_families}};
Hope it clear to you.
Hi,
I have done what you said I think…
It has put the theme back to what it was before but no change on the font
What am I missing? 
Hi,
Please send your site and if your site is password protected, please send me the password. I will check it for you.
Hi - thanks that would be great!
the site is -https://milly-692.myshopify.com/?key=b2d7980a8c95b7d077e3c973c08d00561c284924699fcbd218965514633b4dea
Password is - Mighty
Hi @MillyBankss ,
I checked and the code you added has extra spaces.
Please remove 2 spaces after each font name, it will work fine. Refer https://i.imgur.com/XW6rlVe.png , https://i.imgur.com/lok6Cev.png
Hope it clear to you.
Thank you so much!!
