1

In my site I'm using Bootstrap for the basic structure (bootstrap.min.css), and using my own stylesheet (style.css) for further enhancements or modification. I declared @font-face in my stylesheet like below:

@font-face {
    font-family: 'roboto_condensedregular';
    src: url('fonts/RobotoCondensed-Regular-webfont.eot');
    src: url('fonts/RobotoCondensed-Regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/RobotoCondensed-Regular-webfont.woff') format('woff'),
         url('fonts/RobotoCondensed-Regular-webfont.ttf') format('truetype'),
         url('fonts/RobotoCondensed-Regular-webfont.svg#roboto_condensedregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

It's working fine, but in my child theme Roboto font is not loading at all. I enqueued my styles in functions.php like below:

function project_child_theme_enqueue_styles() {
    wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
    wp_enqueue_style( 'child-style', get_stylesheet_directory_uri() . '/style.css' );
}
add_action( 'wp_enqueue_scripts', 'project_child_theme_enqueue_styles' );

I even tried redeclaring @font-face in my child theme with the parent theme's fonts path:

@font-face {
    font-family: 'roboto_condensedregular';
    src: url('../parenttheme/fonts/RobotoCondensed-Regular-webfont.eot');
    src: url('../parenttheme/fonts/RobotoCondensed-Regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('../parenttheme/fonts/RobotoCondensed-Regular-webfont.woff') format('woff'),
         url('../parenttheme/fonts/RobotoCondensed-Regular-webfont.ttf') format('truetype'),
         url('../parenttheme/fonts/RobotoCondensed-Regular-webfont.svg#roboto_condensedregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

Either of the ways I checked the browser console and confirmed there is no 404 for the font files.

What's wrong?

1 Answer 1

2

The problem is not there in your @font-face it's actually in the functions.php where you enqueued the stylesheets.

What I assume your parent theme is enqueuing stylesheets like below:

<link rel='stylesheet' id='bootstrap-css'  href='http://example.com/wp-content/themes/parenttheme/bootstrap.min.css' type='text/css' media='all' />
<link rel='stylesheet' id='style-css'  href='http://example.com/wp-content/themes/parenttheme/style.css' type='text/css' media='all' />

But what's happening in your child theme:

<link rel='stylesheet' id='parent-style-css'  href='http://example.com/wp-content/themes/parenttheme/style.css' type='text/css' media='all' />
<link rel='stylesheet' id='child-style-css'  href='http://example.com/wp-content/themes/childtheme/style.css' type='text/css' media='all' />
<link rel='stylesheet' id='bootstrap-css'  href='http://example.com/wp-content/themes/parenttheme/bootstrap.min.css' type='text/css' media='all' />

Because Child theme's code is getting priority.

So you would need something like below - a correct stylesheet-dependency-order (as mentioned here with $deps):

wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css', array('bootstrap') );
wp_enqueue_style( 'child-style', get_stylesheet_directory_uri() . '/style.css', array( 'parent-style' ) );

Note, the array('bootstrap') declaration on parent style will load the parent style after bootstrap, and array( 'parent-style' ) declaration on child style will load the child style after parent style.

<link rel='stylesheet' id='bootstrap-css'  href='http://example.com/wp-content/themes/parenttheme/bootstrap.min.css' type='text/css' media='all' />
<link rel='stylesheet' id='parent-style-css'  href='http://example.com/wp-content/themes/parenttheme/style.css' type='text/css' media='all' />
<link rel='stylesheet' id='child-style-css'  href='http://example.com/wp-content/themes/childtheme/style.css' type='text/css' media='all' />

Follow the correct dependency accordingly if you have more other CSS files in your parent theme.

1
  • in my case, the parent minified css already includes bootstrap so all other parts of bootstrap css are working except the font. It won't load. Any other sugestions
    – C_B
    Feb 9, 2019 at 4:35

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.