Jump to content

Custom fonts not loading on mobile

Recommended Posts

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

Link to comment

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

About me: I've been a SQSP User for 18 yrs. I was invited to join the Circle when it launched in 2016. I have been a Circle Leader since 2017. I don't work for Squarespace. I value honesty, transparency, diversity and good design ♥.
Work: I founded and run SF.DIGITAL, building Squarespace Extensions to supercharge your commerce website. 
Content: Views and opinions are my own. Links in my posts may refer to SF.DIGITAL products or may be affiliate links.
Forum advice is free. You can thank me by clicking one of the feedback emojis below. Coffee is optional.

Link to comment
  • 3 months later...

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

Link to comment
  • 9 months later...

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!!

Link to comment
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

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 3 weeks later...
  • 2 months later...

@beaibeas

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

1662234832_ScreenShot2021-03-21at2_11_13PM.png.607e45708eb8eb107fcf9a365fad24bc.png

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>

 

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Link to comment
  • 1 month later...

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!!!

Link to comment
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?

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 2 months later...

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;

}

Link to comment
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?

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 2 months later...

@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';}

 


 

Link to comment

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';
}

Link to comment
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;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
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

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
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';}

Link to comment

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;
}
Link to comment
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

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.