Installed Fonts Not Working

[ncadis]

Hello! I’m having an issue with my fonts not displaying properly on mobile devices and certain computers. I followed the font install guide that is provided on your support area to install several font styles of the Montserrat font, but something must be up with my code and I’m at a little bit of a loss. I’ve uploaded an image that shows the difference in the fonts. The right font image shows what the fonts appear as on my computers which incidentally also have Montserrat installed on the computer. The left font graphic shows how the image is showing up on mobile devices as well as computers that do not have Montserrat installed. It’s just displaying the standard sans-serif font. Again, this is a code issue but I’m not sure where the problem is. Thank you for your help.

The website is https://www.integritysigners.net

[lely]

Hi There,

It is not working because the source of the font on your declaration is wrong:

   @font-face {
         font-family: 'Montserrat-Light';
         src: url('./framework/fonts/montserrat-light.eot'); 
         src: url('./framework/fonts/montserrat-light.eot?#iefix') format('embedded-opentype'),
                url('./framework/fonts/montserrat-light.svg#montserrat-light') format('svg'),
                url('./framework/fonts/montserrat-light.woff') format('woff'), 
                url('./framework/fonts/montserrat-light.ttf')  format('truetype'), 
   }

Note that fonts folder should be added inside your child theme folder so it is safe from update. Let say that you have added it here: /wp-content/themes/x-child. Let’s update your font source to this:

   @font-face {
         font-family: 'Montserrat-Light';
         src: url('/wp-content/themes/x-child/fonts/montserrat-light.eot'); 
         src: url('/wp-content/themes/x-child/fonts/montserrat-light.eot?#iefix') format('embedded-opentype'),
                url('/wp-content/themes/x-child/fonts/montserrat-light.svg#montserrat-light') format('svg'),
                url('/wp-content/themes/x-child/fonts/montserrat-light.woff') format('woff'), 
                url('/wp-content/themes/x-child/fonts/montserrat-light.ttf')  format('truetype'), 
   }

Now check where the actual font is save and then adjust the source on all your CSS. If the issue persists. Please share admin and FTP credentials using a secure note so we can double check your setup.

[ncadis]

Not sure if my secure note made it below, but in case it didn’t I’ve posted my reply below.

[rad]

Hi there,

Please check this https://css-tricks.com/snippets/css/using-font-face/

The @font-face rule should be added to the stylesheet before any styles.

You should add it to your child theme’s style.css before any CSS. And please use full-URL for faster loading. Example,

   @font-face {
         font-family: 'Montserrat-Light';
         src: url(' //www.integritysigners.net/wp-content/themes/x-child/fonts/montserrat-light.eot'); 
         src: url('//www.integritysigners.net/wp-content/themes/x-child/fonts/montserrat-light.eot?#iefix') format('embedded-opentype'),
                url('//www.integritysigners.net/wp-content/themes/x-child/fonts/montserrat-light.svg#montserrat-light') format('svg'),
                url('//www.integritysigners.net/wp-content/themes/x-child/fonts/montserrat-light.woff') format('woff'), 
                url('//www.integritysigners.net/wp-content/themes/x-child/fonts/montserrat-light.ttf')  format('truetype'), 
   }

Thanks!

[ncadis]

Thank you for the code. I followed the steps and updated the source URL links in the @font-face code. Unfortunately, nothing happened, and the font is still not showing up on other computers. I did follow the steps from the css-tricks site and add the code to the x-child themes style.css sheet, but the code is also in the customizers custom global CSS sheet. Does that matter and does having it in both places cause an error?

[nabeel]

Hi again,

Instead of using an uploaded font, you can use Google font. It’s more easier and convenient to use. Just add the following code in your Child Theme’s functions.php file:

add_action('wp_footer','google_font');
function google_font() { 
?>
<link href="https://fonts.googleapis.com/css?family=Montserrat:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i" rel="stylesheet">
<?php 
}

Then you can use the font like this:

font-family: 'Montserrat', sans-serif;

This should work without an issue. Let us know how this goes!

[ncadis]

That did it! Thank you so much for your help. I just added the font-weight tag to the CSS to choose the different font weights, and it worked like a charm on all devices. I really appreciate the support. You guys are the best!

[nabeel]

Glad we could help.

Cheers!