Picostrap 3.3: Variable Fonts to the rescue



June 25, 2024

Join our Discord

Despite being free, the picostrap theme gets really a lot of love by us, and this radical update makes no exception.

This time It’s about fonts and typography, giving you more  power and freedom as usual: this update aims to solve a number of limits that our loyal users have reported - especially about the needs of having multiple font weights loaded.

Variable fonts are today a hot option, and in this release, we make it easy to take advantage of them.

Understanding Variable Fonts

Variable fonts represent a modern approach to font technology, consolidating various styles—such as weight, width, and slant—into a single file. Unlike traditional fonts that require multiple files for each variant, variable fonts optimize performance by reducing HTTP requests and enabling seamless interpolation between styles.

Integration of Fontsource

For the new fonts implementation, we resorted to a very new and praised service, FontSource.

Fontsource is a fantastic CDN - based service allowing easy and GDPR-compliant use of Google Fonts.

There are many aspects touched by this font “revolution” inside Picostrap.

The Font Choice Window

In the former releases we used a premade library called FontPicker (https://github.com/av01d/fontpicker-jquery-plugin).

While it served us greatly for many years, we have moved to another solution: using a new, totally custom made Font Choice Web Component that we built ourselves.
It looks and feels totally different. This is how it looks like:

You’ll find a more complete choice here, as in this new interface the Google Font List is constantly up-to-date, since  the FontSource API is recalled at each window load.

Variable Fonts are now present - and their usage is highly encouraged: by default, the Font Choice window does present Variable Fonts only

All font weights are now loaded by default, but you can as always retouch the import code if you wish. Using variable fonts, the overhead is negligible.

Font Combinations

Another compartment where you’ll find a small revolution is the readymade font combinations.

We’ve totally updated those combos to have variable fonts, and enriched the list.

View Font Combinations


More minor upgrades and fixes

In case you missed 3.2, here are some recent quality-of-life updates:

  • Added CodeMirror to Add Code to Header & Footer Customizer sections
  • Added option to disable Bootstrap in case you want
  • More solid Lightbox JS startup (Lightbox is always opt-in via Customizer)
  • Added a filter ('ps_main_sass') to add your own SASS programmatically to the pipeline
  • Updated WooCommerce templates

Well, that's pretty much all for today. We hope you'll enjoy this release, and that it will be the foundation for fantastic websites.