Button Font Appearing Differently in Safari

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!

which css did you use?

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;
}