MichalGrzymski Posted January 19, 2022 Share Posted January 19, 2022 Site URL: https://www.michalgrzymski.com Hi everyone! I have a problem - my custom font Inter is showing only on desktop (all browsers) and not on mobile. I have read many threads on this forum and nothing helped. My website address is michalgrzymski.com The Inter font is used for everything except the body text. Any idea what to do? 😇 Custom CSS code: @font-face { font-family: 'Inter'; src: url('https://static1.squarespace.com/static/5d4b2a03a0186000010f5622/t/61e87bfcd7e554019945eb90/1642626044252/Inter.woff2') format('woff2'), /* Super Modern Browsers */ url('https://static1.squarespace.com/static/5d4b2a03a0186000010f5622/t/61e87bf767faf14f2c0711d3/1642626039316/Inter.woff') format('woff'), /* Pretty Modern Browsers */ url('https://static1.squarespace.com/static/5d4b2a03a0186000010f5622/t/61e8932f1e9b475edc6664af/1642631984266/Inter.eot'), url('https://static1.squarespace.com/static/5d4b2a03a0186000010f5622/t/61e832a0060c2d3f4ea7fc5e/1642607266623/Inter.ttf') format('truetype'), /* Safari, Android, iOS */; } .sqs-block-image .design-layout-collage .image-title p { font-family: 'Inter';} .sqs-block-image .design-layout-collage .image-subtitle p{ font-family: 'Yantramanav';} h1 { font-family: 'Inter'; font-weight: 700; font-style: bold; font-size: 72px; letter-spacing: 0.1em; text-transform: uppercase; line-height: 1em } h2 { font-family: 'Inter'; font-weight: 450; font-style: Regular; font-size: 33px; letter-spacing: 0.1em; text-transform: uppercase; line-height: 1em } h3 { font-family: 'Inter'; font-weight: 400; font-style: Regular; font-size: 18px; letter-spacing: 0.1em; text-transform: uppercase; line-height: 1em } body { font-family: 'Yantramanav'; font-weight: 400; font-style: Normal; font-size: 16px; letter-spacing: 0em; text-transform: None; line-height: 2em } .sqs-block-button .sqs-block-button-element { font-family: 'Inter'; } .sqs-block-image .image-block-outer-wrapper.design-layout-collage .image-button-wrapper .image-button a { font-family: 'Inter'; } .Header-nav { font-family: 'Inter'; } .has-site-title .Header-branding{ font-family: 'Inter'; } Link to comment
Beyondspace Posted January 19, 2022 Share Posted January 19, 2022 13 minutes ago, MichalGrzymski said: Site URL: https://www.michalgrzymski.com Hi everyone! I have a problem - my custom font Inter is showing only on desktop (all browsers) and not on mobile. I have read many threads on this forum and nothing helped. My website address is michalgrzymski.com The Inter font is used for everything except the body text. Any idea what to do? 😇 Custom CSS code: @font-face { font-family: 'Inter'; src: url('https://static1.squarespace.com/static/5d4b2a03a0186000010f5622/t/61e87bfcd7e554019945eb90/1642626044252/Inter.woff2') format('woff2'), /* Super Modern Browsers */ url('https://static1.squarespace.com/static/5d4b2a03a0186000010f5622/t/61e87bf767faf14f2c0711d3/1642626039316/Inter.woff') format('woff'), /* Pretty Modern Browsers */ url('https://static1.squarespace.com/static/5d4b2a03a0186000010f5622/t/61e8932f1e9b475edc6664af/1642631984266/Inter.eot'), url('https://static1.squarespace.com/static/5d4b2a03a0186000010f5622/t/61e832a0060c2d3f4ea7fc5e/1642607266623/Inter.ttf') format('truetype'), /* Safari, Android, iOS */; } .sqs-block-image .design-layout-collage .image-title p { font-family: 'Inter';} .sqs-block-image .design-layout-collage .image-subtitle p{ font-family: 'Yantramanav';} h1 { font-family: 'Inter'; font-weight: 700; font-style: bold; font-size: 72px; letter-spacing: 0.1em; text-transform: uppercase; line-height: 1em } h2 { font-family: 'Inter'; font-weight: 450; font-style: Regular; font-size: 33px; letter-spacing: 0.1em; text-transform: uppercase; line-height: 1em } h3 { font-family: 'Inter'; font-weight: 400; font-style: Regular; font-size: 18px; letter-spacing: 0.1em; text-transform: uppercase; line-height: 1em } body { font-family: 'Yantramanav'; font-weight: 400; font-style: Normal; font-size: 16px; letter-spacing: 0em; text-transform: None; line-height: 2em } .sqs-block-button .sqs-block-button-element { font-family: 'Inter'; } .sqs-block-image .image-block-outer-wrapper.design-layout-collage .image-button-wrapper .image-button a { font-family: 'Inter'; } .Header-nav { font-family: 'Inter'; } .has-site-title .Header-branding{ font-family: 'Inter'; } I found the font-family is already Inter on mobile display, Can you take some screenshots? Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Lightbox Studio pluginIf you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you Link to comment
tuanphan Posted January 20, 2022 Share Posted January 20, 2022 1 hour ago, MichalGrzymski said: Site URL: https://www.michalgrzymski.com Hi everyone! I have a problem - my custom font Inter is showing only on desktop (all browsers) and not on mobile. I have read many threads on this forum and nothing helped. My website address is michalgrzymski.com The Inter font is used for everything except the body text. Any idea what to do? 😇 Custom CSS code: @font-face { font-family: 'Inter'; src: url('https://static1.squarespace.com/static/5d4b2a03a0186000010f5622/t/61e87bfcd7e554019945eb90/1642626044252/Inter.woff2') format('woff2'), /* Super Modern Browsers */ url('https://static1.squarespace.com/static/5d4b2a03a0186000010f5622/t/61e87bf767faf14f2c0711d3/1642626039316/Inter.woff') format('woff'), /* Pretty Modern Browsers */ url('https://static1.squarespace.com/static/5d4b2a03a0186000010f5622/t/61e8932f1e9b475edc6664af/1642631984266/Inter.eot'), url('https://static1.squarespace.com/static/5d4b2a03a0186000010f5622/t/61e832a0060c2d3f4ea7fc5e/1642607266623/Inter.ttf') format('truetype'), /* Safari, Android, iOS */; } .sqs-block-image .design-layout-collage .image-title p { font-family: 'Inter';} .sqs-block-image .design-layout-collage .image-subtitle p{ font-family: 'Yantramanav';} h1 { font-family: 'Inter'; font-weight: 700; font-style: bold; font-size: 72px; letter-spacing: 0.1em; text-transform: uppercase; line-height: 1em } h2 { font-family: 'Inter'; font-weight: 450; font-style: Regular; font-size: 33px; letter-spacing: 0.1em; text-transform: uppercase; line-height: 1em } h3 { font-family: 'Inter'; font-weight: 400; font-style: Regular; font-size: 18px; letter-spacing: 0.1em; text-transform: uppercase; line-height: 1em } body { font-family: 'Yantramanav'; font-weight: 400; font-style: Normal; font-size: 16px; letter-spacing: 0em; text-transform: None; line-height: 2em } .sqs-block-button .sqs-block-button-element { font-family: 'Inter'; } .sqs-block-image .image-block-outer-wrapper.design-layout-collage .image-button-wrapper .image-button a { font-family: 'Inter'; } .Header-nav { font-family: 'Inter'; } .has-site-title .Header-branding{ font-family: 'Inter'; } Use this new font-face code @font-face { font-family: 'Inter'; src: url('https://static1.squarespace.com/static/5d4b2a03a0186000010f5622/t/61e87bfcd7e554019945eb90/1642626044252/Inter.woff2') format('woff2');/* Super Modern Browsers */ src: url('https://static1.squarespace.com/static/5d4b2a03a0186000010f5622/t/61e87bf767faf14f2c0711d3/1642626039316/Inter.woff') format('woff'),/* Pretty Modern Browsers */ url('https://static1.squarespace.com/static/5d4b2a03a0186000010f5622/t/61e8932f1e9b475edc6664af/1642631984266/Inter.eot') format('embedded-opentype'),url('https://static1.squarespace.com/static/5d4b2a03a0186000010f5622/t/61e832a0060c2d3f4ea7fc5e/1642607266623/Inter.ttf') format('truetype');/* Safari, Android, iOS */ } MichalGrzymski 1 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
MichalGrzymski Posted January 20, 2022 Author Share Posted January 20, 2022 @tuanphan thank you so much, the custom font now shows up on mobile 🙂 Can you tell me what was changed in the code? Because I can't see 😅 Link to comment
MichalGrzymski Posted January 20, 2022 Author Share Posted January 20, 2022 @bangank36 do you mean it shows Inter font on your mobile device? Anyways, tuznphan's code seems to have fixed the issue, thanks anyways! 🙂 Beyondspace 1 Link to comment
tuanphan Posted January 21, 2022 Share Posted January 21, 2022 20 hours ago, MichalGrzymski said: @tuanphan thank you so much, the custom font now shows up on mobile 🙂 Can you tell me what was changed in the code? Because I can't see 😅 You can compared 2 codes, you will see the difference. I used 2 src, instead of 1 src 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
alberto10 Posted April 1 Share Posted April 1 (edited) @tuanphan how do you generate that second src code? I am having the same issue but with a different font (Gotham-light) Edited April 1 by alberto10 Link to comment
AIW Posted April 4 Share Posted April 4 (edited) @MichalGrzymski I'm having the same issue -- my custom font isn't working on mobile devices. For your code to work, did you have to convert your font type to the different formats/ extensions (.woff2, .eot, etc) and upload each separately into your css custom files, or did you simply change the file extension as it was written in your css? I have an .otf font file, but I'm not sure if I need to convert it two multiple different file types (.tff, .woff2, etc) or if I can just change it to mimic your css, and swap the url with my own. @tuanphan you may be able to weigh in here too? My site is www.alliswellstudios.com Original code was: @font-face { font-family: 'GTAmericaBold'; src: url('https://static1.squarespace.com/static/640254492f4ddd03f446b1a3/t/6423560b2409b21c0435b6a4/1680037387766/GT-America-Standard-Bold.otf');} h1, h2, h3, h4 { font-family: 'GTAmericaBold' !important;} I tried using the font converter at transfonter.org and uploaded each file separately, but it still doesn't seem to be working at all, now on any browser. My font "GT America Bold" was originally an .otf file, but I converted it to other formats as recommended. My updated (but still broken!) code: @font-face { font-family: 'GTAmericaBold'; src: url('https://static1.squarespace.com/static/640254492f4ddd03f446b1a3/t/642ca443e0a9253d2e5ade2a/1680647235731/GTAmerica-Bold.eot')format('embedded-opentype');/* IE9 Compat Modes */ src: url('https://static1.squarespace.com/static/640254492f4ddd03f446b1a3/t/642ca4814b72d81ef77f491f/1680647297139/GTAmerica-Bold.woff2')format('woff2'),/* Super Modern Browsers */ url('https://static1.squarespace.com/static/640254492f4ddd03f446b1a3/t/642ca4b6f479ec0d40f87bc6/1680647350772/GTAmerica-Bold.woff')format('woff'), /* Pretty Modern Browsers */ url('https://static1.squarespace.com/static/640254492f4ddd03f446b1a3/t/642ca4d8bc7bf42192b580dd/1680647384441/GTAmerica-Bold.ttf') format('truetype'),/* Safari, Android, iOS */ } h1, h2, h3, h4 { font-family: 'GTAmericaBold' !important;} Edited April 5 by AIW Link to comment
tuanphan Posted April 8 Share Posted April 8 On 4/5/2023 at 5:22 AM, AIW said: @MichalGrzymski I'm having the same issue -- my custom font isn't working on mobile devices. For your code to work, did you have to convert your font type to the different formats/ extensions (.woff2, .eot, etc) and upload each separately into your css custom files, or did you simply change the file extension as it was written in your css? I have an .otf font file, but I'm not sure if I need to convert it two multiple different file types (.tff, .woff2, etc) or if I can just change it to mimic your css, and swap the url with my own. @tuanphan you may be able to weigh in here too? My site is www.alliswellstudios.com Original code was: @font-face { font-family: 'GTAmericaBold'; src: url('https://static1.squarespace.com/static/640254492f4ddd03f446b1a3/t/6423560b2409b21c0435b6a4/1680037387766/GT-America-Standard-Bold.otf');} h1, h2, h3, h4 { font-family: 'GTAmericaBold' !important;} I tried using the font converter at transfonter.org and uploaded each file separately, but it still doesn't seem to be working at all, now on any browser. My font "GT America Bold" was originally an .otf file, but I converted it to other formats as recommended. My updated (but still broken!) code: @font-face { font-family: 'GTAmericaBold'; src: url('https://static1.squarespace.com/static/640254492f4ddd03f446b1a3/t/642ca443e0a9253d2e5ade2a/1680647235731/GTAmerica-Bold.eot')format('embedded-opentype');/* IE9 Compat Modes */ src: url('https://static1.squarespace.com/static/640254492f4ddd03f446b1a3/t/642ca4814b72d81ef77f491f/1680647297139/GTAmerica-Bold.woff2')format('woff2'),/* Super Modern Browsers */ url('https://static1.squarespace.com/static/640254492f4ddd03f446b1a3/t/642ca4b6f479ec0d40f87bc6/1680647350772/GTAmerica-Bold.woff')format('woff'), /* Pretty Modern Browsers */ url('https://static1.squarespace.com/static/640254492f4ddd03f446b1a3/t/642ca4d8bc7bf42192b580dd/1680647384441/GTAmerica-Bold.ttf') format('truetype'),/* Safari, Android, iOS */ } h1, h2, h3, h4 { font-family: 'GTAmericaBold' !important;} It looks like you removed these code. Do you still need help? 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
ghdesigns Posted April 12 Share Posted April 12 I also cannot get my custom font to appear on mobile devices, but it looks correct on the mobile view when i am previewing my site from desktop. here is the code i have so far: ghdesignstudio.com pw is: ghdesigns1 @font-face { font-family: INTEGRAL CF BOLD; src: url(https://static1.squarespace.com/static/6419cc23b21ce56331cae1f5/t/6436c09e5f63fc294fd51d83/1681309854163/IntegralCF-Bold.eot); } @font-face { font-family: GLAUKON REGULAR; src: url(https://static1.squarespace.com/static/6419cc23b21ce56331cae1f5/t/6436c08223b5623ded9dc7c8/1681309826676/Glaukon-Regular.eot); } @font-face { font-family: GLAUKON ITALIC; src: url(https://static1.squarespace.com/static/6419cc23b21ce56331cae1f5/t/6436c089b69160779740109a/1681309833731/Glaukon-Italic.eot); }h1 { font-family: 'INTEGRAL CF'; } h2 { font-family: 'INTEGRAL CF'; } h3 {ont-family: GLAUKON REGULAR; src: url(https://static1.squarespace.com/static/6419cc23b21ce56331cae1f5/t/6436c08223b5623ded9dc7c8/1681309826676/Glaukon-Regular.eot) } h4 { font-family: 'GLAUKON'; } .sqsrte-large { font-family: 'GLAUKON REGULAR'; } p { font-family: 'GLAUKON'; } .sqsrte-small { font-family: 'GLAUKON'; }.sqs-block-button a, [class*='button'], [class*='btn'] { font-family: 'INTEGRAL CF' !important; }@font-face { font-family: ‘INTEGRAL CF; src: url(https://static1.squarespace.com/static/6419cc23b21ce56331cae1f5/t/6436c09e5f63fc294fd51d83/1681309854163/IntegralCF-Bold.eot') format('woff2');/* Super Modern Browsers */ src: url('https://static1.squarespace.com/static/6419cc23b21ce56331cae1f5/t/6436c09e5f63fc294fd51d83/1681309854163/IntegralCF-Bold.eot') format('woff'),/* Pretty Modern Browsers */ url('https://static1.squarespace.com/static/5d4b2a03a0186000010f5622/t/61e8932f1e9b475edc6664af/1642631984266/Inter.eot') format('embedded-opentype'),url('https://static1.squarespace.com/static/5d4b2a03a0186000010f5622/t/61e832a0060c2d3f4ea7fc5e/1642607266623/Inter.ttf') format('truetype');/* Safari, Android, iOS */} Link to comment
tuanphan Posted April 15 Share Posted April 15 On 4/12/2023 at 10:38 PM, ghdesigns said: I also cannot get my custom font to appear on mobile devices, but it looks correct on the mobile view when i am previewing my site from desktop. here is the code i have so far: ghdesignstudio.com pw is: ghdesigns1 @font-face { font-family: INTEGRAL CF BOLD; src: url(https://static1.squarespace.com/static/6419cc23b21ce56331cae1f5/t/6436c09e5f63fc294fd51d83/1681309854163/IntegralCF-Bold.eot); } @font-face { font-family: GLAUKON REGULAR; src: url(https://static1.squarespace.com/static/6419cc23b21ce56331cae1f5/t/6436c08223b5623ded9dc7c8/1681309826676/Glaukon-Regular.eot); } @font-face { font-family: GLAUKON ITALIC; src: url(https://static1.squarespace.com/static/6419cc23b21ce56331cae1f5/t/6436c089b69160779740109a/1681309833731/Glaukon-Italic.eot); }h1 { font-family: 'INTEGRAL CF'; } h2 { font-family: 'INTEGRAL CF'; } h3 {ont-family: GLAUKON REGULAR; src: url(https://static1.squarespace.com/static/6419cc23b21ce56331cae1f5/t/6436c08223b5623ded9dc7c8/1681309826676/Glaukon-Regular.eot) } h4 { font-family: 'GLAUKON'; } .sqsrte-large { font-family: 'GLAUKON REGULAR'; } p { font-family: 'GLAUKON'; } .sqsrte-small { font-family: 'GLAUKON'; }.sqs-block-button a, [class*='button'], [class*='btn'] { font-family: 'INTEGRAL CF' !important; }@font-face { font-family: ‘INTEGRAL CF; src: url(https://static1.squarespace.com/static/6419cc23b21ce56331cae1f5/t/6436c09e5f63fc294fd51d83/1681309854163/IntegralCF-Bold.eot') format('woff2');/* Super Modern Browsers */ src: url('https://static1.squarespace.com/static/6419cc23b21ce56331cae1f5/t/6436c09e5f63fc294fd51d83/1681309854163/IntegralCF-Bold.eot') format('woff'),/* Pretty Modern Browsers */ url('https://static1.squarespace.com/static/5d4b2a03a0186000010f5622/t/61e8932f1e9b475edc6664af/1642631984266/Inter.eot') format('embedded-opentype'),url('https://static1.squarespace.com/static/5d4b2a03a0186000010f5622/t/61e832a0060c2d3f4ea7fc5e/1642607266623/Inter.ttf') format('truetype');/* Safari, Android, iOS */} All three fonts don't work or which font? 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
tegancann Posted April 18 Share Posted April 18 Hello, I'm also having the same issue! One of my custom fonts isn't working on mobile for some reason. Everything appears to be working in the Squarespace editor just fine but when I check my phone they're not the same. All of the Termina Demi sections don't work on mobile except for the mobile menu which I added css for. // Fonts // @font-face { font-family: Termina Demi; src: url('https://static1.squarespace.com/static/63f8fd55ee545172d652c8a7/t/63fe359b332fe92ef76507e6/1677604251588/Termina-Demi.woff'); } @font-face { font-family: Mundial Regular; src: url(https://static1.squarespace.com/static/63f8fd55ee545172d652c8a7/t/63fe35cc0e256a7c9b9e5165/1677604300568/Mundial-Regular.woff); } @font-face { font-family: Mundial Bold; src: url(https://static1.squarespace.com/static/63f8fd55ee545172d652c8a7/t/63fe35c45a90c93cc40d48f7/1677604292850/Mundial-Bold.woff); } h1 { font-family: 'Termina Demi'; text-transform: uppercase; font-size: 40px; } h2 { font-family: 'Termina Demi'; text-transform: uppercase; font-size: 27px; } h3 { font-family: 'Mundial Bold'; font-size: 20px; text-transform: uppercase; } .sqsrte-large { font-family: 'Mundial Regular'; font-size: 22px; line-height: 2rem; } p { font-family: 'Mundial Regular'; font-size: 17px; } .sqsrte-small { font-family: 'Mundial Bold'; font-size: 17px; } Link to comment
tuanphan Posted April 22 Share Posted April 22 On 4/18/2023 at 10:05 PM, tegancann said: Hello, I'm also having the same issue! One of my custom fonts isn't working on mobile for some reason. Everything appears to be working in the Squarespace editor just fine but when I check my phone they're not the same. All of the Termina Demi sections don't work on mobile except for the mobile menu which I added css for. // Fonts // @font-face { font-family: Termina Demi; src: url('https://static1.squarespace.com/static/63f8fd55ee545172d652c8a7/t/63fe359b332fe92ef76507e6/1677604251588/Termina-Demi.woff'); } @font-face { font-family: Mundial Regular; src: url(https://static1.squarespace.com/static/63f8fd55ee545172d652c8a7/t/63fe35cc0e256a7c9b9e5165/1677604300568/Mundial-Regular.woff); } @font-face { font-family: Mundial Bold; src: url(https://static1.squarespace.com/static/63f8fd55ee545172d652c8a7/t/63fe35c45a90c93cc40d48f7/1677604292850/Mundial-Bold.woff); } h1 { font-family: 'Termina Demi'; text-transform: uppercase; font-size: 40px; } h2 { font-family: 'Termina Demi'; text-transform: uppercase; font-size: 27px; } h3 { font-family: 'Mundial Bold'; font-size: 20px; text-transform: uppercase; } .sqsrte-large { font-family: 'Mundial Regular'; font-size: 22px; line-height: 2rem; } p { font-family: 'Mundial Regular'; font-size: 17px; } .sqsrte-small { font-family: 'Mundial Bold'; font-size: 17px; } What is your site url? 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
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment