Jump to content

Button Font Appearing Differently in Safari

Recommended Posts

Hey, peoples. I have some custom css for button styling across my site, currently used in three places:

  1. My Squarespace Scheduling (Acuity) buttons
  2. Newsletter sign-up form submit buttons
  3. 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!

Edited by brandi_sqspace
Link to comment
  • Replies 2
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

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

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.