Theme font not displaying
-
Good morning,
On my website fasol.nl something is wrong with my theme. Long story short:
I’m using Baskerville by means of a child theme.
On the frontend website (I tried Chrome, Firefox and Edge) however, all titles are displayed in a standard font (Arial apparently) instead of the font that Baskerville prescribes. Peculiarly, on mobile everything seems normal.I suspect that there is some css lying around somewhere that prevents this. However, I cannot find what is causing the error.
To see the difference: check the titles here https://www.fasol.nl/blog/ and compare with this: https://www.drukkerswerkplaats.nl/ (a website that also uses Baskerville and where the font is displayed correctly).
Can anyone please explain me where this goes wrong?Thanks,
Peter
-
This topic was modified 10 months, 1 week ago by
peterfasol.
The page I need help with: [log in to see the link]
-
This topic was modified 10 months, 1 week ago by
-
Hi @peterfasol,
The fonts.css file used to load the fonts isn’t being loaded on the site where the fonts are missing. It could be an issue with the enqueues in the child theme. If the child theme enqueues the parent theme stylesheet as well, the fonts.css enqueue in the parent theme could be overwritten.
— Anders
Hi Anders,
Thanks. I am not very good at this. I will quote my child theme’s style.css below. Am I correct that I should remove the line: @import url(“../baskerville/style.css”);
/*
Theme Name: Baskerville Child Theme
Theme URI:
Description: Baskerville Child Theme
Author: Anders Norén
Author URI:
Template: baskerville
Version: 1.0.0
*/
@import url("../baskerville/style.css");
/* =Theme customization starts here
------------------------------------------------------- */
*/
.header { padding: 70px 0; }
.header .cover { background: rgba(29,29,29,0.25); }
.header-inner { position: relative; }
.header .blog-logo { text-align: center; }
.header .logo { display: inline-block; }
.header .logo img {
max-height: 150px;}
.dd_outer {
display: none;
}
.searchform .s {color: #000!important;}
*/
.pagination {
clear:both;
padding:20px 0;
position:relative;
font-size:11px;
line-height:13px;
}
.pagination span, .pagination a {
display:block;
float:left;
margin: 2px 2px 2px 0;
padding:6px 9px 5px 9px;
text-decoration:none;
width:auto;
color:#fff;
background: #262626;
}
.pagination a:hover{
color:#fff;
background: #13C4A5;
}
.pagination .current{
padding:6px 9px 5px 9px;
background: #13C4A5;
color:#fff;
}@peterfasol No, if your child theme only loads the parent theme stylesheet through style.css then that shouldn’t be the cause. Does your child theme have a functions.php file? If it does, can you post the contents of it here?
You can try deactivating the GDPR plugin the site is running to see if that’s causing the issue, but I doubt it since the fonts are included on the server, in the theme folder.
Hi Anders,
Here’s the functions.php of the child theme:
<?php // Opening PHP tag - nothing should be before this, not even whitespace
// Custom Function to Include
function show_jp_post_views( $post ){
if( !is_object( $post ) ) return;
if( function_exists( 'stats_get_csv' ) ){
$args = array(
'days' => -1,
'post_id' => $post->ID,
);
$postviews = stats_get_csv( 'postviews', $args );
$views = $postviews['0']['views'];
echo $views;
}
}
// dependency order stylesheets
function CHILD_load_style() {
if ( ! is_admin() ) {
wp_register_style( 'baskerville_style', get_template_directory_uri() . '/style.css' );
wp_enqueue_style( 'CHILD_style', get_stylesheet_uri(), array( 'baskerville_style' ) );
}
}
add_action( 'wp_print_styles', 'CHILD_load_style', 1 );
// add TNG to the WP Toolbar
function custom_toolbar_link($wp_admin_bar) {
$args = array(
'id' => 'TNG',
'title' => 'TNG',
'href' => 'https://www.fasol.nl/tng/admin.php',
'meta' => array(
'class' => 'TNG',
'title' => 'TNG'
)
);
$wp_admin_bar->add_node($args);
// Add Analytics to WP Toolbar
$args = array(
'id' => 'Analytics',
'title' => 'Analytics',
'href' => 'https://analytics.google.com/analytics/web/',
'meta' => array(
'class' => 'Analytics',
'title' => 'Analytics'
)
);
$wp_admin_bar->add_node($args);
// Add Adsense to WP Toolbar
$args = array(
'id' => 'Adsense',
'title' => 'Adsense',
'href' => 'https://www.google.com/adsense/',
'meta' => array(
'class' => 'Adsense',
'title' => 'Adsense'
)
);
$wp_admin_bar->add_node($args);
// Add Webmaster Tools to WP Toolbar
$args = array(
'id' => 'Search console',
'title' => 'Search console',
'href' => 'https://www.google.com/webmasters/tools/',
'meta' => array(
'class' => 'Search console',
'title' => 'Search console'
)
);
$wp_admin_bar->add_node($args);
// Add Adwords to WP Toolbar
$args = array(
'id' => 'Zoekwoordplanner',
'title' => 'Zoekwoordplanner',
'href' => 'https://adwords.google.com/ko/KeywordPlanner/Standalone/Home',
'meta' => array(
'class' => 'Zoekwoordplanner',
'title' => 'Zoekwoordplanner'
)
);
$wp_admin_bar->add_node($args);
// Add WordPress Support to WP Toolbar
$args = array(
'id' => 'Wordpress Support',
'title' => 'Wordpress Support',
'href' => 'https://wordpress.org/support/users/peterfasol/',
'meta' => array(
'class' => 'Wordpress Support',
'title' => 'Wordpress Support'
)
);
$wp_admin_bar->add_node($args);
}
add_action('admin_bar_menu', 'custom_toolbar_link', 999);
remove_action( 'wp_head', 'print_emoji_detection_script', 7 );
remove_action( 'admin_print_scripts', 'print_emoji_detection_script' );
remove_action( 'wp_print_styles', 'print_emoji_styles' );
remove_action( 'admin_print_styles', 'print_emoji_styles' );
// Breadcrumbs
function the_breadcrumb() {
global $post;
echo '<p id="breadcrumbs">';
if (!is_home()) {
echo '<a href="';
echo home_url();
echo '" title="Homepage">';
echo 'Home';
echo '</a> > ';
if (is_category() || is_single()) {
echo '';
the_category(' > ');
if (is_single()) {
echo ' > ';
the_title();
echo '';
}
} elseif (is_page()) {
if($post->post_parent){
$anc = get_post_ancestors( $post->ID );
$title = get_the_title();
foreach ( $anc as $ancestor ) {
$output = '<a href="'.get_permalink($ancestor).'" title="'.get_the_title($ancestor).'">'.get_the_title($ancestor).'</a> >';
}
echo $output;
echo '<strong title="'.$title.'"> '.$title.'</strong>';
} else {
echo '<strong> '.get_the_title().'</strong>';
}
}
}
elseif (is_tag()) {single_tag_title();}
elseif (is_day()) {echo"<li>Archive for "; the_time('F jS, Y'); echo'</li>';}
elseif (is_month()) {echo"<li>Archive for "; the_time('F, Y'); echo'</li>';}
elseif (is_year()) {echo"<li>Archive for "; the_time('Y'); echo'</li>';}
elseif (is_author()) {echo"<li>Author Archive"; echo'</li>';}
elseif (isset($_GET['paged']) && !empty($_GET['paged'])) {echo "<li>Blog Archives"; echo'</li>';}
elseif (is_search()) {echo"<li>Search Results"; echo'</li>';}
echo '</p>';
}
//pagination
function pagination($pages = '', $range = 4)
{
$showitems = ($range * 2)+1;
global $paged;
if(empty($paged)) $paged = 1;
if($pages == '')
{
global $wp_query;
$pages = $wp_query->max_num_pages;
if(!$pages)
{
$pages = 1;
}
}
if(1 != $pages)
{
echo "<div class=\"pagination\"><span>Pagina ".$paged." van ".$pages."</span>";
if($paged > 2 && $paged > $range+1 && $showitems < $pages) echo "<a href='".get_pagenum_link(1)."'>« Eerste</a>";
if($paged > 1 && $showitems < $pages) echo "<a href='".get_pagenum_link($paged - 1)."'>‹ Vorige</a>";
for ($i=1; $i <= $pages; $i++)
{
if (1 != $pages &&( !($i >= $paged+$range+1 || $i <= $paged-$range-1) || $pages <= $showitems ))
{
echo ($paged == $i)? "<span class=\"current\">".$i."</span>":"<a href='".get_pagenum_link($i)."' class=\"inactive\">".$i."</a>";
}
}
if ($paged < $pages && $showitems < $pages) echo "<a href=\"".get_pagenum_link($paged + 1)."\">Volgende ›</a>";
if ($paged < $pages-1 && $paged+$range-1 < $pages && $showitems < $pages) echo "<a href='".get_pagenum_link($pages)."'>Laatste »</a>";
echo "</div>\n";
}
}
// Remove Continue reading
function sbt_auto_excerpt_more( $more ) {
return ' >>>';
}
add_filter( 'excerpt_more', 'sbt_auto_excerpt_more', 20 );
function sbt_custom_excerpt_more( $output ) {return preg_replace('/<a[^>]+>Continue reading.*?<\/a>/i','',$output);
}
add_filter( 'get_the_excerpt', 'sbt_custom_excerpt_more', 20 );@peterfasol Ah yes, this seems to be the culprit:
wp_register_style( 'baskerville_style', get_template_directory_uri() . '/style.css' );By registering that style with the same handle as the parent theme style, you’re overwriting the parent theme stylesheet enqueue, which also includes fonts.css as a dependency.
Since your child theme stylesheet includes the parent theme stylesheet with @import inside of the child theme stylesheet, you can remove the line above from functions.php completely. (If you do, you can actually remove the @include line from your child theme stylesheet as well, since the parent theme stylesheet will be loaded by Baskerville itself.)
Yes! That did it, problem solved. Many thanks!
Peter
The topic ‘Theme font not displaying’ is closed to new replies.
