Alexandre_B Posted December 30, 2020 Share Posted December 30, 2020 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? Link to comment
tuanphan Posted January 5, 2021 Share Posted January 5, 2021 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 How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
GlynMusica Posted January 20, 2021 Share Posted January 20, 2021 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 S74 1 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
paul2009 Posted January 20, 2021 Share Posted January 20, 2021 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. About: Squarespace Circle Leader since 2017. I value honesty, transparency, diversity and great design ♥.Work: Squarespace Developer and founder of SF Digital, building the features Squarespace didn't include™. Content: Links in my posts may refer to SF Digital products or may be affiliate links. Catch up on all the release notes and announcements 2023 [for Circle members only]. There's a public version here too!If I helped, you can thank me by clicking one of the emojis below. If you prefer, you can buy me a coffee.Improve your online store with our extensions. Link to comment
GlynMusica Posted January 20, 2021 Share Posted January 20, 2021 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
paul2009 Posted January 20, 2021 Share Posted January 20, 2021 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. About: Squarespace Circle Leader since 2017. I value honesty, transparency, diversity and great design ♥.Work: Squarespace Developer and founder of SF Digital, building the features Squarespace didn't include™. Content: Links in my posts may refer to SF Digital products or may be affiliate links. Catch up on all the release notes and announcements 2023 [for Circle members only]. There's a public version here too!If I helped, you can thank me by clicking one of the emojis below. If you prefer, you can buy me a coffee.Improve your online store with our extensions. Link to comment
HarryMeakin Posted January 25, 2021 Share Posted January 25, 2021 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
HarryMeakin Posted January 25, 2021 Share Posted January 25, 2021 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; } Link to comment
HarryMeakin Posted January 25, 2021 Share Posted January 25, 2021 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
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment