How can I successfully add a custom font to my website?

Store Design
,
1

Hello All,

I have seen a couple posts about this and I have tried 2 solutions with no luck. I am trying to add the attached font to my site by following the normal steps of adding the asset and then editing the base.css.

This is the code I have added to my base.css for a font called: StereoGothic500.woff2

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

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

Please share if you can see i am doing something wrong.

1 Like
2

  1. Confirm the font file is uploaded: Make sure that the StereoGothic500.woff2 file is uploaded to your Shopify theme’s Assets folder. You can check this by going to your Shopify admin, navigating to “Online Store” → “Themes,” selecting your theme, and then clicking on “Actions” → “Edit code.” In the code editor, navigate to the “Assets” folder to confirm that the font file is present.

  2. Verify the file path: Double-check the file path in your url declaration. If the StereoGothic500.woff2 file is in the root of the Assets folder, the path should be ‘StereoGothic500.woff2’. If it’s in a subfolder, make sure to include the correct path, such as ‘subfolder/StereoGothic500.woff2’.

3

Hello,

Thanks for the reply.

gregmare_0-1686035181871.png

  1. Confirmed to be correct.

Still cant see the font in the Typography section of the Theme Settings

4

Add file in assets folder then

5

Is this not correct?

gregmare_0-1686051743436.png
gregmare_0-1686051743436.png324×545 18.8 KB