Theme settings can be used to add custom fonts.
This example shows how file uploads done with theme settings for TTF, WOFF and WOFF2 font files are accessed with the asset_url filter from the assets folder in the theme.
It is a good idea to include a checkbox for including the font-files in the CSS-file. Note that the CSS-file should be set to be rendered (filename with .liquid in the end).
{% if fontHeadingEnable %}
@font-face {
font-family: 'FontHeading';
src: url("{{ settings.fontHeadingWOFF2 | asset_url }}") format('woff2'),
url("{{ settings.fontHeadingWOFF | asset_url }}") format('woff'),
url("{{ settings.fontHeadingTTF | asset_url }}") format('truetype');
font-weight: normal;
font-style: normal;
}
h1,h2,h3,h4 {
font-family: CustomHeading;
}
{% endif %}
{
"caption": "Header font",
"key": "fontHeadingHeader",
"type": "header"
} ,
{
"caption": "Use custom font",
"key": "fontHeadingEnable",
"type": "checkbox"
},
{
"caption": "Font TTF",
"key": "fontHeadingTTF",
"type": "asset"
},
{
"caption": "Font woff",
"key": "fontHeadingWOFF",
"type": "asset"
},
{
"caption": "Font woff2",
"key": "fontHeadingWOFF2",
"type": "asset"
}