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

CSS (font) not loading on mobile


tinypops

Question

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

2 answers to this question

Recommended Posts

Create an account or sign in to comment

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

×
×
  • Create New...