Tagged: Fonts
-
AuthorPosts
-
April 20, 2021 at 4:12 pm #1295580
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.- This topic was modified 3 years, 7 months ago by cberentz.
April 23, 2021 at 6:57 am #1296201Hi 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,
NikkoApril 26, 2021 at 1:04 pm #1296754Hi 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,
Cornelius- This reply was modified 3 years, 6 months ago by cberentz.
April 27, 2021 at 4:00 pm #1297027Hi 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,
NikkoApril 27, 2021 at 5:59 pm #1297054Hi 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,
CorneliusApril 28, 2021 at 4:19 pm #1297184Hi Cornelius,
You’re welcome and yes it will be overwritten during a theme update.
We’ll be requesting a filter for it.Best regards,
Nikko -
AuthorPosts
- You must be logged in to reply to this topic.