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, Keyword HighlighterIf 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
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment