fontawsome - how to host on my own site?

[veganline]

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

I have downloaded a copy and put it in /themes/niara/fonts/font-awsome/

After that my experiments failed

[DRMasterChief]

maybe something in Niara theme?

Have done almost the same, maybe you find something interesting here:  

 

[lesley]

Why? Are you trying to make a online speed test happy? 

[datakick]

6 hours ago, lesley said:

Why? Are you trying to make a online speed test happy? 

I doubt it's performance reason. Many ad blockers actually block google fonts. Also, it's not very GDPR friendly. 

[MichaelEZ]

sorry i dont read full threat.. well i call it separately in header tpl

 

// well many modules use -> @import css 

Edited February 26, 2021 by MichaelEZ

[veganline]

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 February 24, 2021 by veganline

[lesley]

@datakick font awesome is not hosted by google usually, its hosted by either cloudflare, stackpath, or cdnjs, which if they were blocked would be a huge problem because a lot of shims and other js files are hosted there. 

@veganline  have you considered using the google font loader? That can get around some speed test issues. 

[Traumflug]

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.

[veganline]

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

…css/font-awesome.min.css (maxcdn.bootstrapcdn.com)

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

[lesley]

I think you are missing something, viewing the source of your site I can still see its in the head going to bootstrapcdn

[datakick]

17 minutes ago, veganline said:

I use Cloudflare.

Did you clear cloudflare cache?

[veganline]

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
Previous

…css/font-awesome.min.css (maxcdn.bootstrapcdn.com)

7.1 KiB

760 ms

Current

…css/font-awesome.min.css (maxcdn.bootstrapcdn.com)

7.1 KiB

210 ms

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

[Traumflug]

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'.

[veganline]

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.

@Traumflug
"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.