Guest Posted November 15, 2019 Share Posted November 15, 2019 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
paul2009 Posted November 15, 2019 Share Posted November 15, 2019 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 MakingWaves, Erin_SQSP and tuanphan 2 1 About: Squarespace Circle Leader since 2017. I value honesty, transparency, diversity and great design ♥.Work: Squarespace Developer and founder of SF Digital, building the features Squarespace didn't include™. Content: Links in my posts may refer to SF Digital products or may be affiliate links. Catch up on all the release notes and announcements 2023 [for Circle members only]. There's a public version here too!If I helped, you can thank me by clicking one of the emojis below. If you prefer, you can buy me a coffee.Improve your online store with our extensions. Link to comment
Guest Posted November 17, 2019 Share Posted November 17, 2019 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 Link to comment
Harry178905 Posted March 12, 2020 Share Posted March 12, 2020 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
Harry178905 Posted March 16, 2020 Share Posted March 16, 2020 @paul2009 any thoughts? Link to comment
Gordita Posted December 16, 2020 Share Posted December 16, 2020 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
tuanphan Posted December 17, 2020 Share Posted December 17, 2020 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 How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
Gordita Posted December 20, 2020 Share Posted December 20, 2020 Yes it’s www.thinkersthinketh.com Thank you! Link to comment
tuanphan Posted December 24, 2020 Share Posted December 24, 2020 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? Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
creedon Posted January 9, 2021 Share Posted January 9, 2021 @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. Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support! Link to comment
beaibeas Posted March 21, 2021 Share Posted March 21, 2021 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 Link to comment
creedon Posted March 21, 2021 Share Posted March 21, 2021 @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> Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support! Link to comment
cassandranicole Posted April 27, 2021 Share Posted April 27, 2021 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
tuanphan Posted May 3, 2021 Share Posted May 3, 2021 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 How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
katrinaoxy Posted July 30, 2021 Share Posted July 30, 2021 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
tuanphan Posted July 30, 2021 Share Posted July 30, 2021 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 How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
sndybear Posted October 11, 2021 Share Posted October 11, 2021 @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
thedivinesocial Posted October 12, 2021 Share Posted October 12, 2021 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
tuanphan Posted October 13, 2021 Share Posted October 13, 2021 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 How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
tuanphan Posted October 13, 2021 Share Posted October 13, 2021 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 How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
sndybear Posted October 13, 2021 Share Posted October 13, 2021 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
Guest Posted October 18, 2021 Share Posted October 18, 2021 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
tuanphan Posted October 20, 2021 Share Posted October 20, 2021 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 How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
Guest Posted October 20, 2021 Share Posted October 20, 2021 11 hours ago, tuanphan said: Can you share site url? We can check easier linecounseling.squarespace.com password: line Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment