Hi,
On our site, the former developper created a child theme for Newspaper. In the child theme style.css he declared custom fonts like that:
@font-face {
font-family: 'neosanspro';
src: url('css/fonts/NeoSansPro.ttf');
}
Fonts are located into child theme directory wp-content/themes/Newspaper-child/css/fonts/
The problem we encounter appears to be with wp-booster which generate inline code (style declaration to avoid css blocking code):
<!-- Header style compiled by theme --><style>
@font-face {
font-family: "neosanspro";
src: local("neosanspro"), url("css/fonts/NeoSansPro.ttf") format("woff");
}
Whichever the page is, it includes relative path to fonts. So if you navigate to http://domain.com/mypage the browser tries to load http://domain.com/mypage/css/fonts/NeoSansPro.ttf which does not exists…
How to handle this? Is there a way to proper declare custom fonts into the child (we tried absolute path to fonts) theme or into the parent theme so as wp-booster optimization runs correctly?
Any help would be appreciated.
Hi,
The theme has a section where you can declare a custom font after you upload it to your server, just paste the path and add the font name – https://forum.tagdiv.com/using-custom-fonts/ so I guess this is the best solution to load your font on page and set it for each element or via custom css.
If you really want to declare in the code, please try to this via main theme and as reference you can take a look in stylesheet file and see how theme font is declared and try to do it in similar way – http://screencast.com/t/VoieXXF2B then check your page source and see if it is loaded.
Thanks!
Thanks Alin for your answer but:
the fonts are correctly loaded after css stylesheet loaded. The only problem comes from wp-booster which wants to include inline style declaration into the template (that’s cool to avoid css blocking rendering) but in the wrong way.
The wp-booster generated code refers to relative path to fonts (css/fonts/..) whereas the code snippet is generated on every pages (on page1, browser will try to load url/page1/css/fonts/font.ttf and on page2 url/page2/css/fonts/font.ttf). That’s insane.
Precisely it’s td_css_buffer.php::on_wp_header_render_header_css function that includes fonts declaration.
How can we avoid fonts to be caught by this “add_to_header” optimization?
Hi,
The absolute path it the right implementation for theme’s custom fonts system so if you set an absolute path it should work. Provide ftp and wp access and a link to this topic via email and we will take closer look at your configurations on monday and get back to your with replay.
Thanks for the message!
Hi,
we tried with absolute path too.
But as you can see on source, for example, on that page http://www.aerospatium.info/un-marche-en-plein-essor-mais-plein-dincertitudes/ the generated code still appears
<!-- Header style compiled by theme -->
<style>
@font-face {
font-family: "neosanspro";
src: local("neosanspro"), url("css/fonts/NeoSansPro.ttf") format("woff");
}
@font-face {
font-family: "neosanspro";
src: local("neosanspro"), url("css/fonts/NeoSansPro.ttf") format("woff");
}
@font-face {
font-family: "neosanspro";
src: local("neosanspro"), url("css/fonts/NeoSansPro.ttf") format("woff");
}
@font-face {
font-family: "neosanspro";
src: local("neosanspro"), url("css/fonts/NeoSansPro.ttf") format("woff");
}
whereas fonts are declared into child theme css as:
@font-face {
font-family: 'neosanspro';
src: url('/wp-content/themes/Newspaper-child/css/fonts/NeoSansPro.ttf');
font-weight: normal;
font-style: normal;
}
It’s like there are cache issue.
Thanks for your help
Hi,
The theme doesn’t come with a cache, if you use a cache plugin or cdn (ex. cloudflare) make sure you clear it and check again. If this doesn’t help please send an email at contact@tagdiv.com , include a link to this conversation and provide wp-admin and ftp access so we can take a look.
Thank you!
