atfirstblink Posted December 26, 2022 Share Posted December 26, 2022 I've added a custom font to my website www.atfirstblink.com for heading 1, 2 and 4. I've uploaded ttf, woff and woff2 files for the same. However, while I can see the fonts in action on my chrome browser, I'm unable to see them on my ipad or iphone and safari browser. Can someone help me fix this. Thanks. Link to comment
Beyondspace Posted December 26, 2022 Share Posted December 26, 2022 26 minutes ago, atfirstblink said: I've added a custom font to my website www.atfirstblink.com for heading 1, 2 and 4. I've uploaded ttf, woff and woff2 files for the same. However, while I can see the fonts in action on my chrome browser, I'm unable to see them on my ipad or iphone and safari browser. Can someone help me fix this. Thanks. You can follow the steps on this video to install the custom font on your site: https://recordit.co/xLAoVsFHqC If it still does not work, you can share your site with the protected password (if you have) so I can take a look Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Lightbox Studio pluginIf you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you Link to comment
atfirstblink Posted December 26, 2022 Author Share Posted December 26, 2022 @Beyondspace I've already tried everything in the video. Pls take a look www.atfirstblink.com Link to comment
Beyondspace Posted December 26, 2022 Share Posted December 26, 2022 Have you tried adding !important to your css code with font-family? Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Lightbox Studio pluginIf you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you Link to comment
atfirstblink Posted December 26, 2022 Author Share Posted December 26, 2022 (edited) @Beyondspace worked like a charm I see the new font in safari now. However I still can't see it on my ipad in chrome for some reason, although I do see it on chrome on my laptop! Edited December 26, 2022 by atfirstblink Beyondspace 1 Link to comment
tuanphan Posted December 29, 2022 Share Posted December 29, 2022 On 12/26/2022 at 10:42 PM, atfirstblink said: worked like a charm I see the new font in safari now. However I still can't see it on my ipad in chrome for some reason, although I do see it on chrome on my laptop! I see you used 'Carefreeserif-extralight' however it look likes you haven't declared font-face for this font yet. I see you declared font for Carefree Serif and Sackers Italian Script Std only. Also, you have invalid character in some font file url, it caused font file doesn't exist 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
atfirstblink Posted December 29, 2022 Author Share Posted December 29, 2022 59 minutes ago, tuanphan said: I see you used 'Carefreeserif-extralight' however it look likes you haven't declared font-face for this font yet. I see you declared font for Carefree Serif and Sackers Italian Script Std only. Also, you have invalid character in some font file url, it caused font file doesn't exist @tuanphan I did change the code quite a bit . It looks like this now // Fontkit @font-face { font-family: 'Carefree Serif'; src: url('https://static1.squarespace.com/static/5e92cb1439c6d744195f9c11/t/63abb8a0a43f5e3d84b0e063/1672198304563/CarefreeSerif-Italic.eot'); src: url('CarefreeSerif-Italic.eot?#iefix') format('embedded-opentype'), url('https://static1.squarespace.com/static/5e92cb1439c6d744195f9c11/t/63abb8ad014c952998a623f9/1672198317168/CarefreeSerif-Italic.woff2') format('woff2'), url('https://static1.squarespace.com/static/5e92cb1439c6d744195f9c11/t/63abb8a726cf4a562a895194/1672198311916/CarefreeSerif-Italic.woff') format('woff'), url('CarefreeSerif-Italic.svg#CarefreeSerif-Italic') format('svg'); font-weight: normal; font-style: italic; font-display: swap; } @font-face { font-family: 'Carefree Serif'; src: url('CarefreeSerif-Regular.eothttps://static1.squarespace.com/static/5e92cb1439c6d744195f9c11/t/63abb5ec50cb855955f718e0/1672197613522/CarefreeSerif-Regular.eot'); src: url('CarefreeSerif-Regular.eot?#iefix') format('embedded-opentype'), url('https://static1.squarespace.com/static/5e92cb1439c6d744195f9c11/t/63abb70119e7105dff38b5b8/1672197889612/CarefreeSerif-Regular.woff2') format('woff2'), url('https://static1.squarespace.com/static/5e92cb1439c6d744195f9c11/t/63abb6bb6aca97131a857ff2/1672197819482/CarefreeSerif-Regular.woff') format('woff'), url('CarefreeSerif-Regular.svg#CarefreeSerif-Regular') format('svg'); font-weight: normal; font-style: normal; font-display: swap; } @font-face { font-family: 'Carefree Serif'; src: url('https://static1.squarespace.com/static/5e92cb1439c6d744195f9c11/t/63abb73c4053d730cde75fe6/1672197949081/CarefreeSerif-Extralight.eot'); src: url('CarefreeSerif-Extralight.eot?#iefix') format('embedded-opentype'), url('https://static1.squarespace.com/static/5e92cb1439c6d744195f9c11/t/63abb74bcf07713bc091b1d1/1672197963464/CarefreeSerif-Extralight.woff2') format('woff2'), url('https://static1.squarespace.com/static/5e92cb1439c6d744195f9c11/t/63abb767cf07713bc091b53d/1672197991330/CarefreeSerif-Extralight.woff') format('woff'), url('CarefreeSerif-Extralight.svg#CarefreeSerif-Extralight') format('svg'); font-weight: 200; font-style: normal; font-display: swap; } @font-face { font-family: 'Carefree Serif'; src: url('https://static1.squarespace.com/static/5e92cb1439c6d744195f9c11/t/63abb78b0474e440f6e0d58d/1672198027328/CarefreeSerif-ExtralightItalic.eot'); src: url('CarefreeSerif-ExtralightItalic.eot?#iefix') format('embedded-opentype'), url('https://static1.squarespace.com/static/5e92cb1439c6d744195f9c11/t/63abb7a552e2741a949be8e2/1672198053923/CarefreeSerif-ExtralightItalic.woff2') format('woff2'), url('https://static1.squarespace.com/static/5e92cb1439c6d744195f9c11/t/63abb79a4053d730cde76d1f/1672198042776/CarefreeSerif-ExtralightItalic.woff') format('woff'), url('CarefreeSerif-ExtralightItalic.svg#CarefreeSerif-ExtralightItalic') format('svg'); font-weight: 200; font-style: italic; font-display: swap; } @font-face { font-family: 'Sackers Italian Script Std'; src: url('https://static1.squarespace.com/static/5e92cb1439c6d744195f9c11/t/63abb90ca43f5e3d84b0e7c0/1672198413556/SackersItalianScriptStd.eot'); src: url('SackersItalianScriptStd.eot?#iefix') format('embedded-opentype'), url('https://static1.squarespace.com/static/5e92cb1439c6d744195f9c11/t/63abb91419e7105dff38e36d/1672198420987/SackersItalianScriptStd.woff2') format('woff2'), url('https://static1.squarespace.com/static/5e92cb1439c6d744195f9c11/t/63abb9106aca97131a859931/1672198417013/SackersItalianScriptStd.woff') format('woff'), url('SackersItalianScriptStd.svg#SackersItalianScriptStd') format('svg'); font-weight: 500; font-style: normal; font-display: swap; } // Custom Fonts Implement: h1, h2 {font-family: 'CarefreeSerif-Regular'!important; font-weight: normal; font-style: normal;} h1.BlogItem-title { font-size: 50px ; font-family:'CarefreeSerif-extralight'!important; font-weight: 200; font-style: normal;} h2.Index-gallery-item-content-heading { font-family: 'Carefreeserif-extralight'!important; font-size: 65px; font-weight: 200; font-style: normal; } h4 { color:#f6f3ef; font-family: SackersItalianScriptStd !important; font-weight: 500; font-style: normal; font-size:33px; letter-spacing: 0em; line-height: 0em; margin-bottom:10px; text-align: center;} h5 { color:#202020; font-family: SackersItalianScriptStd !important; font-weight: 500; font-style: normal; font-size:33px; letter-spacing: 0em; line-height: 0em; margin-bottom:10px; text-align: center;} h6 { color:#202020; font-family: Archivo Narrow !important; font-weight: 700; font-style: normal; font-size: 14px; letter-spacing: 1.5px; line-height: 25.2px; margin-bottom: 10px; text-transform: uppercase; text-align: center;} // Link to comment
tuanphan Posted December 30, 2022 Share Posted December 30, 2022 src: url(...); ... need real url, but on your code, some url doesn't exist. If you have 1 link only, just declare 1 src only @font-face { font-family: 'Carefree Serif Italic'; src: url('https://static1.squarespace.com/static/5e92cb1439c6d744195f9c11/t/63abb8a0a43f5e3d84b0e063/1672198304563/CarefreeSerif-Italic.eot'); font-weight: normal; font-style: italic; font-display: swap; } @font-face { font-family: 'Carefree Serif'; src: url('https://static1.squarespace.com/static/5e92cb1439c6d744195f9c11/t/63abb5ec50cb855955f718e0/1672197613522/CarefreeSerif-Regular.eot'); font-weight: normal; font-style: normal; font-display: swap; } @font-face { font-family: 'Carefree Serif Extralight'; src: url('https://static1.squarespace.com/static/5e92cb1439c6d744195f9c11/t/63abb73c4053d730cde75fe6/1672197949081/CarefreeSerif-Extralight.eot'); font-weight: 200; font-style: normal; font-display: swap; } @font-face { font-family: 'Carefree Serif ExtralightItalic'; src: url('https://static1.squarespace.com/static/5e92cb1439c6d744195f9c11/t/63abb78b0474e440f6e0d58d/1672198027328/CarefreeSerif-ExtralightItalic.eot'); font-weight: 200; font-style: italic; font-display: swap; } @font-face { font-family: 'Sackers Italian Script Std'; src: url('https://static1.squarespace.com/static/5e92cb1439c6d744195f9c11/t/63abb90ca43f5e3d84b0e7c0/1672198413556/SackersItalianScriptStd.eot'); font-weight: 500; font-style: normal; font-display: swap; } Also, do you have another font format? eot runs on some browser only Reference: https://www.w3schools.com/cssref/css3_pr_font-face_rule.php 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
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment