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

Button Font Appearing Differently in Safari


brandi_sqspace

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
Link to comment
  • Answers 2
  • Created
  • Last Reply

Top Posters For This Question

Top Posters For This Question

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

 

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...