How to load CSS files from theme?
-
Hi π
By default, CSS files are added from URL. Can I change it somewhere to add them from my theme files? I need that because I would like to set the headers expires for those files.
Thanks!
-
Hello, if I’ve understand your question correctly, you’re asking to be able to configure this plugin to load Font Awesome from CSS files in your theme, instead of loading from the Font Awesome CDN. Is that right?
If so, then no, this is not possible. Also, I think that doing so would undermine most of the intended functionality of this plugin. This plugin tries to ensure that just one official release of Font Awesome is loaded, to avoid conflicts, maximize feature availability, and access the latest icons (including Pro icons when enabled), and that its version, technology, and compatibility settings can be configured by the WordPress site owner.
As for headers and cache expiration, the Font Awesome CDN uses headers that maximize the possibility of browser caching. The URLs are specific to each numbered release of Font Awesome. Therefore, the assets they refer to do not change. So long-term browser disk caching is preferred.
Does that help?
Hi, thanks for the answer! But is there any way to “Eliminate render-blocking resources”? I’m using LiteSpeed sever with LiteSpeed plugin, but even then Google PageSpeed Insights suggests to eleminate FontAwesome CSS files because they are render-blocking.
Thanks!
Oh, OK, if you’d like to avoid render blocking I can think of some options you might try:
1. switch to SVG/JS instead of WebFont/CSS technology
2. stick with WebFont/CSS but switch to using a Kit instead
For #2, if you don’t already have a Font Awesome account, you can set up a free one to create a Font Awesome Free kit which you can configure to use WebFont/CSS. Your Font Awesome account page will let you generate an API Token that you can add to this plugin to select your kit for loading by this plugin.
Ok… what if I download files manually I add all required files with wp_enqueue_style()? I’m asking because I was try it earlier and there was a differences in icons, for eg. in Facebook.
Yeah, it’s always an option to “self-host” (where you store the files yourself and load them–only the ones you have a license for, of course).
To do that, though, you are leaving behind almost all of the convenience and help that this plugin offers–and performance benefits of the Font Awesome CDN–which is fine, if it suits your use case.
As for the icon differences, there are times when the icon designs are updated or fixed, as reflected in Changelog notes like this.
So if you end up needing to change versions at some point, then you’d need to do all of that manually as well, instead of just having a drop-down to select a different version, as this plugin provides.
You can find whatever version of Font Awesome Free you need from the GitHub repo here. If you’re a Pro subscriber, then you can also link your account to the FA Pro GitHub repo–or just download a zip file of all of the web assets from your Font Awesome account.
Something else to consider, though: even if you self-host, and enqueue your own assets of wp_enqueue_style(), I think that still wouldn’t solve your render-blocking problem without extra effort.
I’ve seen that done for loading stylesheets with fonts asynchronously by writing JavaScript that modifies the DOM element after the page loads to subsequently load the CSS/WebFont. But wp_enqueue_style() isn’t going to do that kind of magic for you.
The topic ‘How to load CSS files from theme?’ is closed to new replies.