Headers font not working on mobile

[Berube]

Hi,

I use a different font for headers in my projects pages but on mobile it doesn’t work.

I read this post also: https://theme.co/apex/forum/t/google-font-not-working-on-mobile/8266 and tried everything that was suggested (I put the @import in all of the specific pages but still didn’t work).

What should I do?

Thank you

[ruenel]

Hello There,

Thanks for writing in! I have checked your site and the issue may have come from your custom css code. Please edit your child theme’s style.css first and insert your @font block:

@import url('https://fonts.googleapis.com/css?family=Lora');
@import url('https://fonts.googleapis.com/css?family=Montserrat');
@import url('https://fonts.googleapis.com/css?family=Open+Sans');

You can do that by going to Appearance > Editor. At the moment, the font did not took effect because it is loaded after your custom css. The font block must be loaded first before you can use it in your custom css.

Hope this helps.

[Berube]

Hi thank you for your reply,

I’ve already done that it is already in my child theme.

What else could it be?

I don’t know it is has something to do with it but in my functions I have those codes:

function custom_scripts() {
wp_enqueue_style( ‘child_css’, get_stylesheet_directory_uri().’/custom.css’ );
wp_enqueue_style( ‘child_css’, get_stylesheet_directory_uri().’/style.css’ );
}
add_action(‘wp_enqueue_scripts’, ‘custom_scripts’, 9999 );
add_action(‘wp_print_styles’, ‘scripts’);
add_filter( ‘get_shortlink’, function( $shortlink ) {return $shortlink;} );

At the begining I wanted to override cornerstone because I wasn’t figuring out how to manage the CSS, so maybe now I could remove some of it?

Thanks

[jade]

Hi there,

I have just checked your site on mobile and the Lora font is working fine.

If you made some changes to the style.css file, kindly clear your cache as sometimes the style.css will still render the previous version of the file.

Thank you.

[Berube]

Yes the Lora font is working well I think because it is in my typography settings, but I’m talking about the Montserrat font that I use in the projects pages like this one: https://stephanieberube.com/vin-o-wine/ and all the other projects.

[Berube]

And I tested the website on another computer and it doesn’t show the font as well so it is not only on mobile finally.

And it was another of my question, I noticed that, as shown on the screenshot you took, there are small grey lines on the navigation bar… how do I remove these?

Thank you

[ruenel]

Hello There,

Montserat font is not working because your custom css is nowhere to be found in your server.
https://stephanieberube.com/wp-content/themes/pro-child/custom.css, http://prntscr.com/kgv72i

And by the way, you will need a unique handle for each style that you will enqueue. Please have your code updated:

function custom_scripts() {
  wp_enqueue_style( 'custom_css', get_stylesheet_directory_uri().'/custom.css' );
  wp_enqueue_style( 'child_css', get_stylesheet_directory_uri().'/style.css' );
}
add_action('wp_enqueue_scripts', 'custom_scripts', 9999 );

And please make sure that you have uploaded custom.css file or you have pointed the code to the correct file location.

Please let us know how it goes.