Jump to content

Custom fonts not showing

Recommended Posts

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

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date format)
💫 Animated Buttons (Referral URL)
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment

Have you tried adding !important to your css code with font-family?

image.thumb.png.8fe2bcc31b27f3aa18a027ef299629a5.png

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date format)
💫 Animated Buttons (Referral URL)
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

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

image.thumb.png.ade9672b02d7850c49bc1d8d792125fe.png

 

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

image.thumb.png.ade9672b02d7850c49bc1d8d792125fe.png

 

@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

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

image.thumb.png.1f5d3a5fb4b5ba1c17f5907eb8ea125a.png

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

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.