-
Posts
-
We added our fonts to Enfold theme according to documentation. And it works great. BUT Enfold theme loads fonts by this order: .eot first, then .svg, then .ttf,.woff and .woff2 last.
We need to change this order: .woff2 should be loaded first, then .woff, then .ttf and then all others.I noticed that after the user uploads fonts via wp-admin panel, Enfold theme will create the file enfold_child.css and will add all uploaded fonts there. But the order of them will be not as we need. We can’t do changes in this file, because it could be overwritten by Enfold theme if we add another font or update the theme.
So the question is: how can I change the order of loading fonts extention? Do you have some hooks or filters for this?
Thanks!
Looking forward to your response.Hi cberentz,
I have checked the code in wp-content > themes > enfold > config-templatebuilder > avia-template-builder > php > font-manager.class.php (line 526-535) and it seems to be loading in the order you want:
$output .= " @font-face {font-family: '{$font_name}'; font-weight: normal; font-style: normal; font-display: {$font_display}; src: url('{$fstring}.woff2{$append}') format('woff2'), url('{$fstring}.woff{$append}') format('woff'), url('{$fstring}.ttf{$append}') format('truetype'), url('{$fstring}.svg{$append}#{$font_name}') format('svg'), url('{$fstring}.eot{$append}'), url('{$fstring}.eot{$qmark}#iefix') format('embedded-opentype'); } #top .avia-font-{$font_name}, body .avia-font-{$font_name}, html body [data-av_iconfont='{$font_name}']:before{ font-family: '{$font_name}'; } ";Also, you should be able to use this hook avf_font_manager_load_font ( reference: https://kriesi.at/support/topic/font-loading-entypo-fontello/ )
Best regards,
NikkoHi Nikko,
thank you very much for your detailed answer.
But I still have a few questions. And I would be very grateful for your help.The avf_font_display hook, which is described here (reference: https://kriesi.at/support/topic/font-loading-entypo-fontello/), works great, but it’s not really what I want.
Using the avf_font_manager_load_font hook does not in any way helped to me affect the font connection order, which we can see in the /wp-content/uploads/dynamic_avia/enfold_child.css file (screenshot)
Accordingly, the .ttf is loaded first, not the .wof2 (screenshot)
Is it possible to change the CSS code in the enfold_child.css file using filter (namely, the order of loading fonts)?Thank you in advance.
And I look forward to your reply.Best regards,
CorneliusHi Cornelius,
Thanks for pointing it out.
I apologize for pointing the incorrect file, it’s actually wp-content > themes > enfold > framework > php > font-management > class-avia-type-fonts.php (go to line 1037 based on Enfold 4.8.2):$css .= implode( ",\r\n ", $urls );then replace it with this code:
$css .= implode( ",\r\n ", array_reverse($urls) );Then re-upload the font again and you should see it in the order that you want.
Unfortunately, the solution would require tweaking the parent theme.
Let us know if this helps.Best regards,
NikkoHi Nikko,
thanks for the help, it really works!But I’m afraid that these changes can be overwritten, when we update the theme, right?
Do you have plans to make these fixes in a new version of the theme?
Best regards,
Cornelius
- You must be logged in to reply to this topic.