[Resolved] Merging font Icons : generatepress.woff2 & mycustomfont.woff2

[Sebastien]

Hi,

I would like to use only one file for my Icons using @font Css method: at the moment, I use generatepress.woff2 and I’ve added MyIcon.woff2 (in my child them)
I’m thinking about merging generatepress.woff2 & MyIcon.woff2 to use only one request.
Also, I would like to change the original file & location: generatepress.woff2 (by merging it) to another file Mycon.woff2 (containing all Icons) located in my child them

==> only one request, in my childthem ==> easier to manage – securize – and faster.

Could you please tell me if it is possible, and how to do? xD

thanks

[David]

Hi there,

in GeneratePress 2.3 we will be providing an option that replace the GeneratePress.woff for SVGs. So probably simpler to wait for that update which will be coming soon.

[Sebastien]

😀
can’t wait =)

[David]

Wont be long 🙂

[Sebastien]

Hey David,

I thought again of this point.
And I understand why as Optimized Theme you’re making the choice to switch to svg format.
But in my opinion, @font methode to manage icon will be still used by others plugins, page builders etc.

That’s why I think that the choice to use SVG instead of Font is not a best pratice.
Because if every plugin does the same, we’ll use a lot a SVG… too much.

THAT’s why 😀 …..
I think a the best methode would be to :
* listing and downloading all svg icon used in pages (few FontAwesome, Generatepress, my own icons etc.)
* create custom.woff2 file containing all icons listed
* create several CSS font classes (fontawesome, generatepress,MyIcon) redirecting to the SAME FILE : custom.woff2 : keeping the same name and classes, the same icon will be pick in custom.woff2 instead of generatepress.woff2 or fontawesome.woff2 or …

What do you think about that?

Possible?

Could you help? =)

[David]

SVG will be provided as an option. Some users experience unexplainable delays with getting WOFF files, we also see question regarding no fallback for the GP icon font. The SVG will remove those problems. There is no real noticeable performance differences between the SVG and WOFF version. Even when eliminating the font request.

Merging a bunch of fonts is not that straight forward. The GP Icons are exclusively used by the Theme. It is a tiny file and requires its own font name and CSS for it to work. This would introduce lots of issues.

To start with you can’t just merge all the fonts, you would need to use base64 encoding for all fonts and reference that in your @fontface, the problem with that is they can’t be cached by the browser meaning they have to be decoded on every page load.

The CSS for each GP icon font would have to be rewritten. So now you’re adding more CSS to overwrite the existing.

A single merged file, especially if it contains the FA icon library which is huge would mean all your fonts are now taking longer to load. As most of the GP Icons are used in the Navigation would lead to render blocking.

Personally i would avoid using FA icons, until they come up with a dynamic font set ie. you get to choose what it loads. Other icons i would build my own font for them. The worsts case i have the tiny GP icons if i choose not to use SVG and a tiny MyIcon font to load, most of which would be below the fold.

[Sebastien]

Thanks for this very usefull answer ! you are probably avoiding me to take the wrong way !

In my case: I use GP.woff2 , Mycon.woff2 (for my own icons).
My plan was to create once woff2 containing “only” the few icons used in my pages (not the full library of FA).

So, ok using SVG will avoid: MyIconwoff2 and Generatepress.woff2 but the problem will remains when using others plugins using icon, eg: slider (arrow, point, etc.). In my case I use Elementor page builder, I avoid FA but it stills use icon by: ie.woff2 (60kb) (Elementor own font.woff2) ….

by redirecting ie.woff2 I could optimized the size of the file…

Should I do nothing and let ie.woff2 loaded without been optimized? (this idea hurts me soo much)

[Sebastien]

this idea of merging woff2 and redirect font classes comes from the step 5 of this link : https://kinsta.com/blog/wordpress-icon-fonts/
but maybe it is a wrong idea.. ?

[David]

You can apply that method but i am not sure how you would go about ‘redirecting’ the elementor style sheet for FA icons.

[Sebastien]

Hey David,

Thanks a lot for your valuable advices.

Last question about this topic :

At the moment I use MyIcon.woff2 to display my own icons: used in content, but also in menu nav bar.
Do you think using SVG instead of MyIcon.woff2 would be better ?
After reading our exchanges, it makes me doublt about using woff2 for cache optimization….
I mean, my MyIcon.woff2 size is 9,6kb. Sometimes I read some request delay about 300-500 ms for every font (woff2) loaded. Maybe I should avoid to use any woff2 and tend to SVG as GP tend too ?

thanks.

[David]

We had a few users reporting excessing delays on loading a .woff file but we were unable to replicate that which probably meant it was a server config issue. I would test out using the WOFF and if you don’t have that issue then stick with that. If it proves a problem then look at using inline SVGs.

[Sebastien]

thanks for this new update ! 😀
I saw in GP prenium plugin that SVG option was release.
Where is this option settable please?

[Sebastien]

also: is there any release note ? (I saw the one in wordpress when asking to upgrade, but I’m not able to find it again … )

[Leo]

Take a look at this:
https://generatepress.com/gp-premium-1-8/

and this in the comments section:
https://www.screencast.com/t/bogJ64pj

Let me know if this helps 🙂

[Sebastien]

can’t wait GP2.3 !!!!!

[Author]

Posts