Add more than one custom font to the narrative theme

Technical Q&A
2

Hi @NaomiRD ,

Does that font belong to google fonts? If belong to google font, can you send me 2 font names, I will guide you in detail.

If not in google fonts, you just need to upload 2 fonts in assets. https://i.imgur.com/AZnLv4t.png

Then you go to the file assets/theme.scss.liquid , find ‘settings.type_header_font’ and add code here: https://i.imgur.com/hfI3tsJ.png

Code:

@font-face {
	font-family: 'fontname_1';
	src:  url('{{ 'fontname_1.eot' | asset_url }}') format('embedded-opentype'),
        url('{{ 'fontname_1.ttf' | asset_url }}') format('truetype'),
        url('{{ 'fontname_1.woff' | asset_url }}') format('woff'),
        url('{{ 'fontname_1.svg' | asset_url }}') format('svg');
	font-weight: normal;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'fontname_2';
	src:  url('{{ 'fontname_2.eot' | asset_url }}') format('embedded-opentype'),
        url('{{ 'fontname_2.ttf' | asset_url }}') format('truetype'),
        url('{{ 'fontname_2.woff' | asset_url }}') format('woff'),
        url('{{ 'fontname_2.svg' | asset_url }}') format('svg');
	font-weight: normal;
	font-style: normal;
	font-display: swap;
}

With fontname_1, fontname_2 is the name of the 2 fonts you upload.
And if the font you upload doesn’t have formats like eot, ttf,… you can delete the corresponding code.
Ex: doesn’t have formats like eot:

@font-face {
	font-family: 'fontname_1';
	src:  url('{{ 'fontname_1.ttf' | asset_url }}') format('truetype'),
        url('{{ 'fontname_1.woff' | asset_url }}') format('woff'),
        url('{{ 'fontname_1.svg' | asset_url }}') format('svg');
	font-weight: normal;
	font-style: normal;
	font-display: swap;
}

Hope it clear to you.