Released v5.3 of the WordPress plugin

A few days ago I released an update for the WordPress plugin. The updated introduces a couple bugfixes and a few enhancements. I hadn’t done an update for maybe a year, and in the meantime WordPress has continued to evolve. For example AJAX technology has been introduced to the installation / deinstallation process of plugins. Which means that you can install or deinstall plugins directly from the page of the plugins manager dynamically without a page reload or without going to a different page. However this also meant that plugins needed to change some of their internal code to deal with this, so an update had become necessary because otherwise the deinstallation process could have thrown an error, and it would have become impossible to deinstall without forcefully doing so from an ftp connection, which is not the best experience for a site admin. With the last updates of the plugin this has been fixed. String translations in Italian, Spanish, French and German have also been updated.

And a new function has been introduced, that gives a wider choice of fonts if anyone should want more specialized typographic layouts for their website / blog. In particular I have added an option for a Google Fonts API key. Upon activating the key, the BibleGet styling section in the WordPress Customizer will then have an updated list of the fonts that are available on the Google Fonts website. And not only: previews of the fonts will be downloaded so that you can preview them in the select list just in case you’re not yet sure which one to choose from.

I must say I am quite proud of the results. It wasn’t exactly an easy thing to implement. And I’m not even sure if anyone else has done this yet, because you have to be very careful about trying to load a lot of fonts on a page. It would easily have a negative impact on the loading performance of the WordPress Customizer. I wanted to attempt it by finding a way to keep the performance hit to a minimum. And I did so by having the plugin download a minimal version of these same fonts with select characters, instead of downloading the full version of each font with all the characters from A alla Z. Specifically only the characters that make up the name of the font will be downloaded for that font.

Google introduced a while back the possiblity to request only the necessary characters for any given font so as to load a minimal version of the font on a page. And in fact we were already using this functionality in the last few versions of the plugin with a fixed list of about 100 Google Fonts to choose from. Now however there would be some non trivial difficulties to overcome if we want to have the whole updated list of about 1000 fonts. In order to preview the fonts in the select list, the WordPress Customizer would have to make about 1000 requests all at once to the Google Fonts API every time you would open the Customizer; that however would have simply choked the page, because web pages are not able to handle that many requests and the browser would simply block them. So we had to find a way to download the previews locally to the website itself. But that posed another probem: as long as a web page requests a Google Font from a css “<link>” element effectively loading a stylesheet from Google, it is possible to request the minimal version of that font. But if it’s the web server that makes the request in order to directly download a copy of the font file and save it locally, there is not clear way of requesting the minimal version of the font. The full version of the font file with all the characters would be downloaded for each font. And we’d still have the problem of page loading performance.

Well, I did succeed in finding a way to request the minimal version of each font from Google. Practically when the minimal version of the font is requested via the link method, Google produces a stylesheet and in that stylesheet there is a URL that points to a file with a reduced version of the font. So I just needed to first make the request and get the stylesheet, then parse that stylesheet and capture the URL in it and use that URL to download the minimal version of the font.

And yet it’s not that easy (if that were easy). Google produces the reduced version of the font only when it’s a modern web browser requesting the file (for example when interpreting the stylesheet with the URL that points to Google’s servers). And by that we mean a browser that can handle compressed fonts. Google can tell when a browser can handle compressed fonts and only in that case does it actually produce the reduced version of the font file. Google in fact introduced a new compression for font files in an attempt to overcome the problems inherent with page loading performance when it comes to introducing more fonts on a page. These compressed fonts have a “woff” extension (“Web Open Font Format”) instead of a “ttf” extension (“True Type Font” or “Open Type Font”). But this technology is still very new and operating systems can not yet handle this kind of font, only the more modern browsers can because it’s more of a browser and web page performance problem. So if it’s a server that’s making the request (e.g. via a cURL request) and not a browser, Google will decide to send the full version of the font file and not the reduced version that was originally requested.

At this point it might have seemed that this was an impossible task, and in fact I was almost going to give up on this quest (and I’ll bet there are a number of web programmers who probably would have discouraged me from persevering along this path because they are all afraid of the consequences in page loading performance). And yet, I did find a way to get meself the reduced version of the font by simply shouting “hey, I know I’m not a browser, but heck I can still handle compressed fonts! Trust me!”. And lo and behold, I found that by doing so Google gave in and sent me the minimal version of the font, with just the requested characters! The font file received was not however in WOFF format but rather in TTF format, which is actually not so much a problem because perhaps not all broswers are yet capable of dealing with the WOFF format.

But we weren’t finished yet. The next obstacle that needed to be overcome: in order to load a preview of each font in the WordPress Customizer we would still have to load them through stylesheets. But if we have one stylesheet for each font, that would mean loading about 1000 stylesheets. Which even if they’re requesting local resources, is still just too much for a browser to handle. So one of the last steps was to simply combine all those stylesheets into one larger stylesheet to be a little bit kinder to our browsers.

But even that didn’t quite solve everything. A browser doesn’t actually load a font on a page until it really needs to, when it actually has to render it upon coming into view. But if the font previews are initially hidden inside of a select list, the browser is going to think “hey, I don’t need to load these right away, nobody is looking at them just yet, let’s hold off on this; if someone decides to open that select, well then I should start to load and render those font previews”. But guess what, that means the browser would have to load and render 1000 font previews at a moment’s notice when you do open that select list. That would be quite a processor intensive process that would pretty much block the page for a bit while until the process had finished. The select list would seem apparently empty when opening it, and maybe only a half-minute later would you actually see all the font previews. Well that’s not too cool, and if that were the only way it wouldn’t be worth it, it would be a pretty terrible experience and most people would complain about it. So one last touch to make this work was to try to twist the browsers hand into preloading the fonts even though they’re not immediately on the screen. I really don’t know if all browsers do listen to that kind of preloading instruction however, so I cannot guarantee that everyone will have a smooth experience with this. With my own trial and error using the latest Chrome version 80.0.3987.163 (oops it’s updating as I’m writing this) and a fairly performant HP laptop, I found the experience to be quite acceptable. So I decided to go for it and add this option to the latest update. If however some of you do see the FOUC (“Flash of Unstyled Content”) and are not happy with this, I would suggest not to activate the Google Fonts API key. Other than that, go and delve yourselves into interminable fonts to your heart’s content!

In the next update that I’m planning, I would like to implement a Gutenberg block, seeing that the WordPress pages editor has been evolving quite a bit and has started implementing this style of building pages with blocks which effectively would allow to eliminate shortcodes completely. Using shortcodes takes a little bit of technical ability whereas the block editor has a more intuitive interface that pretty much anyone can learn to use. Gutenberg, here we come!

Share your thoughts!

This site uses Akismet to reduce spam. Learn how your comment data is processed.