Jump to content

Custom Fonts (webfonts) not displaying on Safari and iOS

Recommended Posts

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

 

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
  • 3 weeks later...

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

We provide digital marketing services for businesses that need exposure/sales from search and social media networks. We also build incredibly fast and well optimised multi-language Square Space websites.
Digital Marketing | Marketing Digitale

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

Custom Font Support by Browser

 

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

Me: I'm Paul, a SQSP user for >18 yrs & Circle Leader since 2017. I value honesty, transparency, diversity and good design ♥.
Work: Founder of SF.DIGITAL. We provide high quality original extensions to supercharge your Squarespace website. 
Content: Views and opinions are my own. Links in my posts may refer to my own SF.DIGITAL products or may be affiliate links.
Forum advice is completely free. You can thank me by selecting a feedback emoji. Buying a coffee is generous but optional.

Would you like your customers to be able to mark their favourite products in your Squarespace store?

Link to comment

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.

We provide digital marketing services for businesses that need exposure/sales from search and social media networks. We also build incredibly fast and well optimised multi-language Square Space websites.
Digital Marketing | Marketing Digitale

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

Me: I'm Paul, a SQSP user for >18 yrs & Circle Leader since 2017. I value honesty, transparency, diversity and good design ♥.
Work: Founder of SF.DIGITAL. We provide high quality original extensions to supercharge your Squarespace website. 
Content: Views and opinions are my own. Links in my posts may refer to my own SF.DIGITAL products or may be affiliate links.
Forum advice is completely free. You can thank me by selecting a feedback emoji. Buying a coffee is generous but optional.

Would you like your customers to be able to mark their favourite products in your Squarespace store?

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

Link to comment

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

 

 

Screenshot 2021-01-25 at 16.06.27.png

Screenshot 2021-01-25 at 16.06.45.png

Link to comment

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

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.