Custom fonts not loading on mobile

Hello,
I uploaded a custom font and it's working fine on desktop but won't load on mobile. I've tested on both android and iphone. My site is https://www.beautybymichele.ca/about (homepage is a cover page). I'm trying to add this font to both the header overlay text and the H1 headings. I read it's good to add many font formats so that's why I have so many. Here is the code I used:

/**********CUSTOM FONTS**********/
//adding playlist script font
@font-face {
    font-family: 'Playlist-Script' !important;
  src: url('https://static1.squarespace.com/static/5dc1fa82d238444f39cf08ab/t/5dc7183b492ddd0f8b82bc87/1573328955817/Playlist-Script.eot'),
       url('https://static1.squarespace.com/static/5dc1fa82d238444f39cf08ab/t/5dc7184559401f78176f21e2/1573328965178/Playlist-Script.otf'),
       url('https://static1.squarespace.com/static/5dc1fa82d238444f39cf08ab/t/5dc71859df818a4a7428db06/1573328985576/Playlist-Script.ttf'),
       url('https://static1.squarespace.com/static/5dc1fa82d238444f39cf08ab/t/5dc7185f09cdf43d6db139cf/1573328991947/Playlist-Script.woff');
  }

//customize h1 to playlist font
h1 {
  font-family: Playlist Script, sans-serif !important;
  color: #cfa2ad;
  font-size: 40px;
}

//style banner text to playlist font
.desc-wrapper p>strong {
  font-family: Playlist Script, sans-serif !important;
  color: #cfa2ad;
  font-size: 60px;
  line-height: 63px;
  text-transform: capitalize;
}

Thank you so much... I have been stuck on this.
Have a good day-
Michele

Hi Michele

There are a few issues that you need to correct. It's not working on desktop either, but if you have the fonts installed on YOUR desktop, it may appear to be working for you 🙂.

Firstly, a rule of thumb is to not add '!important' unless absolutely necessary. You should remove it from line 4 (font-face) as it cannot be added here.

Secondly, whatever you name the font in line 4 ('Playlist-Script') you MUST use the same name throughout, with the quotes. Take a look through the rest of your CSS and replace Playlist Script with 'Playlist-Script'. It should then work.

Let me know how you get on.

-Paul

OMG Paul! Thank you so much! Duh, I can't believe I missed that. Yes it worked. You made my day. 🙂

Have a good one-

Michele

Hi @paul2009, 

 I saw you helped someone else with a similar problem to what I am facing with my custom fonts on squarespace. I have filled in the code and the fonts work perfectly on all desktops (not just my own) but they don't work on mobile devices. The code I have used is below and the website is here - https://dove-kangaroo-kam5.squarespace.com/      password: thecommitment    

