self-host or pick a CDN font-awesome webfont and css instead of using their JS and CDN

[Sayrus]

Summary

Allow user to self-host or use a privacy oriented CDN for the woff/woff2/ttf/... file instead of using Javascript on Font Awesome CDN. This could take the form of few values in _config.yml.

font-awesome:
   webfont: true # Optional - use webfont instead of javascript
   cdn: "base_url" # Optional - use another CDN than Font Awesome (website URL or empty to self-serve)

Motivation

Font Awesome icons won't load on any devices without Javascript (Tor Browser or Browser using NoScript) Font Awesome does track every websites using minimal-mistakes without users (and often owners) knowing it (no opt-out, and they do NOT respect DNT):

Font Awesome collects data about you:
- when you use Font Awesome's content delivery networks, or visit websites that do
...
You can opt out of Google Analytics using a browser extension.
Font Awesome does not respond to the Do Not Track HTTP header.

Opt-out using an ad-blocker is kind of a joke ... Do not wait for full page load to replace (Faster rendering, avoid recompiling 1MB of Javascript, avoid executing Javascript, and maybe better caching as extensions offers to cache the woff file if the name match to have your "own CDN" on localhost)

Drawbacks

More traffic on your website? Usually cached anyway, especially if you are using your own CDN or something like Cloudflare.

No drawbacks if you just use a CDN that doesn't track you without consent.

Best regards,

[mmistakes]

I'm against adding more on/off flags in the theme as there are already too many. The theme already allows you to override all of the JavaScripts used by the theme.

{% if site.footer_scripts %}
  {% for script in site.footer_scripts %}
    {% if script contains "://" %}
      {% capture script_path %}{{ script }}{% endcapture %}
    {% else %}
      {% capture script_path %}{{ script | relative_url }}{% endcapture %}
    {% endif %}
    <script src="{{ script_path }}"></script>
  {% endfor %}
{% else %}
  <script src="{{ '/assets/js/main.min.js' | relative_url }}"></script>
  <script src="https://kit.fontawesome.com/4eee35f757.js"></script>
{% endif %}

If you set footer_scripts array in your _config.yml you can use whatever scripts you want. Doing this overrides FontAwesome too so you can drop in local CSS/webfonts and load yourself.

Have a look through some of the closed issues because I believe I've answered this before with a better example.

https://mmistakes.github.io/minimal-mistakes/docs/javascript/#customizing

[Sayrus]

That makes sense for self-hosting or using a CDN for Javascipt content. However, I do think I cannot include custom stylesheet this way. Am I wrong?

If I actually can, I will close this issue as a workaround exists.

[mmistakes]

You can load whatever CSS you want. Really depends on how you want to do it and how you've installed the theme.

If you're forking it then you can change whatever you want. If you're using the theme as a ruby gem or remote_theme then I would override (the _includes/head/custom.html include) by copying it to your local repo.

Then copy whatever FA CSS/webfonts they provide, add a <link> element to custom head include pointing to the FA stylesheet, and disable the FA script in the footer.

You can also customize the CSS by adding rules directly to /assets/css/main.scss after the @import lines. This is covered in the theme's docs.

https://mmistakes.github.io/minimal-mistakes/docs/stylesheets/#customizing

[Sayrus]

Works like a charm, I should have read further the extras section.

Thanks!

[kayman-mk]

Solved this with a little script and removed the references to the CDN from the theme and adding a _includes/head/custom.html.

# remove the CDN dependency
LAYOUT_DIR=$(bundle show minimal-mistakes)

cp $LAYOUT_DIR/_includes/head.html $LAYOUT_DIR/_includes/head.html.old
sed '/fontawesome/d' $LAYOUT_DIR/_includes/head.html.old > $LAYOUT_DIR/_includes/head.html