CSS (font) not loading on mobile

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>