@font-face {
  font-family: 'akzidenz';
  src:
url(https://static1.squarespace.com/static/5e4e98e52af88f0ae8ad9b84/t/5e4fc95fef291f3341760e92/1582287200294/berthold-akzidenz-grotesk-be-bold.ttf),
url(https://static1.squarespace.com/static/5e4e98e52af88f0ae8ad9b84/t/5e4fd1006da5ca09037d0fed/1582289152788/berthold-akzidenz-grotesk-be-bold-webfont.woff2),
url(https://static1.squarespace.com/static/5e4e98e52af88f0ae8ad9b84/t/5e4fd111ef291f334176e079/1582289169411/berthold-akzidenz-grotesk-be-bold-webfont.woff);  
}
h3 {
  font-family: 'akzidenz';
}

@font-face {
  font-family: 'akzidenz';
  src:
url(https://static1.squarespace.com/static/5e4e98e52af88f0ae8ad9b84/t/5e4fc95fef291f3341760e92/1582287200294/berthold-akzidenz-grotesk-be-bold.ttf),
url(https://static1.squarespace.com/static/5e4e98e52af88f0ae8ad9b84/t/5e4fd1006da5ca09037d0fed/1582289152788/berthold-akzidenz-grotesk-be-bold-webfont.woff2),
url(https://static1.squarespace.com/static/5e4e98e52af88f0ae8ad9b84/t/5e4fd111ef291f334176e079/1582289169411/berthold-akzidenz-grotesk-be-bold-webfont.woff);  
}
h1 {
  font-family: 'akzidenz';
}

@font-face {
  font-family: 'Sabon';
  src:
url(https://static1.squarespace.com/static/5e4e98e52af88f0ae8ad9b84/t/5e4fc96ca7813949bba7ece2/1582287212698/sabon_roman.ttf),
url(https://static1.squarespace.com/static/5e4e98e52af88f0ae8ad9b84/t/5e4fd0f3a7813949bba8c021/1582289139862/sabon_roman-webfont.woff2),
url(https://static1.squarespace.com/static/5e4e98e52af88f0ae8ad9b84/t/5e4fd1227d4ad15fa6e3324c/1582289186638/sabon_roman-webfont.woff);  
}
P {
  font-family: 'Sabon';
}

@font-face {
 font-family: 'Sabon';
  src:
url(https://static1.squarespace.com/static/5e4e98e52af88f0ae8ad9b84/t/5e4fc96ca7813949bba7ece2/1582287212698/sabon_roman.ttf),
url(https://static1.squarespace.com/static/5e4e98e52af88f0ae8ad9b84/t/5e4fd0f3a7813949bba8c021/1582289139862/sabon_roman-webfont.woff2),
url(https://static1.squarespace.com/static/5e4e98e52af88f0ae8ad9b84/t/5e4fd1227d4ad15fa6e3324c/1582289186638/sabon_roman-webfont.woff);  
}
H2 {
  font-family: 'Sabon';
}

Many thanks

Harry

@paul2009 any thoughts? 

Hi Everyone! I am having the same problem. Would you be able to help?

My fonts are not showing on Mobile.

This is my code is:

@font-face { 
font-family: 'Sailec';
src: url(https://static1.squarespace.com/static/5dfbeb951e1a9011a52b6835/t/5f5fb322b11bc31456117109/1600107300708/Sailec+Bold.ttf)
}
h1 {
font-family: 'Sailec', alternative-web-safe-font;
}
h2 {
font-family: 'Sailec', alternative-web-safe-font;
}
h3 {
font-family: 'Sailec', alternative-web-safe-font;
}
h4 {
font-family: 'Sailec', alternative-web-safe-font;
}

Thank you!!

13 hours ago, Gordita said:

Hi Everyone! I am having the same problem. Would you be able to help?

My fonts are not showing on Mobile.

This is my code is:

@font-face { 
font-family: 'Sailec';
src: url(https://static1.squarespace.com/static/5dfbeb951e1a9011a52b6835/t/5f5fb322b11bc31456117109/1600107300708/Sailec+Bold.ttf)
}
h1 {
font-family: 'Sailec', alternative-web-safe-font;
}
h2 {
font-family: 'Sailec', alternative-web-safe-font;
}
h3 {
font-family: 'Sailec', alternative-web-safe-font;
}
h4 {
font-family: 'Sailec', alternative-web-safe-font;
}

Thank you!!

Can you share site url? We can help easier

Yes it’s www.thinkersthinketh.com

Thank you!

On 12/20/2020 at 10:37 PM, Gordita said:

Yes it’s www.thinkersthinketh.com

 

Thank you!

Hi. Missing your comment. Have you solved it yet?

Not solved yet @tuanphan

@Gordita

The font is appearing on an iPhone 5/iOS v10.x.

Please tell us more about the mobile devices the font is not appearing on.

Hi, I have the same problem. I added a code block with the Playfair Display font, and it does not load on the mobile version.

 <h1 class="portfolio-item" style="font-size:310%; font-family:playfair display; !important;"> Hi there! I'm Bea Ibeas, <br>

site: https://www.beaibeas.com/

Any idea on how to fix this?

Thank you in advance

@beaibeas

You have syntax errors in your code. The first issue is in Design > Custom CSS.

I have no suggestions there as I can't see the code that is causing the problem.

The code you posted should be replaced with the following.

<h1 class="portfolio-item" style="font-size: 310%; font-family: 'playfair display';"> Hi there! I'm Bea Ibeas, <br>

Can anyone help me?! I am having the same issue of the custom font not showing up on the mobile view! Here is the code that was injected by the previous designer:

@font-face {

    font-family: 'gotham-book';

       src: url('https://static1.squarespace.com/static/604b9eee1d2fa95044fa4ca8/t/604ba22f00ce880c5970d75a/1615569455817/Gotham-Book.ot');

  }
h1 {font-family: 'gotham-book';}
h2 {font-family: 'gotham-book';}
h3 {font-family: 'gotham-book';}
h4 {font-family: 'gotham-book';}
p {font-family: 'gotham-light';}
.header-nav-item a {
  font-family: 'gotham-book' !important;
}
/* Button font */
.sqs-block-button-element {
  font-family: 'gotham-light' !important;
}
/* Image blocks and button in image blocks */
.sqs-block-image * {
   font-family: "gotham-book" !important;
}
/* Newsletter form button */
.newsletter-form-button {
   font-family: "gotham-light" !important;
}
.newsletter-form-header {
   font-family: "gotham-book" !important;
}

.newsletter-block .newsletter-form-field-element, .newsletter-block .newsletter-form-button {
  padding: .8rem 2rem !important;
}
.form-wrapper .field-list .field .caption{

  font-family : gotham-light;
  font-size : 16px;
}

.gallery-caption p{font-family:gotham-light!important}
.gallery-caption {background:white;margin-top:-20%; opacity:0!important}
.gallery-masonry-item:hover .gallery-caption {opacity:1!important; transition-duration:0s!important}

.gallery-caption p{font-family:gotham-light!important}
.gallery-caption {background:white;margin-top:-10%; opacity:0!important}
.gallery-grid-item:hover .gallery-caption {opacity:1!important; transition-duration:0s!important}

Your help is so greatly appreciated!!!

On 4/28/2021 at 12:53 AM, cassandranicole said:

Can anyone help me?! I am having the same issue of the custom font not showing up on the mobile view! Here is the code that was injected by the previous designer:

 

@font-face {

    font-family: 'gotham-book';

       src: url('https://static1.squarespace.com/static/604b9eee1d2fa95044fa4ca8/t/604ba22f00ce880c5970d75a/1615569455817/Gotham-Book.ot');

  }
h1 {font-family: 'gotham-book';}
h2 {font-family: 'gotham-book';}
h3 {font-family: 'gotham-book';}
h4 {font-family: 'gotham-book';}
p {font-family: 'gotham-light';}
.header-nav-item a {
  font-family: 'gotham-book' !important;
}
/* Button font */
.sqs-block-button-element {
  font-family: 'gotham-light' !important;
}
/* Image blocks and button in image blocks */
.sqs-block-image * {
   font-family: "gotham-book" !important;
}
/* Newsletter form button */
.newsletter-form-button {
   font-family: "gotham-light" !important;
}
.newsletter-form-header {
   font-family: "gotham-book" !important;
}

.newsletter-block .newsletter-form-field-element, .newsletter-block .newsletter-form-button {
  padding: .8rem 2rem !important;
}
.form-wrapper .field-list .field .caption{

  font-family : gotham-light;
  font-size : 16px;
}

.gallery-caption p{font-family:gotham-light!important}
.gallery-caption {background:white;margin-top:-20%; opacity:0!important}
.gallery-masonry-item:hover .gallery-caption {opacity:1!important; transition-duration:0s!important}

.gallery-caption p{font-family:gotham-light!important}
.gallery-caption {background:white;margin-top:-10%; opacity:0!important}
.gallery-grid-item:hover .gallery-caption {opacity:1!important; transition-duration:0s!important}

 

Your help is so greatly appreciated!!!

Hi. Have you solved it yet?

Can any help me, I'm having the same issue, my customs fonts (SilverSouthSerif and SilverSouthScriptAlt are not displaying on mobile for Headings H1 and H2.

Here is my code. Thanks

@font-face {

    font-family: 'Roboto';

       src: url('https://indigo-saxophone-chwp.squarespace.com/config/design/undefined');

  }

h1 {font-family: 'Roboto-Regular';}
h2 {font-family: 'Roboto-Bold';}
h3 {font-family: 'Roboto-Regular';}
h4 {font-family: 'Roboto-Regular';}
h5 {font-family: 'Roboto-Regular';}
P {font-family: 'Roboto-Regular';}

@font-face {

    font-family: 'SilverSouth';

       src: url('https://indigo-saxophone-chwp.squarespace.com/config/design/undefined');

  }

h1 {font-family: 'SilverSouthSerif';
font-style: regular;

  font-size: 60px;

  letter-spacing: 0em;

  text-transform: sentencecase;

  line-height: 1em;
}

h2 {

  font-family: 'SilverSouthScriptAlt';

  font-weight: 500;

  font-style: regular;

  font-size: 70px;

  letter-spacing: 0em;

  text-transform: sentencecase;

  line-height: 1em;

}
h3 {font-family: 'Roboto-Bold';}
h4 {font-family: 'Roboto-Regular';}
h5 {

  font-family: 'SilverSouthScriptAlt';

  font-weight: 500;

  font-style: regular;

  font-size: 40px;

  letter-spacing: 0em;

  text-transform: sentencecase;

  line-height: 1em;

}

5 hours ago, katrinaoxy said:

Can any help me, I'm having the same issue, my customs fonts (SilverSouthSerif and SilverSouthScriptAlt are not displaying on mobile for Headings H1 and H2.

Here is my code. Thanks

 

@font-face {

    font-family: 'Roboto';

       src: url('https://indigo-saxophone-chwp.squarespace.com/config/design/undefined');

  }

h1 {font-family: 'Roboto-Regular';}
h2 {font-family: 'Roboto-Bold';}
h3 {font-family: 'Roboto-Regular';}
h4 {font-family: 'Roboto-Regular';}
h5 {font-family: 'Roboto-Regular';}
P {font-family: 'Roboto-Regular';}

@font-face {

    font-family: 'SilverSouth';

       src: url('https://indigo-saxophone-chwp.squarespace.com/config/design/undefined');

  }

h1 {font-family: 'SilverSouthSerif';
font-style: regular;

  font-size: 60px;

  letter-spacing: 0em;

  text-transform: sentencecase;

  line-height: 1em;
}

h2 {

  font-family: 'SilverSouthScriptAlt';

  font-weight: 500;

  font-style: regular;

  font-size: 70px;

  letter-spacing: 0em;

  text-transform: sentencecase;

  line-height: 1em;

}
h3 {font-family: 'Roboto-Bold';}
h4 {font-family: 'Roboto-Regular';}
h5 {

  font-family: 'SilverSouthScriptAlt';

  font-weight: 500;

  font-style: regular;

  font-size: 40px;

  letter-spacing: 0em;

  text-transform: sentencecase;

  line-height: 1em;

}

What is your site url?

@tuanphan Hi Tuan! Would you be able to help with my code too? 

I want the font to show on my site title and navigation along with the h1. It's currently not showing up on either desktop or mobile. The site is sandradamian.com

Quote

 

@font-face {

    font-family: 'Mango';

       src: url('https://static1.squarespace.com/static/599ba7cf15d5db327ad86d5d/t/6164796cc1a31d18d9c0cdcb/1633974636221/Mango.ttf'), url(https://static1.squarespace.com/static/599ba7cf15d5db327ad86d5d/t/61647987c6d0580035320eeb/1633974663996/Mango.woff;)
url('https://static1.squarespace.com/static/599ba7cf15d5db327ad86d5d/t/61647db7e1770d726d80791d/1633975735619/Mango.woff2';)

  }

h1 {font-family: 'Mango';}
Header-branding-title {
font-family: 'Mango';}
Header-nav-title {font-family: 'Mango';} Header-nav-secondary {font-family: 'Mango';}

 

Can someone please fix my code too I'm having the same mobile issue! My site is www.thedivinesocial.com

@font-face{
     font-family: 'Bulgari';
     src: url ('https://static1.squarespace.com/static/5fc490c3b8467722f1eb7e1b/t/61606f8a8230495ecf5ab0b0/1633709962694/Bulgari.otf ');
     font-weight: regular;
}
 
h1 {
     font-family: 'Bulgari';
}
@font-face{
     font-family: 'Bulgari';
     src: url ('https://static1.squarespace.com/static/5fc490c3b8467722f1eb7e1b/t/61606f8a8230495ecf5ab0b0/1633709962694/Bulgari.otf ');
     font-weight: regular;
}
 
h2 {
     font-family: 'Bulgari';
}
@font-face{
     font-family: 'Bulgari';
     src: url ('https://static1.squarespace.com/static/5fc490c3b8467722f1eb7e1b/t/61606f8a8230495ecf5ab0b0/1633709962694/Bulgari.otf ');
     font-weight: regular;
}
 
h3 {
     font-family: 'Bulgari';
}

5 hours ago, thedivinesocial said:

Can someone please fix my code too I'm having the same mobile issue! My site is www.thedivinesocial.com

 

@font-face{
     font-family: 'Bulgari';
     src: url ('https://static1.squarespace.com/static/5fc490c3b8467722f1eb7e1b/t/61606f8a8230495ecf5ab0b0/1633709962694/Bulgari.otf ');
     font-weight: regular;
}
 
h1 {
     font-family: 'Bulgari';
}
@font-face{
     font-family: 'Bulgari';
     src: url ('https://static1.squarespace.com/static/5fc490c3b8467722f1eb7e1b/t/61606f8a8230495ecf5ab0b0/1633709962694/Bulgari.otf ');
     font-weight: regular;
}
 
h2 {
     font-family: 'Bulgari';
}
@font-face{
     font-family: 'Bulgari';
     src: url ('https://static1.squarespace.com/static/5fc490c3b8467722f1eb7e1b/t/61606f8a8230495ecf5ab0b0/1633709962694/Bulgari.otf ');
     font-weight: regular;
}
 
h3 {
     font-family: 'Bulgari';
}

Use this new code

@font-face {
    font-family: 'Bulgari';
    src: url('https://static1.squarespace.com/static/5fc490c3b8467722f1eb7e1b/t/61606f8a8230495ecf5ab0b0/1633709962694/Bulgari.otf');
}
h1, h2, h3 {
    font-family: 'Bulgari' !important;
}

On 10/12/2021 at 1:15 AM, sndybear said:

@tuanphan Hi Tuan! Would you be able to help with my code too? 

I want the font to show on my site title and navigation along with the h1. It's currently not showing up on either desktop or mobile. The site is sandradamian.com

 

Your Custom CSS has a syntax error. Can you post all current code in Custom CSS here? We can check easier

19 hours ago, tuanphan said:

Your Custom CSS has a syntax error. Can you post all current code in Custom CSS here? We can check easier

Thank you so much for your help! 

Here is the full code in Custom CSS: 

@font-face {
    font-family: 'Mango';
       src: url('https://static1.squarespace.com/static/599ba7cf15d5db327ad86d5d/t/6164796cc1a31d18d9c0cdcb/1633974636221/Mango.ttf'), url(https://static1.squarespace.com/static/599ba7cf15d5db327ad86d5d/t/61647987c6d0580035320eeb/1633974663996/Mango.woff;),
url('https://static1.squarespace.com/static/599ba7cf15d5db327ad86d5d/t/61647db7e1770d726d80791d/1633975735619/Mango.woff2';)
  }

.header-title-text {
  font-family: 'Mango' !important;
}
.header-nav-item {
  font-family: 'Mango';
}

h1 {font-family: 'Mango';}
Header-branding-title {
font-family: 'Mango';}
Header-nav-title {font-family: 'Mango';} Header-nav-secondary {font-family: 'Mango';}

I'm having the same issue, and have scoured soo many articles and reviewed them again to see if I was missing something before reaching out.... but I'm just stuck. It shows up on all browsers but it system defaults to arial on all mobile devices. If anyone can help, I've shared my css code here:

The font I'm trying to use is Sunflower https://fonts.google.com/specimen/Sunflower and Noto Sans KR https://fonts.google.com/noto/specimen/Noto+Sans+KR

Thank you SO much in advance. I've been scratching my head at this for a couple of weeks now.

//site wide sunflower font//
@font-face {
    font-family: 'Sunflower', sans-serif;
       src: url('https://static1.squarespace.com/static/6151d06bb4fcfe7439d9f3db/t/616c7c877f51613cde10532d/1634499719814/Sunflower-Bold.ttf')
url ('https://static1.squarespace.com/static/6151d06bb4fcfe7439d9f3db/t/616c7c83d92cd96ff0e22f8d/1634499716435/Sunflower-Light.ttf')
url ('https://static1.squarespace.com/static/6151d06bb4fcfe7439d9f3db/t/616c7c8c92d8495ab380e1ff/1634499724772/Sunflower-Medium.ttf');
  }
h1 {font-family: 'Sunflower', sans-serif;}
h2 {font-family: 'Sunflower', sans-serif;}
h4 {font-family: 'Sunflower', sans-serif;}

//site wide noto sans kr font//
@font-face {
    font-family: 'Noto Sans KR', sans-serif;
       src: url('https://static1.squarespace.com/static/6151d06bb4fcfe7439d9f3db/t/6151d0abb4fcfe7439d9f777/1628980562636/NotoSansKR-Regular.otf');
  }
h3 {font-family: 'Noto Sans KR', sans-serif;}
P {font-family: 'Noto Sans KR', sans-serif;}

//web and mobile header font//
.header-nav-item a {
  font-family: 'Sunflower', sans-serif !important;
}
.header-title-text a {
  font-family: 'Sunflower', sans-serif !important;
}
nav.header-menu-nav-list a {
    font-family: 'Sunflower', sans-serif !important;
}
nav.header-title-text a {
    font-family: 'Sunflower', sans-serif !important;
}

//button font//
.sqs-block-button a, [class*='button'], [class*='btn'] {
    font-family: 'Sunflower', sans-serif !important;
}

//contact form font//
.form-wrapper .field-list .title {
  font-family: 'Noto Sans KR', sans-serif;
  font-size: 10px;
  font-weight: medium;
  color: #000000;
  letter-spacing: .03em;
  text-transform: normal;
}

//newsletter font//
newsletter-form-header-title.title {
  font-family: 'Sunflower', sans-serif;
  font-size: 18px;
  font-weight: medium;
  color: #000000;
  letter-spacing: .03em;
  text-transform: normal;
}


// change custom font in list carousel section //
@font-face {
    font-family: 'Sunflower', sans-serif;
    src: url('https://static1.squarespace.com/static/6151d06bb4fcfe7439d9f3db/t/6151d0abb4fcfe7439d9f771/1628980442608/NotoSansKR-Medium.otf');
}
h2.list-item-content__title {
    font-family: 'Sunflower', sans-serif !important;
}
div.list-section-title p {
    font-family: 'Sunflower', sans-serif !important;
}

On 10/18/2021 at 9:43 PM, mims said:

I'm having the same issue, and have scoured soo many articles and reviewed them again to see if I was missing something before reaching out.... but I'm just stuck. It shows up on all browsers but it system defaults to arial on all mobile devices. If anyone can help, I've shared my css code here:

The font I'm trying to use is Sunflower https://fonts.google.com/specimen/Sunflower and Noto Sans KR https://fonts.google.com/noto/specimen/Noto+Sans+KR

Thank you SO much in advance. I've been scratching my head at this for a couple of weeks now.

//site wide sunflower font//
@font-face {
    font-family: 'Sunflower', sans-serif;
       src: url('https://static1.squarespace.com/static/6151d06bb4fcfe7439d9f3db/t/616c7c877f51613cde10532d/1634499719814/Sunflower-Bold.ttf')
url ('https://static1.squarespace.com/static/6151d06bb4fcfe7439d9f3db/t/616c7c83d92cd96ff0e22f8d/1634499716435/Sunflower-Light.ttf')
url ('https://static1.squarespace.com/static/6151d06bb4fcfe7439d9f3db/t/616c7c8c92d8495ab380e1ff/1634499724772/Sunflower-Medium.ttf');
  }
h1 {font-family: 'Sunflower', sans-serif;}
h2 {font-family: 'Sunflower', sans-serif;}
h4 {font-family: 'Sunflower', sans-serif;}

//site wide noto sans kr font//
@font-face {
    font-family: 'Noto Sans KR', sans-serif;
       src: url('https://static1.squarespace.com/static/6151d06bb4fcfe7439d9f3db/t/6151d0abb4fcfe7439d9f777/1628980562636/NotoSansKR-Regular.otf');
  }
h3 {font-family: 'Noto Sans KR', sans-serif;}
P {font-family: 'Noto Sans KR', sans-serif;}

//web and mobile header font//
.header-nav-item a {
  font-family: 'Sunflower', sans-serif !important;
}
.header-title-text a {
  font-family: 'Sunflower', sans-serif !important;
}
nav.header-menu-nav-list a {
    font-family: 'Sunflower', sans-serif !important;
}
nav.header-title-text a {
    font-family: 'Sunflower', sans-serif !important;
}

//button font//
.sqs-block-button a, [class*='button'], [class*='btn'] {
    font-family: 'Sunflower', sans-serif !important;
}

//contact form font//
.form-wrapper .field-list .title {
  font-family: 'Noto Sans KR', sans-serif;
  font-size: 10px;
  font-weight: medium;
  color: #000000;
  letter-spacing: .03em;
  text-transform: normal;
}

//newsletter font//
newsletter-form-header-title.title {
  font-family: 'Sunflower', sans-serif;
  font-size: 18px;
  font-weight: medium;
  color: #000000;
  letter-spacing: .03em;
  text-transform: normal;
}


// change custom font in list carousel section //
@font-face {
    font-family: 'Sunflower', sans-serif;
    src: url('https://static1.squarespace.com/static/6151d06bb4fcfe7439d9f3db/t/6151d0abb4fcfe7439d9f771/1628980442608/NotoSansKR-Medium.otf');
}
h2.list-item-content__title {
    font-family: 'Sunflower', sans-serif !important;
}
div.list-section-title p {
    font-family: 'Sunflower', sans-serif !important;
}

Can you share site url? We can check easier

11 hours ago, tuanphan said:

Can you share site url? We can check easier

linecounseling.squarespace.com 

password: line