Custom Fonts (webfonts) not displaying on Safari and iOS

Site URL: https://www.alexandrebustamante.com

I've uploaded WOFF custom webfonts to my website (it's password protected, just enter bustabusta if you need to view it), but they are not displaying on Safari or iOS (or Chrome on iOS). It works fine on Chrome and Firefox on Desktop.

The template I'm using is Zion - can anyone help me clarify what is happening?

Your font-face code is invalid. Use this new code

@font-face {
    font-family: 'NeoRetroDraw';
    src: url(https://static1.squarespace.com/static/5f1b9f2f34c4503c6738c796/t/5fecc0e9fc547e49dd2f26e6/1609351401344/NEORD___-webfont.woff);
}
@font-face {
    font-family: 'NeoRetroShadow';
    src: url(https://static1.squarespace.com/static/5f1b9f2f34c4503c6738c796/t/5fecc0f7e1d4c5406d0d72bd/1609351415751/NEORS___-webfont.woff);
}
@font-face {
    font-family: 'NeoRetroFill';
    src: url(https://static1.squarespace.com/static/5f1b9f2f34c4503c6738c796/t/5fecc0efcd896d745924ab9b/1609351407792/NEORF___-webfont.woff);
}
h1 {
    font-family: 'NeoRetroDraw' !important;
    letter-spacing: .05em;
}
h2 {
    font-family: 'NeoRetroShadow' !important;
}
h3, h4, p, .header-nav-item a {
    font-family: 'NeoRetroFill' !important;
}
.header-title-text, .header-menu-nav-item--collection {
    font-family: 'NeoRetroDraw' !important;
}
.portfolio-hover-item-content {
    font-family: 'NeoRetroShadow' !important;
    letter-spacing: .5px;
    font-size: 40px;
}

@media screen and (max-width: 1511px) and (min-width:0) and (orientation:portrait) {
    [data-collection-type^="portfolio"] .item-pagination-title {
        font-size:4vw;
    }
}

Remember to put all the webfont versions in your code. Apple is a pain, I have this as a bookmark as it answers all, and works too!

https://www.pagecloud.com/blog/how-to-add-custom-fonts-to-any-website

3 minutes ago, GlynMusica said:

I have this as a bookmark as it answers all

Note that the linked article is now quite dated (2018) so the compatibility information is no longer correct. WOFF2 is now supported by all modern browsers and offers smaller file sizes and better performance.

For Squarespace specific guidance about custom fonts, check out our guide: Adding Custom Fonts to Squarespace.

Thanks for this precision Paul. Am I right in saying that while most modern browsers will support WOFF, that the inclusions mentioned in this article will mean that some of the earlier apple devices will still be able to render fonts and so there is no harm in including them? I had a case in the last 6 months where I had this issue come up, which is why I am asking you.

To the poster and if they are using Google Analytics, my advice would be to check under OS and Browsers to find out how people are connecting.

G.

16 minutes ago, GlynMusica said:

Am I right in saying that while most modern browsers will support WOFF, that the inclusions mentioned in this article will mean that some of the earlier apple devices will still be able to render fonts and so there is no harm in including them?

As you said, it will depend on the browsers that your visitors are using. Some will take the view that visitors should use a modern browser (and prompt visitors accordingly if they don't) and others will need to provide support for older browsers. If the latter, it's worth including some of the older formats too if they are included with your font licence.

On 1/5/2021 at 10:53 AM, tuanphan said:

Your font-face code is invalid. Use this new code

@font-face {
    font-family: 'NeoRetroDraw';
    src: url(https://static1.squarespace.com/static/5f1b9f2f34c4503c6738c796/t/5fecc0e9fc547e49dd2f26e6/1609351401344/NEORD___-webfont.woff);
}
@font-face {
    font-family: 'NeoRetroShadow';
    src: url(https://static1.squarespace.com/static/5f1b9f2f34c4503c6738c796/t/5fecc0f7e1d4c5406d0d72bd/1609351415751/NEORS___-webfont.woff);
}
@font-face {
    font-family: 'NeoRetroFill';
    src: url(https://static1.squarespace.com/static/5f1b9f2f34c4503c6738c796/t/5fecc0efcd896d745924ab9b/1609351407792/NEORF___-webfont.woff);
}
h1 {
    font-family: 'NeoRetroDraw' !important;
    letter-spacing: .05em;
}
h2 {
    font-family: 'NeoRetroShadow' !important;
}
h3, h4, p, .header-nav-item a {
    font-family: 'NeoRetroFill' !important;
}
.header-title-text, .header-menu-nav-item--collection {
    font-family: 'NeoRetroDraw' !important;
}
.portfolio-hover-item-content {
    font-family: 'NeoRetroShadow' !important;
    letter-spacing: .5px;
    font-size: 40px;
}

@media screen and (max-width: 1511px) and (min-width:0) and (orientation:portrait) {
    [data-collection-type^="portfolio"] .item-pagination-title {
        font-size:4vw;
    }
}

 

I'm having a similar problem – I have uploaded both font file types and still no luck on other browsers. 

https://goldfish-hyperboloid-b6rj.squarespace.com/home
password: bridgendathletics

Site URL: https://goldfish-hyperboloid-b6rj.squarespace.com/home

This is the code I am using for custom font, which is working fine on some browsers but is replaced by a serif on others. 
Please advise. password to site is: bridgendathletics

@font-face {
font-family: 'MonoSpec-SemiBold' !important;
  src: url(https://static1.squarespace.com/static/6005a5e6e8c063189b6baf41/t/600ed5078b37961aa1911909/1611584775642/monospec-semibold-webfont.woff);
  src:   url(https://static1.squarespace.com/static/6005a5e6e8c063189b6baf41/t/600ed586a2383a5eba79024d/1611584902142/monospec-semibold-webfont.woff2);
  src:
url(https://static1.squarespace.com/static/6005a5e6e8c063189b6baf41/t/600ed9899dfc5a5337fa6773/1611585929994/monospec-semibold-webfont.eot);
  src:
url(https://static1.squarespace.com/static/6005a5e6e8c063189b6baf41/t/600ed8b4bf04aa2bc2d5e7bf/1611585716659/monospec-semibold-webfont.ttf)
}
h1 {
font-family: 'MonoSpec-SemiBold'!important;
}
h3 {
font-family: 'MonoSpec-SemiBold'!important;
}

sorted!

@font-face {
  font-family:'MonoSpec-SemiBold';
src: url(//static1.squarespace.com/static/6005a5e6e8c063189b6baf41/t/600ed9899dfc5a5337fa6773/1611585929994/monospec-semibold-webfont.eot),
  
/* IE6-IE8 */ url(//static1.squarespace.com/static/6005a5e6e8c063189b6baf41/t/600ed586a2383a5eba79024d/1611584902142/monospec-semibold-webfont.woff2),

/* Super Modern Browsers */ url(//static1.squarespace.com/static/6005a5e6e8c063189b6baf41/t/600ed5078b37961aa1911909/1611584775642/monospec-semibold-webfont.woff),

/* Pretty Modern Browsers */ url(//static1.squarespace.com/static/6005a5e6e8c063189b6baf41/t/600ed8b4bf04aa2bc2d5e7bf/1611585716659/monospec-semibold-webfont.ttf); }