scholarsayze Posted February 17, 2021 Share Posted February 17, 2021 Site URL: https://bluebird-porcupine-yzdg.squarespace.com/home-copy-1-1-1-1-1 Hello, I am trying to change the font family of just one text block on my site to 'adobe-caslon-pro' but I can't figure it out? I am also trying to change its font size to 1.9rem, and the color to #00ff3d It is the section where the para reads "Introducing our latest SCHOLAR & SAYZÉ ™ additions READ MORE". Please help! Page = https://bluebird-porcupine-yzdg.squarespace.com/home-copy-1-1-1-1-1 Pword = bluebird Many thanks, Best, Faiz Link to comment
Webefo Posted February 17, 2021 Share Posted February 17, 2021 If you want to change fonts for one page then you have to use some custom CSS in your required page header code injection. Please use those code in your required pagae header code injection. <style type="text/css"> #block-yui_3_17_2_1_1613558390525_5996 p { font-family: adobe-caslon-pro !important; font-size: 1.9rem !important; color: #00ff3d !important; } </style> } scholarsayze 1 Link to comment
scholarsayze Posted February 17, 2021 Author Share Posted February 17, 2021 Hey Webefo, thank you SO much - awesome fix!!! I really appreciate it 💯, been trying to figure it out all am!!! Link to comment
scholarsayze Posted February 17, 2021 Author Share Posted February 17, 2021 Sorry I just notice on my mobile device, the paragraph changes does not show on my mobile? Is there a fix for this please, so at least this para displays as 'adobe-caslon-pro'? Thank you. Link to comment
tuanphan Posted February 19, 2021 Share Posted February 19, 2021 On 2/17/2021 at 10:28 PM, scholarsayze said: Sorry I just notice on my mobile device, the paragraph changes does not show on my mobile? Is there a fix for this please, so at least this para displays as 'adobe-caslon-pro'? Thank you. The url doesn't exist. Can you check again? 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
scholarsayze Posted February 19, 2021 Author Share Posted February 19, 2021 Sorry I set the page as my home page now just trying hard to finish off everything! Here's the correct page = https://bluebird-porcupine-yzdg.squarespace.com/home Pword = bluebird As attached, the font doesn't seem to be showing as Adobe Caslon Pro on my mobile. It shows correctly on the Squarespace mobile preview. But not on actual mobile. Link to comment
tuanphan Posted February 22, 2021 Share Posted February 22, 2021 On 2/19/2021 at 3:49 PM, scholarsayze said: Sorry I set the page as my home page now just trying hard to finish off everything! Here's the correct page = https://bluebird-porcupine-yzdg.squarespace.com/home Pword = bluebird As attached, the font doesn't seem to be showing as Adobe Caslon Pro on my mobile. It shows correctly on the Squarespace mobile preview. But not on actual mobile. Hi. Did you solve this? 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
scholarsayze Posted February 22, 2021 Author Share Posted February 22, 2021 I haven't solved this yet, please help me! Link to comment
scholarsayze Posted February 22, 2021 Author Share Posted February 22, 2021 Updated page link - https://bluebird-porcupine-yzdg.squarespace.com/home Pword - bluebird Thank you! Link to comment
creedon Posted February 22, 2021 Share Posted February 22, 2021 Quote As attached, the font doesn't seem to be showing as Adobe Caslon Pro on my mobile. Font looks good on ancient iPhone 5/iOS 10.x. What platform and os are you using? Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects. Link to comment
scholarsayze Posted February 22, 2021 Author Share Posted February 22, 2021 Hey Creedon, many thanks for checking! I appreciate that. I have the Huawei Mate 20 Pro Andriod. Just not sure why it's not showing the Adobe Caslon Pro font?! Link to comment
Solution creedon Posted February 22, 2021 Solution Share Posted February 22, 2021 Some possible directions to head. What font file types does Android support? Using .otf fonts on web browsers Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects. Link to comment
scholarsayze Posted February 22, 2021 Author Share Posted February 22, 2021 Thanks Creedon, I appreciate your support here, many thanks! 💯 I don't really know much about web fonts but just looking through this - https://stackoverflow.com/questions/3245141/using-otf-fonts-on-web-browsers - the code seems to have a source url, do I need to download Adobe Caslon Pro, and upload it somewhere to get a url? Sorry for my lack of understanding here. I'm not really confident do this kind of stuff! Link to comment
creedon Posted February 22, 2021 Share Posted February 22, 2021 @scholarsayze I assume you set the font through the SS interface? As in it was a choice SS offered? If so then I'd say no you don't need to download it as SS has already got that part set up. Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects. Link to comment
scholarsayze Posted February 23, 2021 Author Share Posted February 23, 2021 Thanks very much I'll take a look into this if not, I guess I could play around with other alternatives. Thank you! Link to comment
tuanphan Posted February 28, 2021 Share Posted February 28, 2021 On 2/23/2021 at 2:18 PM, scholarsayze said: Thanks very much I'll take a look into this if not, I guess I could play around with other alternatives. Thank you! Hi. Have you solved it yet? 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
scholarsayze Posted March 1, 2021 Author Share Posted March 1, 2021 Hi Tuanphan, I actually set my main Headers to Libre Baskerville which is pretty much a good match and decided against actually showing this section on mobile. Many thanks, sorted for now!! Link to comment
sheasdesign Posted June 17, 2021 Share Posted June 17, 2021 (edited) Hey Tuanphan, I'm having a similar issue to this where I added some custom CSS to change a couple headings on my site using a font that is already downloaded to Squarespace. Unfortunately, The font is not showing up on mobile. Are you able to figure out why? site- burnandbloom.co Edited June 17, 2021 by sheasdesign Link to comment
tuanphan Posted June 18, 2021 Share Posted June 18, 2021 7 hours ago, sheasdesign said: Hey Tuanphan, I'm having a similar issue to this where I added some custom CSS to change a couple headings on my site using a font that is already downloaded to Squarespace. Unfortunately, The font is not showing up on mobile. Are you able to figure out why? site- burnandbloom.co Which elements you applied font? We can check easier 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
sheasdesign Posted June 18, 2021 Share Posted June 18, 2021 (edited) Blog Banner Heading - Table Talk section[data-section-id="60899f5e0b166a1cdeaea275"]{ h2{ font-family:'adobe handwriting ernie' !important; font-size: 3em;} Two Ways to Gather Headings - section[data-section-id="6089e761b2749f32161b43ee"]{ h3{ font-family: Adobe Handwriting Ernie; } } Blog Page Heading & Contact Heading - Gather Together section[data-section-id="6083205cabd1ac60173dfc67"], section[data-section-id="60c92a7edb22c9295ef2eb19"] { h1{ font-family: Adobe Handwriting Ernie; font-size:3.7em; } } Edited June 18, 2021 by sheasdesign updating sectioning Link to comment
sheasdesign Posted June 21, 2021 Share Posted June 21, 2021 Hi Tuanphan, Are you able to help with this font customization? Really appreciate your help! Blog Banner Heading - Table Talk section[data-section-id="60899f5e0b166a1cdeaea275"]{ h2{ font-family:'adobe handwriting ernie' !important; font-size: 3em;} Two Ways to Gather Headings - section[data-section-id="6089e761b2749f32161b43ee"]{ h3{ font-family: Adobe Handwriting Ernie; } } Blog Page Heading & Contact Heading - Gather Together section[data-section-id="6083205cabd1ac60173dfc67"], section[data-section-id="60c92a7edb22c9295ef2eb19"] { h1{ font-family: Adobe Handwriting Ernie; font-size:3.7em; } } Link to comment
tuanphan Posted June 22, 2021 Share Posted June 22, 2021 I don't understand the code above, what are they for? 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
sheasdesign Posted June 22, 2021 Share Posted June 22, 2021 The code is to customize a few headers from the assigned font family to another font family apart of the Squarespace font list. Here is how it looks on my desktop - Here is how it looks on my mobile - Are you able to help? Link to comment
tuanphan Posted June 24, 2021 Share Posted June 24, 2021 First, change your font name to this div#block-yui_3_17_2_1_1619638941630_9479 h2 { font-family: adobe-handwriting-ernie !important; font-size: 3em; } Next, add this to Custom CSS @font-face{ font-family:adobe-handwriting-ernie; src:url(https://use.typekit.net/af/a9e09c/00000000000000007735b601/30/l?subset_id=2&fvd=n4&v=3) format("woff2"),url(https://use.typekit.net/af/a9e09c/00000000000000007735b601/30/d?subset_id=2&fvd=n4&v=3) format("woff"),url(https://use.typekit.net/af/a9e09c/00000000000000007735b601/30/a?subset_id=2&fvd=n4&v=3) format("opentype"); font-weight:400; font-style:normal; font-display:auto; } sheasdesign 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
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment