Jump to content

Welcome, Guest!

By registering with us, you'll be able to discuss, share and private message with other members of our community.

veganline

fontawsome - how to host on my own site?

Recommended Posts

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites
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. 

Share this post


Link to post
Share on other sites

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

 

// well many modules use -> @import css 

Edited by MichaelEZ

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
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.

Share this post


Link to post
Share on other sites

@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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites
17 minutes ago, veganline said:

I use Cloudflare.

Did you clear cloudflare cache?

Share this post


Link to post
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
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.

Share this post


Link to post
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'.

Share this post


Link to post
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.

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

  • Like 1

Share this post


Link to post
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...