Custom fonts not showing

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.

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 I've already tried everything in the video. Pls take a look www.atfirstblink.com

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

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

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

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

//

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