Font Style not showing in most browsers

I styled my blog category pages with Rock Salt using the code below but it only shows that way on my desktop, not on my laptop or other devices (see screenshots).

/ Add post Category Titles
// =============================================================================
function add_category_titles(){ ?>

<?php if ( is_category() || x_is_portfolio_category() ) : ?> <?php $meta = x_get_taxonomy_meta(); $title = ( $meta['archive-title'] != '' ) ? $meta['archive-title'] : __( 'Category Archive', '__x__' ); $subtitle = ( $meta['archive-subtitle'] != '' ) ? $meta['archive-subtitle'] : __( "Below you'll find a list of all posts that have been categorized as ", '__x__' ) . '“' . single_cat_title( '', false ) . '”'; ?>

<?php echo $title ?>

<?php echo $subtitle ?>

<?php endif; } add_action('x_after_view_global__slider-below', 'add_category_titles');

// =============================================================================

Hey Donna,

Your Blog page header was built using the Header builder and you’re using the Rock Salt font for the Blog title so the Rock Salk font family is loaded in the frontend.

The custom code method does not load the font so it will not display. The solution is to load the Rock Salt font by enqueueing it. You can follow the guide from this article: https://www.wpbeginner.com/wp-themes/how-add-google-web-fonts-wordpress-themes/

In the future, you might not need this method because you will be able to create a custom archive template with dynamic data. For more details, please see https://theme.co/apex/forum/t/status-report-july-31-2018/39909

Thanks.

I did that but it doesn’t work. I tried placing the below code into my function.php file but where do I place it? I tried under Enqueue Parent Stylesheet replacing the existing stylesheet code, then adding it below it, and then below a double line below everything else, none of them worked.

function wpb_add_google_fonts() {
 
wp_enqueue_style( 'wpb-google-fonts', 'href="https://fonts.googleapis.com/css?family=Rock+Salt" rel="stylesheet', false ); 
}
 
add_action( 'wp_enqueue_scripts', 'wpb_add_google_fonts' );

Try using the URL only for the second parameter of wp_enqueue_style. You currently have the href=" and rel="stylesheet'in there.

Here’s a screenshot of the code from the article.

If you still can’t make this work, you can use the @import method. This is not the best for performance but the setup is easier. Add the @import line at the beginning of the Global CSS or Theme Options > CSS.

Thanks.

The code you tried to show me are cut off. Can you paste them again? I don’t want to use the other method to slow down my site. The whole reason I switched my blog to wordpress in the first place is to make it faster.

And yes, I had seen that screenshot, that’s the code I pasted in my function.php file.

Hi Donna,

What Christian meant is you include this rel="stylesheet' on your code but it should not.

Update your code to this:

function wpb_add_google_fonts() {
 
wp_enqueue_style( 'wpb-google-fonts', 'https://fonts.googleapis.com/css?family=Rock+Salt', false ); 
}
 
add_action( 'wp_enqueue_scripts', 'wpb_add_google_fonts' );

If you’re concern about the site performance, you can follow some of our performance tips here.

Hope it helps,
Cheers!

Thank you, that worked! And thanks for the performance tips.

You are most welcome. :slight_smile:

1 Like

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.