Font Issues

Store Feedback
1

Hello,

The screen size of this is 1920 x 1080 but the custom font doesn’t show, but it does when I click ‘Inspect’?

it works on my MacBook, but not my work laptop.

Could this be because of the security settings on my work laptop?

Inspect isn’t showing any errors.

Normal view (not custom font)

IMG_4690.png
IMG_4690.png1284×2778 480 KB

Inspect (custom font)

IMG_4691.png
IMG_4691.png1284×2778 667 KB

Any help would be appreciated!

I do have custom fonts for desktop and mobile, but mobile is maximum 767px and desktop is minimum 767px so everything should be covered?

Kind regards,

Georgie.

2

@tim_1 do you have any ideas?

3

Hello,

The URL is www.pembrokeavenue.com and the store password is ‘avenue9825’

4

You see it on your computer because it’s cached by the browser from the time you’ve researched this font.

This is your code from assets/theme.css:

/* Custom fonts for desktop only */
@media screen and (min-width: 767px) {
  @font-face {
  font-family: 'Momcake';
  src: url('{{ "Momcake.woff" | file_url }}') format('woff');
       url('{{ "Momcake.woff2" | file_url }}') format('woff2');
       url('{{ "Momcake.ttf" | file_url }}') format('ttf');
  font-weight: normal !important;
  font-style: normal !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: antialiased;
}

However, liquid code is not processed inside .css assets.

Add a “Custom code” section in your Footer section group and paste this code there, wrapping it with and tags.

5

Do you mean in the theme editor?

Also, what about the preferences like:

.h3,

.h4,

Do I put them there also?

Kind regards,

Georgie.

6

Yes, in Customize.

You can leave those other rules where they are – they would work fine there since they do not use any liquid.

Only @font-face includes liquid code.

Actually, messed up code above a little, media query should also stay in the asset.

Also, it should comma, not semicolon between multiple urls in src.

So, you go to Theme=> Customize, scroll down to the Footer section group, add a "Custom code"section and paste this:

Browser should not load the actual font unless it’s referenced somewhere else.

7

Hi Tim,

I did this and it’s working completely fine on all devices I own apart from my Dell laptop.

I am unsure why this is, could it possibly be because of the VPN being used as it’s a work secure laptop?

Kind regards,

Georgie.

8

Also, for some reason, even though the fonts are the same for desktop and mobile, they are showing differently for cart item titles and upsell item titles?

<style>  
/* Custom fonts for desktop only */
@media screen and (min-width: 767px) {

.mobile-only-footer-image {
  display: none;   
}  

.cart__title {
  font-family: "Bricolage Grotesque", sans-serif !important;
}
  
.h0,
.h1,
.h2,
.h3,
.h4,
.h5,
h1,
h2,
h3,
h4,
h5,
.footer-block__heading,
.collection-hero__title,
.collection__title,
.product__title,
.product-section__heading,
.main-article__heading,
.section-header__heading,
.hero__title,
.related-section__heading, 
.title {
  font-family: "Momcake", sans-serif !important;  
}

.subheading,
.subtitle,
.section-header h2,
.section-header .h2,
.section-title,
.cart__item__title, 
.product-upsell__variant-title,
.product-upsell__title,
.sub-title {
  font-family: "Homepagebaukasten", sans-serif !important;
}  

/* Custom fonts for mobile only */  
@media screen and (max-width: 767px) {

.cart__title {
  font-family: "Bricolage Grotesque", sans-serif !important;
}

.subheading,
.subtitle,
.section-header h2,
.section-header .h2,
.section-title, 
.sub-title {
  font-family: "Momcake", sans-serif !important;  
}

.h0,
.h1,
.h2,
.h3,
.h4,
.h5,
h1,
h2,
h3,
h4,
h5,
.footer-block__heading,
.collection-hero__title,
.collection__title,
.product__title,
.product-section__heading,
.main-article__heading,
.section-header__heading,
.hero__title,
.related-section__heading,  
.cart__item__title,
.product-upsell__variant-title,
.product-upsell__title,
.title {  
  font-family: "Homepagebaukasten", sans-serif !important;
}   

css
.line_item .product-type {
  font-size: 5px; 
}

</style>

I am trying to use “Homepagebaukasten” for both desktop and mobile for ‘.cart__item__title’, ‘.product-upsell__variant-title’ and ‘.product-upsell__title’, and I think the coding is correct?

Desktop

Screenshot 2025-05-22 at 10.26.47 am.png
Screenshot 2025-05-22 at 10.26.47 am.png1866×1162 133 KB

“GIFT BAG” is bold

Mobile

Screenshot 2025-05-22 at 10.26.38 am.png
Screenshot 2025-05-22 at 10.26.38 am.png864×1344 46.4 KB

“GIFT BAG” is not bold

9

Here is the problem:

@font-face {
  font-family: 'Momcake';
  src: ...;
  font-weight: normal;
  font-style: normal;

  font-family: 'Homepagebaukasten';
  src: ...;
  font-weight: normal;
  font-style: normal;
}

You’ve put two font-families inside single @font-face – this is not right.

Each font-family needs its own @font-face.

The way it is now, Homepagebaukasten overwrites Momcake.

Needs to be:

@font-face {
  font-family: 'Momcake';
  src: ...;
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Homepagebaukasten';
  src: ...;
  font-weight: normal;
  font-style: normal;
}
10

There is no closing brace for this line

@media screen and (min-width: 767px) {

replace your

/* Custom fonts for mobile only */

with

}
/* Custom fonts for mobile only */

Same reason you also need closing brace after rules for mobile only.

This is why proper indenting is important – it helps to notice things like this.

Also you have this – I guess “css” should not be there?

css
.line_item .product-type {
  font-size: 5px; 
}
11

This has worked. Thank you as always!