How can I correctly add a custom font to my H1 and H2 tags?

Store Design
1

Hi! Ive been reading so many articles about changing H1 and H2 to a custom font and I cannot get it to display correctly. I will note that this coding does change the font to a serif font, but not the custom display font I am intending.

My theme has theme.css.liquid in which I add the following coding:

@font-face {
font-family: ‘Lazydog’;
src: url(‘Lazydog.woff2’) format(‘woff2’);
font-style: normal;

}
tagname or .classname or #id{
font-family: Lazydog;
}

I then follow with:

h1 {

font-family: Lazydog;

}

and same with H2

How can I fix the

2

@Missmaddd

Follow the below steps to secure files in the right format to be uploaded to the Assets as a new Asset.

Step 1:

Download the Font and convert it into .woff2 or .woff format.

Step 2:

Upload in the Asset Folder.

Step 3 :

Add some CSS Code in the base.css file at the bottom. which is written below

If you are using the .woff format then use the below code

@font-face {

font-family: ‘Proxima’;

src: url(‘{{ “Proxima Nova Font.woff” | asset_url }}’) format(‘woff’);

font-style: normal;

}

tagname or .classname or #id{

font-family: Proxima;

}

If you are using .woff2 format then use below code

@font-face {

font-family: ‘Proxima’;

src: url(‘Proxima Nova Font.woff2’) format(‘woff2’);

font-style: normal;

}

tagname or .classname or #id{

font-family: Proxima;

}

Please check the following URL for help

Thanks!