Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 1

Custom Fonts (webfonts) not displaying on Safari and iOS


Alexandre_B

Question

  • Answers 8
  • Created
  • Last Reply

Top Posters For This Question

8 answers to this question

Recommended Posts

  • 0

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

 

Link to comment
  • 0

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
  • 0
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.

sf-digital-signature-logo-email145.png.46606a2288a2847f44d81b9b7b58f3a5.png
Hi! I'm Paul, an independent Squarespace Consultant since 2007 and founder of SF Digital, building the features that Squarespace didn't include. Our mini-extensions allow you to pick dates in any format, show prices in other currencies, take orders without payment or improve your cartI value honesty, integrity, transparency and respect . Links in my posts may refer to SF Digital products or may be affiliate links.

Link to comment
  • 0

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
  • 0
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.

sf-digital-signature-logo-email145.png.46606a2288a2847f44d81b9b7b58f3a5.png
Hi! I'm Paul, an independent Squarespace Consultant since 2007 and founder of SF Digital, building the features that Squarespace didn't include. Our mini-extensions allow you to pick dates in any format, show prices in other currencies, take orders without payment or improve your cartI value honesty, integrity, transparency and respect . Links in my posts may refer to SF Digital products or may be affiliate links.

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

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

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