Jump to content

CSS (font) not loading on mobile

Recommended Posts

Site URL: http://www.williamcouncil.com

Hello! 

I added a custom floating button throughout my site, however the font Century Gothic (which is the main h1, h2 font across the entire site) is not loading on mobile just for this button, its displaying perfectly fine for the non custom css coded sections. I have my code input into page header code injection. is there any simple code I can input for it to display correctly?

I keep trying @media screen and setting min/max but not making any progress. Help? 

This is what I currently have:

<div class="kl-float"> 
   <a href="https://www.sitename.com" target="_blank">     
   <h9 style="color:white">BUTTON</h9>
   </a>
  
</div>
<style>
  .kl-float {
   position: fixed;
   opacity: .95;
   top: calc(20%);
   right: 0;
   z-index: 20000;
   background-color: #D1A52B;
   white-space: nowrap;
   text-align: center !important;
   border-radius: 0px;
   height: 50px;
   font-family: Century Gothic !important;
   font-weight: bold;
   font-size: 30px;
   padding-top: 30px;
   padding-right: 30px;
   padding-bottom: 10px;
   padding-left: 30px;
   -moz-transform: rotate(-0deg);
   -ms-transform: rotate(-0deg);
   -o-transform: rotate(-0deg);
   -webkit-transform: rotate(-0deg);
   transform-origin: bottom right;
   target="_blank";
   box-shadow: 4px 2px 2px 2px rgba(0, 0, 0, 0.45);;
}
}
</style>

Link to comment
  • Replies 2
  • Views 783
  • Created
  • Last Reply

Archived

This topic is now archived and is closed to further replies.

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