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 Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) 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. 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
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. 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
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