Cannot Add Webfont

Store Design
,
1

I’ve been trying to do this for years, followed countless posts and nothing seems to be working. I am trying to add webfonts to my site. Their WOFF and WOFF2 files have been uploaded as files and the following code has been pasted into base.css on Sense theme:

@font-face {
    font-family: "webfont";
    src: url('https://cdn.shopify.com/s/files/1/0575/5070/0749/files/milkandclay-regular-webfont.woff2?v=1729691685') format("woff2"),
         url('https://cdn.shopify.com/s/files/1/0575/5070/0749/files/milkandclay-regular-webfont.woff?v=1729691685') format("woff");
}

  h1, h2, h3, h4, h5 {
    font-family: "Milk and Clay" !important;
  }

Can someone pl

2

Hello :slightly_smiling_face:

In that @font-face definition, you’re defining the font family as “webfont”, so you must refer to it in CSS by that name.

eg:

h1, h2, h3, h4, h5 {
    font-family: "webfont";
  }

That might be why is not working. I’d recommend just changing the ‘font-family’ name inside the @font-face to “Milk and Clay”.

3

I cannot believe it has been this simple. THANK YOU!

4

Could I ask you a follow-up question? Do you know why a webfoot would be appearing bolder on Safari than Chrome? Same webpage.

Screenshot 2024-10-27 at 7.13.11 PM.png
Screenshot 2024-10-27 at 7.13.11 PM.png474×690 27.9 KB

5

Hiya :slightly_smiling_face:

Is this the only font definition you’ve done?

@font-face {
    font-family: "webfont";
    src: url('https://cdn.shopify.com/s/files/1/0575/5070/0749/files/milkandclay-regular-webfont.woff2?v=1729691685') format("woff2"),
         url('https://cdn.shopify.com/s/files/1/0575/5070/0749/files/milkandclay-regular-webfont.woff?v=1729691685') format("woff");
}

If so, it’s normal for browsers to render the “bold” version differently. If you want the bolder version to be a bit more consistent, you’ll also need to upload the bold version of the font and make a definition for it, including its font-weight in the definition, eg: 600.

6

I do not want the bolder look anywhere and did not upload the bold version of the font. I’m not sure why it’s doing this on Safari

7

Hello Nardoayala!

Please check it out. I need your help. Thank you in Advance.

https://community.shopify.com/topic/2824245

8

The bolder look will not appear anywhere; it will only appear in the places where you set the font weight to ‘bold’.

Safari is doing that because there’s no “bold” file to render, so it does its best to bolderize the font, and all browsers do that differently.

Your font-face definitions should look like this:

@font-face {
  font-family: "webfont";
  src: url('https://cdn.shopify.com/s/files/1/0575/5070/0749/files/milkandclay-regular-webfont.woff2?v=1729691685') format("woff2"),
       url('https://cdn.shopify.com/s/files/1/0575/5070/0749/files/milkandclay-regular-webfont.woff?v=1729691685') format("woff");
  font-weight: normal;
}

@font-face{
  font-family: "webfont";
  src: url('https://cdn.shopify.com/s/files/1/0575/5070/0749/files/milkandclay-bold-webfont.woff2?v=1729691685') format("woff2"),
       url('https://cdn.shopify.com/s/files/1/0575/5070/0749/files/milkandclay-bold-webfont.woff?v=1729691685') format("woff");
  font-weight: bold;
}

Notice in the example how the ‘bold’ font file, is set to be used when you use ‘bold’ as the font-weight, for all other fonts without a font-weight defined, the normal style will be used.

9

Thank you for the clarification. That makes sense. I uploaded the bold version of my font, but is there a way to specify for Safari to use the regular font as Chrome does?

10

You need to set the font weight of the normal font as “normal” and Safari should pick it up. If you have then any specific part of your site using the bold font where it shouldn’t, you could just change it by changing the font weight with a CSS rule.