DEV Community

Cover image for Fontima: Optimize Your Google Fonts Requests
Leo de S.L.F
Leo de S.L.F

Posted on • Updated on

Fontima: Optimize Your Google Fonts Requests

Fontima delivers fine-grained font CSS.

It is based on the text URL parameter from Google Fonts, the one we use to subset a font by specifying which characters (actually glyphs) we need from it. Fontima lets you do that with just a couple of clicks while optimizing the CSS on the fly, producing better, measurable results to get the characters you need from the families you want when they are required.


Why Fontima?

Fonts need to be optimized.

We often say "images weight too much," so we use a battery of tools to optimize them. The problem is that fonts are as large or even larger than images. Fontima exists to address that issue, it can save you up to +95% on font files (CSS + WOFF2) and prevent undesired, automatic downloads by including the appropriate unicode-range value on each @font-face rule.

How to Use Fontima?

  1. Bring the code given by Google Fonts,
  2. Choose the characters you need,
  3. Click Optimize to get your CSS.

That's it!

Do I Need Fontima?

Prerequisite: have a clear idea of what the characters wearing a given font family will be.

It could be used for a web logo; a set of math symbols; a set of languages for any web/app that is not intended to be worldwide used (e.g.: a local web or a private business app); a single character, etc.

Pros and Cons of Using Fontima

✔️ Pros:

  • Download lighter files;
  • Download fewer files (for most cases);
  • Download fonts only when required.

❌ Cons:

  • Some fonts can not be optimized by GF*;
  • Fonts may have missing glyphs they are supposed to include;
  • Static CSS (instead of using a static URL to get the CSS dynamically).

*Specially the ones with non-standard/unregistered variable axes and an optical size value different than none, cases in which Google Fonts returns the default CSS.


Your feedback will be appreciated.

Thanks for reading!

Top comments (0)