brandi_sqspace Posted January 29, 2020 Share Posted January 29, 2020 Hey, peoples. I have some custom css for button styling across my site, currently used in three places: My Squarespace Scheduling (Acuity) buttons Newsletter sign-up form submit buttons And, my cookie policy acceptance banner The font I want across all three (Sofia Pro) appears fine in Chrome but not in Safari. Weirdly, for #1 and #2 (in my list above), the font appears in Safari as a serif font, even though I have "sans serif" as a fallback font in the code, but does actually appear as a sans serif font in #3 (my cookie banner) in Safari. Anyway, at the end of the day, I'd just really love to get Sofia Pro to work on all of my buttons, across all browsers. Looking for some help to either fix my current custom code or to let me know if there's new custom code I need to add to get things looking the same in Safari (or elsewhere, too; I've only been testing across Chrome and Safari so far). Thanks! Link to comment
tuanphan Posted January 30, 2020 Share Posted January 30, 2020 which css did you use? 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
brandi_sqspace Posted January 30, 2020 Author Share Posted January 30, 2020 5 hours ago, tuanphan said: which css did you use? Button in my header: .sqs-block-button .sqs-block-button-element--small--header { button-shape: square; button-style: solid; margin-left: -18px; display: inline; padding-top: 18px; padding-bottom: 15px; padding-left: 30px; padding-right: 30px; font-family: sofia pro, "Helvetica Neue", Helvetica, Arial, sans-serif !important; letter-spacing: .3em; font-family: sofia pro, sans-serif; font-size: 13px; font-weight: 300 !important; font-style: normal; text-transform: uppercase; letter-spacing: .15em; color: #fff; background-color: #d98044; -webkit-transition: .1s opacity linear; -moz-transition: .1s opacity linear; -o-transition: .1s opacity linear; transition: .1s opacity linear; -webkit-backface-visibility:hidden; } .sqs-block-button .sqs-block-button-element--small--header:hover { background-color: #333; opacity: .9; } Buttons for my newsletter blocks: .newsletter-block .newsletter-form-button{ font-family: sofia pro, sans-serif; font-size: 13px; font-weight: 300 !important; text-transform: uppercase !important; letter-spacing: 1.5px; text-align: center; color: #fffff6; background-color: #333333; display: inline; padding-top: 18px !important; padding-bottom: 15px; padding-left: 30px; padding-right: 30px; } Buttons in my (now-Hubspot) Cookie Banner (which I'd also love to match the other buttons; primarily to get them to be rectangular instead of rounded): div#hs-eu-cookie-confirmation div#hs-eu-cookie-confirmation-inner a#hs-eu-confirmation-button { background: #d98044 !important; border: none !important; box-shadow: none !important; font-family: sofia pro, sans-serif !important; letter-spacing: .3em !important; text-transform: uppercase !important; -webkit-transition: .1s opacity linear !important; -moz-transition: .1s opacity linear !important; -o-transition: .1s opacity linear !important; transition: .1s opacity linear !important; -webkit-backface-visibility:hidden !important; } div#hs-eu-cookie-confirmation div#hs-eu-cookie-confirmation-inner a#hs-eu-confirmation-button:hover { font-family: sofia pro, sans-serif !important; text-transform: uppercase !important; border: 0px !important; color: #fff !important; background: #e8945a !important; letter-spacing: .3em !important; -webkit-transition: .1s opacity linear !important; -moz-transition: .1s opacity linear !important; -o-transition: .1s opacity linear !important; transition: .1s opacity linear !important; -webkit-backface-visibility:hidden !important; } div#hs-eu-cookie-confirmation div#hs-eu-cookie-confirmation-inner a#hs-eu-decline-button { background: #d98044 !important; color: #fff !important; border: none !important; box-shadow: none !important; font-family: sofia pro, sans-serif !important; letter-spacing: .3em !important; text-transform: uppercase !important; -webkit-transition: .1s opacity linear !important; -moz-transition: .1s opacity linear !important; -o-transition: .1s opacity linear !important; transition: .1s opacity linear !important; -webkit-backface-visibility:hidden !important; } div#hs-eu-cookie-confirmation div#hs-eu-cookie-confirmation-inner a#hs-eu-decline-button:hover { font-family: sofia pro, sans-serif !important; text-transform: uppercase !important; border: 0px !important; color: #fff !important; background: #e8945a !important; letter-spacing: .3em !important; -webkit-transition: .1s opacity linear !important; -moz-transition: .1s opacity linear !important; -o-transition: .1s opacity linear !important; transition: .1s opacity linear !important; -webkit-backface-visibility:hidden !important; } Link to comment
Recommended Posts
Archived
This topic is now archived and is closed to further replies.