web-dev-qa-db-fra.com

@ font-face brisé dans le thème de l'enfant

Sur mon site, j'utilise Bootstrap pour la structure de base (bootstrap.min.css) et j'utilise ma propre feuille de style (style.css) pour apporter d'autres améliorations ou modifications. J'ai déclaré @font-face dans ma feuille de style comme ci-dessous:

@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;
}

Cela fonctionne bien, mais dans mon thème enfant, la police Roboto ne se charge pas du tout. J'ai mis mes styles en file d'attente dans functions.php comme ci-dessous:

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' );

J'ai même essayé de redéclarer @font-face dans mon thème enfant avec le chemin d'accès aux polices du thème parent:

@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;
}

J'ai vérifié la console du navigateur et confirmé qu'il n'y avait pas de code 404 pour les fichiers de police.

Qu'est-ce qui ne va pas?

child-themewp-enqueue-style
1
Mayeenul Islam

Le problème n'est pas présent dans votre @ font-face, mais dans le functions.php où vous avez mis les feuilles de style en file d'attente.

Ce que je suppose, c'est que votre thème parent met en file d'attente les feuilles de style comme ci-dessous:

<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' />

Mais que se passe-t-il dans le thème de votre enfant?

<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' />

Parce que le code du thème Enfant devient prioritaire.

Donc vous auriez besoin de quelque chose comme ci-dessous - un ordre correct de dépendance de feuille de style ( comme mentionné ici avec $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' ) );

Notez que la déclaration array('bootstrap') sur le style parent chargera le style parent après le démarrage, et la déclaration array( 'parent-style' ) sur le style enfant chargera le style enfant après le style parent.

<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' />

Suivez la dépendance appropriée en conséquence si vous avez plusieurs autres fichiers CSS dans votre thème parent.

2
Mayeenul Islam