tuanphan Posted March 2 Share Posted March 2 On 2/28/2024 at 3:17 AM, amanda.j.murray said: I am using a custom font (Adobe Locator) for my client's website, and have added CSS code for it to apply to everything EXCEPT the button in my navigation menu *on mobile*. Does anyone know the CSS code for this? (I have already applied it for the button on the navigation view in desktop.) Thanks so much! https://bobcat-mustard-k4cg.squarespace.com/ Use this, it will target both desktop + mobile header button a.btn { font-family: 'locator-web' !important; } 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
tuanphan Posted March 2 Share Posted March 2 On 2/29/2024 at 4:01 AM, ncast21 said: Hi! I'm also having issues getting my custom font to show on mobile view and desktop on Safari. On Chrome desktop everything looks as it should but no luck otherwise. https://solandsand.co Everything seems to look right code wise, but here's my code for your reference: /**ADD CUSTOM FONT**/ //Headings:Brewery Pro @font-face { font-family:'Brewery Pro'!important; src:url('https://static1.squarespace.com/static/61a35a410b6008246ef90b89/t/65df753671d3ea1fb3719661/1709143350257/Linotype-BreweryPro-Bold.woff') format('woff'); } h1, h2, h3, h4, .user-items-list .list-section-title, .list-item-content .list-item-content__title, .blog-basic-grid--text .blog-title, .grid-main-meta .grid-title, .newsletter-form-header .newsletter-form-header-title, .blog-item-title .entry-title.entry-title--large.p-name{ font-family:'Brewery Pro'; letter-spacing:.025em; line-height: 1em; } //Headings:Luminaire Script @font-face { font-family:'Luminaire Script'!important; src:url('https://static1.squarespace.com/static/61a35a410b6008246ef90b89/t/65df736a74a7475879cfc1c9/1709142890585/LuminaireScript-Regular.woff') format('woff'); } //Headings & Paragraph:Gill Sans Nova SemiBold @font-face { font-family: 'Gill Sans Nova SemiBold'; src: url('https://static1.squarespace.com/static/61a35a410b6008246ef90b89/t/65df7392be757d5b056f0447/1709142930894/GillSansNova-SemiBold.woff') format('woff'); } Thank you for your help! If font works, it should be like this or? 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
ncast21 Posted March 4 Share Posted March 4 Yes that's how it would look formatted correctly @tuanphan, currently on safari and mobile it's looking like this image. on Chrome Desktop it seems to appear fine. Link to comment
CharlotteMeys Posted March 7 Share Posted March 7 (edited) Hi, I'm having the same issue... Works only in Chrome but not on safari/mobile. Can anyone help me out? Thanks! @font-face{ font-family: 'geomanist'; src: url ('https://static1.squarespace.com/static/65df03fd1a699124f818b6f6/t/65e98a754aa00b029f5dafe4/1709804149629/geomanist-black-webfont.ttf') } h1,h2,h3,h4,p { font-family: 'geomanist'; } @font-face{ font-family: 'geomanist'; src: url ('https://static1.squarespace.com/static/65df03fd1a699124f818b6f6/t/65e98a754aa00b029f5dafe4/1709804149629/geomanist-black-webfont.ttf') } .header-nav *, nav.header-menu-nav-list * { font-family:'geomanist-black'; } Edited March 7 by CharlotteMeys Link to comment
tuanphan Posted March 8 Share Posted March 8 On 3/5/2024 at 6:29 AM, ncast21 said: Yes that's how it would look formatted correctly @tuanphan, currently on safari and mobile it's looking like this image. on Chrome Desktop it seems to appear fine. Don't use !important inside @font-face code Change this code @font-face { font-family: 'Brewery Pro' !important; src: url('https://static1.squarespace.com/static/61a35a410b6008246ef90b89/t/65df753671d3ea1fb3719661/1709143350257/Linotype-BreweryPro-Bold.woff') format('woff') } to this @font-face { font-family: 'Brewery Pro'; src: url('https://static1.squarespace.com/static/61a35a410b6008246ef90b89/t/65df753671d3ea1fb3719661/1709143350257/Linotype-BreweryPro-Bold.woff') format('woff') } On 3/7/2024 at 4:46 PM, CharlotteMeys said: Hi, I'm having the same issue... Works only in Chrome but not on safari/mobile. Can anyone help me out? Thanks! @font-face{ font-family: 'geomanist'; src: url ('https://static1.squarespace.com/static/65df03fd1a699124f818b6f6/t/65e98a754aa00b029f5dafe4/1709804149629/geomanist-black-webfont.ttf') } h1,h2,h3,h4,p { font-family: 'geomanist'; } @font-face{ font-family: 'geomanist'; src: url ('https://static1.squarespace.com/static/65df03fd1a699124f818b6f6/t/65e98a754aa00b029f5dafe4/1709804149629/geomanist-black-webfont.ttf') } .header-nav *, nav.header-menu-nav-list * { font-family:'geomanist-black'; } Can you share site url? We can check easier 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
mapel Posted March 8 Share Posted March 8 Hey, I'm just really stupid and have tried a few variations of the code, but it won't change the phone version title font, only the website desktop one! I just need some assistance! not smart with these codes Link to comment
ncast21 Posted March 9 Share Posted March 9 18 hours ago, tuanphan said: Don't use !important inside @font-face code Change this code @font-face { font-family: 'Brewery Pro' !important; src: url('https://static1.squarespace.com/static/61a35a410b6008246ef90b89/t/65df753671d3ea1fb3719661/1709143350257/Linotype-BreweryPro-Bold.woff') format('woff') } to this @font-face { font-family: 'Brewery Pro'; src: url('https://static1.squarespace.com/static/61a35a410b6008246ef90b89/t/65df753671d3ea1fb3719661/1709143350257/Linotype-BreweryPro-Bold.woff') format('woff') } Can you share site url? We can check easier Awesome! Thank you, this worked perfectly. Link to comment
tuanphan Posted March 13 Share Posted March 13 On 3/8/2024 at 9:12 PM, mapel said: Hey, I'm just really stupid and have tried a few variations of the code, but it won't change the phone version title font, only the website desktop one! I just need some assistance! not smart with these codes 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 Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
dlR Posted March 15 Share Posted March 15 Hi. I have this issue.. I cant find the navigation links in mobile view, the rest are good.. anyone please help// Link to comment
tuanphan Posted March 16 Share Posted March 16 4 hours ago, dlR said: Hi. I have this issue.. I cant find the navigation links in mobile view, the rest are good.. anyone please help// If you share site url, we can check problem easier 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
2SB Posted March 18 Share Posted March 18 Hi all, I am also having a bit of trouble with my mobile font (H1 and H2). I am able to see it when I use the chrome app, but not the Google Bar widget on my Google Pixel 8. Any ideas? Here is my CSS @font-face { font-family: 'Calgary'; src: url('https://static1.squarespace.com/static/65eb616f26d6c01e8ed4e11e/t/65ef241ee66db84f275fd5ca/1710171166535/Calgary-Regular.ttf'); } h1 { font-family: 'Calgary'; } @font-face { font-family: 'Calgary'; src: url('https://static1.squarespace.com/static/65eb616f26d6c01e8ed4e11e/t/65ef241ee66db84f275fd5ca/1710171166535/Calgary-Regular.ttf'); } h2 { font-family: 'Calgary'; } @font-face { font-family: 'Avenir'; src: url('https://static1.squarespace.com/static/65eb616f26d6c01e8ed4e11e/t/65eb7531cc28f63ada01ae96/1709929777368/AvenirLTStd-Book.otf'); } .sqs-block-button-container a{ font-family: 'Avenir' !important; } .header-actions-action--cta .sqs-button-element--primary { font-family: 'Avenir'!important; } .header--menu-open .header-menu-nav-folder-content a {font-family: 'Calgary'} .header--menu-open .btn {font-family: 'Avenir'!important;} @media only screen and (max-width: 640px){ h1 { font-size: 40px !important; } h2 { font-size: 30px !important; } } Here is my site: https://www.thegalleryhousebedford.com/ Thanks in advance! Link to comment
tuanphan Posted March 21 Share Posted March 21 On 3/18/2024 at 9:27 PM, 2SB said: Hi all, I am also having a bit of trouble with my mobile font (H1 and H2). I am able to see it when I use the chrome app, but not the Google Bar widget on my Google Pixel 8. Any ideas? Here is my CSS @font-face { font-family: 'Calgary'; src: url('https://static1.squarespace.com/static/65eb616f26d6c01e8ed4e11e/t/65ef241ee66db84f275fd5ca/1710171166535/Calgary-Regular.ttf'); } h1 { font-family: 'Calgary'; } @font-face { font-family: 'Calgary'; src: url('https://static1.squarespace.com/static/65eb616f26d6c01e8ed4e11e/t/65ef241ee66db84f275fd5ca/1710171166535/Calgary-Regular.ttf'); } h2 { font-family: 'Calgary'; } @font-face { font-family: 'Avenir'; src: url('https://static1.squarespace.com/static/65eb616f26d6c01e8ed4e11e/t/65eb7531cc28f63ada01ae96/1709929777368/AvenirLTStd-Book.otf'); } .sqs-block-button-container a{ font-family: 'Avenir' !important; } .header-actions-action--cta .sqs-button-element--primary { font-family: 'Avenir'!important; } .header--menu-open .header-menu-nav-folder-content a {font-family: 'Calgary'} .header--menu-open .btn {font-family: 'Avenir'!important;} @media only screen and (max-width: 640px){ h1 { font-size: 40px !important; } h2 { font-size: 30px !important; } } Here is my site: https://www.thegalleryhousebedford.com/ Thanks in advance! Do you have any other font formats? otf, woff, woff2? 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
MirandaC Posted March 22 Share Posted March 22 Same issue. Works fine on Desktop but when I hit the mobile version on desktop the custom font does not work. website. www.mirandacorwinphotography.com // CUSTOM FONT @font-face { font-family:'Katherine-Free'; src: url(https://static1.squarespace.com/static/65ab3e166f8c1c2c1cb513ac/t/65eb49c404d3d3293fd7cb83/1709918660312/Katherine+Free.otf); } p.sqsrte-small { font-family:'Katherine-Free'; font-size: 50pt; letter-spacing: 1px; line-height: 200%;} Link to comment
MirandaC Posted March 22 Share Posted March 22 3 minutes ago, MirandaC said: Same issue. Works fine on Desktop but when I hit the mobile version on desktop the custom font does not work. website. I only have the OTF file. Would this be the reason why? www.mirandacorwinphotography.com // CUSTOM FONT @font-face { font-family:'Katherine-Free'; src: url(https://static1.squarespace.com/static/65ab3e166f8c1c2c1cb513ac/t/65eb49c404d3d3293fd7cb83/1709918660312/Katherine+Free.otf); } p.sqsrte-small { font-family:'Katherine-Free'; font-size: 50pt; letter-spacing: 1px; line-height: 200%;} Link to comment
tuanphan Posted March 25 Share Posted March 25 On 3/23/2024 at 3:15 AM, MirandaC said: You wrapped your font-face code in a media query, so it won't work on all devices Move this code to top of Custom CSS box @font-face { font-family: 'Katherine-free'; src: url(https://static1.squarespace.com/static/65ab3e166f8c1c2c1cb513ac/t/65fdee1ebf96b070a525010e/1711140383074/Katherine+Free.otf) } p.sqsrte-small { font-family: 'Katherine-free'; font-size: 50pt; letter-spacing: 1px; line-height: 200% } 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
2SB Posted April 7 Share Posted April 7 On 3/21/2024 at 3:21 AM, tuanphan said: Do you have any other font formats? otf, woff, woff2? Looks like my Avenir font is otf. Should I change it? It's the Calgary font that's not showing up on the Google App Widget as well. Thanks I appreciate your help! Link to comment
tuanphan Posted April 9 Share Posted April 9 On 4/7/2024 at 6:34 PM, 2SB said: Looks like my Avenir font is otf. Should I change it? It's the Calgary font that's not showing up on the Google App Widget as well. Thanks I appreciate your help! If you have ttf, woff, woff2, you can upload it and send url, I will give new code to declare all formats https://www.thegalleryhousebedford.com/ 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
jenna1087 Posted April 17 Share Posted April 17 (edited) I'm running into this same issue. Font looks perfect on desktop but is broken on mobile. Everything appears correct..please help! coryandjenna.com // CUSTOM FONT @font-face { font-family: 'PERFECTLY-NINETIES'; src: url('https://static1.squarespace.com/static/65204b096b74f31ab34ead0f/t/6620287f0f68ae79b5619b05/1713383551705/PerfectlyNineties-Regular.ttf'); } h1 { font-family: 'PERFECTLY-NINETIES' !important;} Edited April 17 by jenna1087 Link to comment
tuanphan Posted April 20 Share Posted April 20 On 4/18/2024 at 3:20 AM, jenna1087 said: I'm running into this same issue. Font looks perfect on desktop but is broken on mobile. Everything appears correct..please help! coryandjenna.com // CUSTOM FONT @font-face { font-family: 'PERFECTLY-NINETIES'; src: url('https://static1.squarespace.com/static/65204b096b74f31ab34ead0f/t/6620287f0f68ae79b5619b05/1713383551705/PerfectlyNineties-Regular.ttf'); } h1 { font-family: 'PERFECTLY-NINETIES' !important;} What is password? 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
formaterra Posted April 30 Share Posted April 30 Hello folks. The font I chose, aktiv grotesk, does not load in safari on mobile. In all other cases it loads properly. Could someone help me with this problem? My website is called: www.formaterra.nl Best regards, Werner Link to comment
tuanphan Posted May 2 Share Posted May 2 On 4/30/2024 at 10:50 PM, formaterra said: Hello folks. The font I chose, aktiv grotesk, does not load in safari on mobile. In all other cases it loads properly. Could someone help me with this problem? My website is called: www.formaterra.nl Best regards, Werner Can you take a screenshot of font on your end? 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
AJeans Posted May 3 Share Posted May 3 (edited) @tuanphan I'm having the same issue with a fonts not showing properly on mobile and safari desktop, but find in preview mode in squarespace and on chrome. Here's the site: houseofrosie.squarespace.com pw: chrisandlindsay Any advice? I've tried some of the answers in this thread with no luck. Edited May 3 by AJeans Link to comment
formaterra Posted May 3 Share Posted May 3 On 5/2/2024 at 9:33 AM, tuanphan said: Can you take a screenshot of font on your end? Here is a screenshot of the mobile homepage on safari. I hope that is what you mean by taking a screenshot of the font on my end. Link to comment
tuanphan Posted May 5 Share Posted May 5 On 5/3/2024 at 12:12 PM, AJeans said: @tuanphan I'm having the same issue with a fonts not showing properly on mobile and safari desktop, but find in preview mode in squarespace and on chrome. Here's the site: houseofrosie.squarespace.com pw: chrisandlindsay Any advice? I've tried some of the answers in this thread with no luck. Your font code has some invalid symbol. Use this new font face code @font-face { font-family: 'founders-grotesk'; src: url(https://static1.squarespace.com/static/6626d69b60f5bf3e678076a5/t/6626e527bc19ae229b3464f9/1713825063304/foundersgrotesk-regular-webfont.woff'); src: url(https://static1.squarespace.com/static/6626d69b60f5bf3e678076a5/t/6626e527e9fc9473ed01fd89/1713825063228/foundersgrotesk-regular-webfont.woff2); } @font-face { font-family: 'gundarson-regular'; src: url(https://static1.squarespace.com/static/6626d69b60f5bf3e678076a5/t/6626e5271e22892e6091f1ec/1713825063313/gundarson-regular-webfont.woff); src: url(https://static1.squarespace.com/static/6626d69b60f5bf3e678076a5/t/6626e527b5546f5e61d9c4d7/1713825063221/gundarson-regular-webfont.woff2); } @font-face { font-family: 'gundarson-italic'; src: url(https://static1.squarespace.com/static/6626d69b60f5bf3e678076a5/t/6626e527aabe6d2317f676de/1713825063325/gundarson-italic-webfont.woff); src: url(https://static1.squarespace.com/static/6626d69b60f5bf3e678076a5/t/6626e527cca6045082ae1e56/1713825063322/gundarson-italic-webfont.woff2); } 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
tuanphan Posted May 5 Share Posted May 5 On 5/3/2024 at 3:40 PM, formaterra said: Here is a screenshot of the mobile homepage on safari. I hope that is what you mean by taking a screenshot of the font on my end. It is custom font or SS font? (Samsung/Chrome) 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
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment