one-over-four Posted May 13 Share Posted May 13 Page URL: https://studiotahini.squarespace.com/coachingsession-1 Hi there! I've implemented CSS code for my custom font (see below). However, the font and font style is not represented as expected in the top button (Contacto) and across the form. Is there any way to modify the font style in the Button/Form specifically? - @font-face { font-family: Magazine Grotesque Regular; src: url(https://static1.squarespace.com/static/66150ddd977a5e716da79da2/t/661e20be0ac85137ed005ab8/1713250495434/Magazine-Grotesque-Regular.otf); } @font-face { font-family: Magazine Grotesque Semi Bold; src: url(https://static1.squarespace.com/static/66150ddd977a5e716da79da2/t/661e20be321c6f50f450ef17/1713250495145/Magazine-Grotesque-SemiBold.otf); } .sqs-block-button-element { font-family: 'Magazine Grotesque Regular' !important; } button { font-family: Magazine Grotesque Regular !important; } a.btn.btn--border.theme-btn--primary-inverse { font-family: Magazine Grotesque Regular; } h1 {font-family: 'Magazine Grotesque Semi Bold';} h2 {font-family: 'Magazine Grotesque Semi Bold';} h3 {font-family: 'Magazine Grotesque Semi Bold';} h4 {font-family: 'Magazine Grotesque Regular';} p.sqsrte-large {font-family: 'Magazine Grotesque Regular';} p {font-family: 'Magazine Grotesque Regular';} p.sqsrte-small {font-family: 'Magazine Grotesque Regular';} h1 { font-family: 'Magazine Grotesque Semi Bold'; font-weight: 500; font-style: regular; font-size: 40px; letter-spacing: -0.01em; text-transform: ; line-height: 1.25em; } h2 { font-family: 'Magazine Grotesque Semi Bold'; font-weight: 400; font-style: regular; font-size: 24px; letter-spacing: -0.01em; text-transform: ; line-height: 1,5em; } h3 { font-family: 'Magazine Grotesque Semi Bold'; font-weight: 400; font-style: regular; font-size: 14px; letter-spacing: -0.01em; text-transform: ; line-height: 1em; } h4 { font-family: 'Magazine Grotesque Regular'; font-weight: 400; font-style: regular; font-size: 18px; letter-spacing: -0.01em; text-transform: ; line-height: 1,15em; } p { font-family: 'Magazine Grotesque Regular'; font-weight: 400; font-style: regular; font-size: 14px; letter-spacing: 0.025em; text-transform: ; line-height: 1.5em; } .header-nav *, nav.header-menu-nav-list * { font-family: Magazine Grotesque Regular; font-weight: 400; font-style: bold; font-size: 14px; letter-spacing: 0.05em; text-transform: ; line-height: 1em; } .Marquee * { font-family: Magazine Grotesque Regular; color:#333333; font-size: 18px; } .form-wrapper .field-list .title { font-family: Magazine Grotesque Regular; font-size: 13px; font-weight: 700; color: #ffffff; letter-spacing: .15em; text-transform: ; } #siteWrapper.site-wrapper .sqs-block-button-element { font-family: "Magazine Grotesque Regular" !important; } .newsletter-form-field-element{ border-radius: 20px; border:1px solid #6E5C55!important } Link to comment
tuanphan Posted May 18 Share Posted May 18 Header button (Contacto) should use this CSS code a.btn { font-family: Magazine Grotesque Regular !important; } On 5/16/2024 at 12:40 AM, codyco said: I'm also having this issue! You can share link to your site, we can help 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
one-over-four Posted May 27 Author Share Posted May 27 Perfect, thanks @tuanphan! Do you know how I can also modify the font in the form fields? Link to comment
tuanphan Posted May 29 Share Posted May 29 On 5/27/2024 at 10:34 PM, one-over-four said: Perfect, thanks @tuanphan! Do you know how I can also modify the font in the form fields? If all use same font, use this ID div.form-block *, div.form-block *::placeholder 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
one-over-four Posted June 16 Author Share Posted June 16 Page URL: https://studiotahini.squarespace.com/ Hi there! I need to change the form ('Unete a la communidad') design, however, none of the updates I make within Site Styles > Forms are being reflected on the live site. Is there any custom CSS I can add to: Change the font design of the field captions and field inputs (inc. custom font used, font size, font letter spacing, font colour) Change the field input box design I've shared the existing custom CSS below for reference. Thanks! Christopher - @font-face { font-family: Creation; src: url(https://static1.squarespace.com/static/66150ddd977a5e716da79da2/t/666c51b24017d62b1f603b79/1718374834896/Creattion.otf); } @font-face { font-family: Magazine Grotesque Regular; src: url(https://static1.squarespace.com/static/66150ddd977a5e716da79da2/t/661e20be0ac85137ed005ab8/1713250495434/Magazine-Grotesque-Regular.otf); } @font-face { font-family: Magazine Grotesque Semi Bold; src: url(https://static1.squarespace.com/static/66150ddd977a5e716da79da2/t/661e20be321c6f50f450ef17/1713250495145/Magazine-Grotesque-SemiBold.otf); } .sqs-block-button-element { font-family: 'Magazine Grotesque Regular' !important; } button { font-family: Magazine Grotesque Regular !important; } a.btn.btn--border.theme-btn--primary-inverse { font-family: Magazine Grotesque Regular; } h1 {font-family: 'Magazine Grotesque Regular';} h2 {font-family: 'Magazine Grotesque Regular';} h3 {font-family: 'Creation';} h4 {font-family: 'Creation';} p.sqsrte-large {font-family: 'Magazine Grotesque Regular';} p {font-family: 'Magazine Grotesque Regular';} p.sqsrte-small {font-family: 'Magazine Grotesque Regular';} h1 { font-family: 'Magazine Grotesque Regular'; font-weight: 500; font-style: regular; font-size: 55px; letter-spacing: -0.01em; text-transform: ; line-height: 1.25em; } h2 { font-family: 'Magazine Grotesque Regular'; font-weight: 400; font-style: regular; font-size: 32.5px; letter-spacing: -0.01em; text-transform: ; line-height: 1,25em; } h3 { font-family: 'Creation'; font-weight: 400; font-style: regular; font-size: 60px; letter-spacing: -0.01em; text-transform: ; line-height: 1em; } h4 { font-family: 'Creation'; font-weight: 400; font-style: regular; font-size: 50px; letter-spacing: -0.0em; text-transform: ; line-height: 1,15em; } .sqsrte-large { font-family: 'Magazine Grotesque Regular'; font-weight: 400; font-style: regular; font-size: 20px; letter-spacing: 0.0em; text-transform: ; line-height: 1.25em; } p { font-family: 'Magazine Grotesque Regular'; font-weight: 400; font-style: regular; font-size: 17px; letter-spacing: 0.0em; text-transform: ; line-height: 1.50em; } .sqsrte-small { font-family: 'Magazine Grotesque Regular'; font-weight: 400; font-style: regular; font-size: 14px; letter-spacing: 0.0em; text-transform: ; line-height: 1.0em; } .header-nav *, nav.header-menu-nav-list * { font-family: Magazine Grotesque Regular; font-weight: 400; font-style: bold; font-size: 14px; letter-spacing: 0.05em; text-transform: ; line-height: 1em; } .Marquee * { font-family: Magazine Grotesque Regular; color:#333333; font-size: 18px; } .form-wrapper .field-list .title { font-family: Magazine Grotesque Regular; font-size: 13px; font-weight: 700; color: #ffffff; letter-spacing: .15em; text-transform: ; } #siteWrapper.site-wrapper .sqs-block-button-element { font-family: "Magazine Grotesque Regular" !important; } .newsletter-form-field-element{ border-radius: 20px; border:1px solid #6E5C55!important } .newsletter-form-field-element{ font-family: Magazine Grotesque Regular !important; } .form-field-element{ font-family: Magazine Grotesque Regular !important; } a.btn { font-family: Magazine Grotesque Regular !important; } Link to comment
one-over-four Posted June 17 Author Share Posted June 17 Hi @tuanphan, Sorry for the late reply here! Page URL: https://studiotahini.squarespace.com/ I've added the below custom code to change the font style used in the form (Unete a la communidad) towards the bottom of the page. Whilst the main caption copy has been updated, the other copy still remains the same. How do I change the font colour of the rest of the copy in this form? Thanks, Christopher ----- div.form-block * { font-family: Magazine Grotesque Regular !important; font-weight: 500; font-style: bold; font-size: 15px; letter-spacing: 0em; text-transform: ; line-height: 0em; color: #F3F0EC; } Link to comment
tuanphan Posted June 17 Share Posted June 17 Can you share link to page where you use form? 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
one-over-four Posted June 17 Author Share Posted June 17 @tuanphan Page URL: https://studiotahini.squarespace.com/ Link to comment
tuanphan Posted June 18 Share Posted June 18 22 hours ago, one-over-four said: @tuanphan Page URL: https://studiotahini.squarespace.com/ The link doesn't work. 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 June 18 Share Posted June 18 23 hours ago, one-over-four said: Hi @tuanphan, Sorry for the late reply here! Page URL: https://studiotahini.squarespace.com/ I've added the below custom code to change the font style used in the form (Unete a la communidad) towards the bottom of the page. Whilst the main caption copy has been updated, the other copy still remains the same. How do I change the font colour of the rest of the copy in this form? Thanks, Christopher ----- div.form-block * { font-family: Magazine Grotesque Regular !important; font-weight: 500; font-style: bold; font-size: 15px; letter-spacing: 0em; text-transform: ; line-height: 0em; color: #F3F0EC; } URL doesn't work. You try checking if you enabled page yet 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
one-over-four Posted June 18 Author Share Posted June 18 Hi @tuanphan, The page has been enabled (see attached image)! Thanks, Christopher Link to comment
tuanphan Posted June 20 Share Posted June 20 On 6/19/2024 at 2:20 AM, one-over-four said: Hi @tuanphan, The page has been enabled (see attached image)! Thanks, Christopher I see font-family already works, can you describe in detail problem? https://studiotahini.squarespace.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
one-over-four Posted June 25 Author Share Posted June 25 Hi @tuanphan, When you go down to the form (see attached image), there's a couple issues: Some of the copy appears in brown when it should be #FFFFFF When you add a value in the field (the Nombre box, for instance), you can't see the copy. It's too small. Thanks, Christopher Link to comment
one-over-four Posted June 25 Author Share Posted June 25 It should now work @tuanphan, once cache has been cleared. Link to comment
tuanphan Posted June 26 Share Posted June 26 20 hours ago, one-over-four said: It should now work @tuanphan, once cache has been cleared. I see you used this code & it already work 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
one-over-four Posted June 26 Author Share Posted June 26 Hi @tuanphan, As you can see in the attached image, there's still a couple issues: The field font is brown, not #FFFFFF The input font is so small you can't even see it What needs to change in the code to make these updates? Link to comment
tuanphan Posted June 28 Share Posted June 28 On 6/26/2024 at 4:36 PM, one-over-four said: Hi @tuanphan, As you can see in the attached image, there's still a couple issues: The field font is brown, not #FFFFFF The input font is so small you can't even see it What needs to change in the code to make these updates? #1. You can use this CSS code span.description.required { color: #fff !important; opacity: 1 !important; } .field label * { color: #fff !important; } #2. Use this CSS code div.form-block div.field input, div.form-block div.field input::placeholder { font-size: 20px !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
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment