selfhosted Font Loading via Custom Font Manager - Support | Kriesi.at

Viewing 8 posts - 1 through 8 (of 8 total)

Author

Posts
August 22, 2022 at 11:18 pm #1362432
Guenni007
Participant
on uploading custom fonts for selfhosting with Custom Font Manager
In what order does Enfold try to load the self-hosted fonts?
If I do it manually via a css, I offer the woff2 first ( see image on the bottom how entypo is loaded ) , because it provides the better but more modern compression method with brotli. Then only woff. But I have now noticed that with such a font Enfold loads the woff.
If ttf is present in the uploaded zip file – this will be uploaded first.

so on src for those selfhosted fonts it will be best to offer first woff2, woff, ttf, svg

i see that on class-font-manager.php from lines 526ff this is the sequence – but on an installation of mine the woff is loaded allthough the woff2 is present.

this is the generated css from selfhosted fontfiles via Custom Font Manager :

btw: this is how entypo-fontello font is loaded:

By the way, it’s not an academic question – it’s about performant websites. When modern browsers open a website, woff2 loads much faster than the other font container formats.

Small supplement: In the meantime I even upload woff2 and woff formats exclusively. If someone still opens my pages and doesn’t support these formats, then he may see the fallback font ;) – but first it has to load the woff2 – if browser supports it.
- This topic was modified 2 years, 4 months ago by Guenni007.
- This topic was modified 2 years, 4 months ago by Guenni007.
- This topic was modified 2 years, 3 months ago by Ismael.
August 31, 2022 at 12:00 pm #1363341
Ismael
Moderator
Hi Guenter!

Thanks for the inquiry.

Please try to edit the enfold/framework/php/font-management/class-avia-type-fonts.php file, around line 1061 inside the get_css_custom_font_face function, reverse the order of the items in the $urls array.
```
$css .=		implode( ",\r\n          ", array_reverse($urls) );
```
Expected result:
```
@font-face {
  font-family: 'aboreto-v2-latin';
  src: url('http://site.com/wp-content/uploads/avia_fonts/type_fonts/aboreto-v2-latin/aboreto-v2-latin-regular.woff2') format('woff2'),
    url('http://site.com/wp-content/uploads/avia_fonts/type_fonts/aboreto-v2-latin/aboreto-v2-latin-regular.woff') format('woff'),
    url('http://site.com/wp-content/uploads/avia_fonts/type_fonts/aboreto-v2-latin/aboreto-v2-latin-regular.ttf') format('truetype'),
    url('http://site.com/wp-content/uploads/avia_fonts/type_fonts/aboreto-v2-latin/aboreto-v2-latin-regular.svg#aboreto-v2-latin') format('svg'),
    url('http://site.com/wp-content/uploads/avia_fonts/type_fonts/aboreto-v2-latin/aboreto-v2-latin-regular.eot?#iefix') format('embedded-opentype'),
    url('http://site.com/wp-content/uploads/avia_fonts/type_fonts/aboreto-v2-latin/aboreto-v2-latin-regular.eot') format('embedded-opentype');
  font-style: normal;
  font-weight: 400;
  font-display: auto;
}
```
Cheers!
Ismael
August 31, 2022 at 12:13 pm #1363345

Guenni007
Participant

thanks Ismael – that works –

I already suspected that I had to work with array_reverse, only I didn’t find the place in the code where to put it.
Don’t you think it would be better to set this as default generation of the css for the urls?

August 31, 2022 at 3:46 pm #1363371

Günter
Keymaster

Hi Günter,

I added a fix:

Can you replace enfold\framework\php\font-management\class-avia-type-fonts.php

with the contents of

https://github.com/KriesiMedia/enfold-library/blob/master/temp_fixes/Enfold_5_1_1/framework/class-avia-type-fonts.php

This should load in the order of woff2, woff, ttf, svg, eot (if they exist).

You can use filter ‘avf_font_manager_file_formats’ to add additional formats or reorder as you like.

Can you check please.

Best regards,
Günter

August 31, 2022 at 6:14 pm #1363392

Guenni007
Participant

and how do you change the order now – the array_reverse seems to me a usefull idea. But now i do not see how it is done.
on line 140ff – that was my first attempt to change this. But has no influence on that.

The lines 977ff i do not understand how this reorders the font mime type loading sequence. Anyway – i do not need to understand all.

Can you please give a hint how the filter ‘avf_font_manager_file_formats‘ is used to change the order?

September 1, 2022 at 6:54 am #1363433
Ismael
Moderator
Hi!

Example usage of the avf_font_manager_file_formats filter.
```
add_filter('avf_font_manager_file_formats', function($formats, $context) {
    if($context == 'AviaTypeFonts')
    {
        $formats = array(
            'woff2'	=> "format('woff2')",
            'woff'	=> "format('woff')",
            'ttf'	=> "format('truetype')",
            'svg'	=> "format('svg')",
            'eot'	=> "format('embedded-opentype')"
        );

        // add another file format at the beginning of the array
        $formats = array("woff3" => "format('woff3')") + $formats;
    }

    return $formats;
}, 10, 2);
```
This example just returns the $formats in default order.

Regards,
Ismael
September 1, 2022 at 8:16 am #1363441

Guenni007
Participant

ok – this moves to my enfold snippet list ;) – Thanks

September 1, 2022 at 8:35 am #1363444

Ismael
Moderator

Hey!

No problem! Let us know if you have more questions. :)

Have a nice day.

Cheers!
Ismael
Author

Posts

Viewing 8 posts - 1 through 8 (of 8 total)

The topic ‘selfhosted Font Loading via Custom Font Manager’ is closed to new replies.