Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0
brandi_sqspace

Button Font Appearing Differently in Safari

Question

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

Share this post


Link to post

2 answers to this question

Recommended Posts

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

 

Share this post


Link to post

Create an account or sign in to comment

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


×
×
  • Create New...