Jump to content
thirty bees forum

fontawsome - how to host on my own site?


Recommended Posts

I want to make a speed test happy by hosting Raleway font or Fontawsome or both, and am working on recipes. 

  • Fontawsome looks harder to understand. I don't really understand how it's downloaded at all, although I can see the calls to individual icons in the templates. All I need from it is a good-looking magnifyng glass; I can find work-arounds for the other icons. And I want my speed test to be happy. This is the one I need help on.
  • Raleway looks the easier candidate to start on from themes/niara/header.tpl
    <link href="https://fonts.googleapis.com/css?family=Raleway:400,500,600,700" rel="stylesheet">
    leading to google's css which includes cyrillic and vietnamese fonts that I don't need, so just a reduction of that could be worth a try. 

    I've copied their code (and the similar latin extension)...
    /* latin */
    @font-face {
      font-family: 'Raleway';
      font-style: normal;
      font-weight: 400;
      src: url(https://fonts.gstatic.com/s/raleway/v19/1Ptug8zYS_SKggPNyC0ITw.woff2) format('woff2');
      unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
    ...into bo/preferences/custom code/css
    It seems to work.
    Also, if I could load from my server instead of googles' one it would make my speed test happy. I have had a go but not got the H1 big fonts working yet on a test site. There's an alert suggesting the fontspring bulletrpoof format . So this isn't such a problem as Fontawsome but comments and ideas are welcome.

Any ideas for speeding-up the site by using less of Fontawsome or Google Fonts would be great, even if it is only to keep the speed test happy.


Edited by veganline
Link to comment
Share on other sites

On 2/22/2021 at 8:21 PM, veganline said:

Has anyone seen a mistake-proof guide to hosting fontawsome on-site?

Not a guide, but the task is fairly simple:

  1. Find the URL in your (S)CSS.
  2. Download the file behind this URL manually and place it somewhere on your server.
  3. Change the URL found earlier to point to the file on your own server.
  4. To verify, reload the page in your browser and watch which font files get downloaded.

Extra challenge in case of fonts is, they are not one, but many files. Which means, one has to download all the files. Usually, formats .woff and .woff2 are sufficient, one can drop all others (.ttf, .svg, ...).

Experts also tweak their CSS to embed used font glyphs, and only the used ones. This eliminates downloading FontAwesome altogether. Requires tools like PostCSS, post-url, NPM, ... well, for experts.

Link to comment
Share on other sites

@Traumflug dunnit! Google lighthouse still thinks fontawsome is hosted on...

12.8 KiB
200 ms

...so maybe that's just something wierd about my setup. I use Cloudflare. Maybe it's something like that as there's nothing in /header.tpl to point requests there

@Lesley thanks! I'll give it a try sooner or later

Link to comment
Share on other sites

All cleared, development mode, but I've still missed something; something injects google fonts and maxcdn.boostrapcdn.com into the header, even though it's not in /header.tpl

The good news is that download time has got better for unknown reasons

7.1 KiB
760 ms


7.1 KiB
210 ms

So I have a good result. Thanks all for help. The explanation will turn-up sooner or later.

Link to comment
Share on other sites

On 2/24/2021 at 5:13 PM, veganline said:

there's nothing in /header.tpl to point requests there

You'd be surprised how many modules try to reinvent the wheel and request such stuff them selfs. One really needs to grep (multi file search) all templates and style files to find them. Like 'grep -rn awesome.min'.

Link to comment
Share on other sites

Culprit found for fontawsome, at least for my shared server / cloudflare site...
header.tpl starts with special work-arounds for the extinct Internet Explorer 7 & 8 which mention fontawsome. I cut them out. Now fontawsome is on my site! The next step is to delete all that is not needed from it, maybe everything but the magnifying glass, but that will take thought and time.

"fonts.googleapis" isn't in the code so I suppose Cloudflare injects it, which I use for SSL so for now that has to stay.
I did find something to disable but it made no difference - a font chooser in the Stripe module.
(I duplicated my site in site in softaculous, unzipped a downloaded copy on Onedrive, and used the search box there before it said I was out of space and I deleted it all again). 

Thanks to all for help including Lesley for checking source code.

  • Like 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Create New...