Why isn't my custom font showing up in theme settings?

Store Design
,
1

Hey!

I made a font .OTF file and converted it to .WOFF extension.

I added the file as a new asset.

(Craft theme) I added this code in base.css:

@font-face {
font-family: “1st”;
src: url({{ “1st.woff” | asset_url }}) format(“TrueType”);
}

Can’t find the font at typography in theme settings.

What did I do wrong?

Thanks!!

2

Hi @TheRoundCloud

This is David at SalesHunterThemes.
You cannot choose the custom font in theme settings.
In this case you only upload the font file, then get the link and use font by add custom CSS code.

3

Hey David,

Thanks for the reply!

Could you please explain me step by step how to do this? I am a newbie.

Thanks!!

4

Hi @TheRoundCloud
The first: upload the font into shopify file then get the link.
Then add the custom css code into the base.css file

@font-face {
    font-family: 'Font name';
    src: url('Font URL.woff2') format('woff2'),
        url('Font URL.woff') format('woff');
    font-weight: font weight;
    font-style: normal;
    font-display: swap;
}
h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5,.h6,
body {
    font-family: 'Font name';
}
5

Hey!

Thanks for the reply.

I can’t make it to work, I don’t know why. I added the woff and woff2 files in assets. It doesn’t appear if searched in theme setting’s typography section.

How do I get the font URL?