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 post
  • Answers 2
  • Created
  • Last Reply

Top Posters For This Question

Top Posters For This Question

Popular Posts

Change the font-family rule to: font-family: "century-gothic"; This is how the font is named on your site, not "Century Gothic".

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