TrippyId Fonts API

The TrippyId Fonts API

If you want to use TrippyId Fonts with WordPress, please see the WordPress Specific page.

Calligraphy pen writing letters

The font server being used at fonts.trippyid.com is compatible with the Google Fonts API for font families. As long as your domain is allowed to use Trippy Fonts, if you currently use Google Fonts all you will need to do is replace fonts.googleapis.com with fonts.trippyid.com in your code and as long as TrippyId has the fonts you need, it will “just work”.

That being said, there are some things TrippyId Fonts does differently that can make life easier for you.

Font Family (aka Typeface)

With Google Fonts, when you just ask for a font family, all you get is the Regular Upright Roman 400 weight version of the font. For example:

https://fonts.googleapis.com/css?family=Dosis

Google Fonts has more weights available, but you have to do something special to get them, you have to tell Google Fonts you want them:

https://fonts.googleapis.com/css?family=Dosis:200,300,400,500,600,700,800

You literally have to specify every weight you want if you want more than just the regular weight. They even make you specify bold if you want the bold weight even though it is so frequently used. And if the typeface has italic fonts, you have to specify you want those too and in what weights.

I have seen many WordPress themes that forget to specify the Italic variant. This results in the web browser emulating italics when italic is needed, and while it often looks decent, it never looks as good as when the genuine italic font is used.

With TrippyId Fonts, the weights and variants can be specified but they are ignored when they are. The only thing TrippyId Fonts cares about is the family (typeface), and it will allow the web page to use every available font variant in that typeface:

https://fonts.trippyid.com/css?family=Dosis

Much simpler.

While making every font in the typeface available does make the generated CSS file a little larger, it is still a very small file in the grand scheme of things and it gets cached by the browser so it does not need to be downloaded very often.

The way browsers work with web fonts, they do not download every font in the CSS file. They only download the fonts that are specifically needed to render the page. Defining the additional available fonts available from the family does not increase the bandwidth needed to render your page unless the page wants to use them, in which case it only increases bandwidth needed if the user does not already have the font cached. And the page will look better as a result because genuine fonts are used where the browser would otherwise have to emulate the weight and variant.

Another difference, Google Fonts is case sensitive with the font family name.

https://fonts.googleapis.com/css?family=dosis

That will return a 400 error because the name of the font is not capitalized. The TrippyId font server does not care about case.

These differences between Google Fonts API and the TrippyId Font API can make it a lot easier on you, the webmaster. Even when you are using WordPress to generate the font request and are not creating it manually.

Screenshot of Theme Font ManagementThe image shown here is what the font setting window for the GTL Multipurpose theme looks like. Where the “Google font name & sets” is defined, it is a big long string that does not even fit in the available space. And the string would be even longer with italic variants of the various weights defined.

aside note: This theme has a bug. In the Font Family field it defaults to “Libre+Franklin“. That is incorrect, it should use a space instead of a + for that field. I had to fix that or the Libre Franklin fonts would not load because in the CSS file that defines the webfont, the font family is defined with a space and not a +.

I wanted to customize this theme to allow specification of a particular monospace font for <code> and <pre> blocks. With the TrippyID fonts API, for the “Google” font name and sets, I simply replaced that big ugly string with Libre+Franklin|Fira+Mono and I was done.

Not only was I done, but even the use of Libre Franklin was improved because italic text was now rendered using a genuine drawn italic font instead of the browser emulating the italic variant.

Font Family Subset

With Google Fonts, you can use the subset GET parameter to define what languages you want support for in the font. TrippyId fonts ignores that parameter. And with the vast majority of browsers, so does Google.

If Google detects that your browser supports Unicode Ranges, it sends a CSS file with support for all Unicode Ranges the font supports.

At this point in time, virtually every browser supports Unicode Range and as far as I can tell, every single browser that supports the WOFF2 format does.

What Google does, every font they server is split up into several smaller fonts by language. Which of these smaller fonts are downloaded by your browser is defined by the unicode-range definition in the web font CSS file that Google serves.

TrippyId Fonts is generally not going to do that. When the upstream font developer has already split a font up into multiple smaller fonts, I will use that split and define which font to use by Unicode Range, but unless the font has a really large size I generally am not going to split it up into smaller fonts.

Splitting up fonts is an optimization but it also sometimes increases the number of HTTP requests needed, and since browsers cache the fonts they download, for most pages it will make absolutely no performance difference whatsoever. The compressed WOFF2 fonts used by TrippyId Fonts (and Google Fonts) uses very good compression.

Without splitting, most font files are under 100kb and the largest I have personally seen in TrippyId fonts was only 240kb. That’s about a quarter of a megabyte. Even on very slow connections, the largest fonts without splitting are a very fast download. Managements of the fonts is much easier without splitting them and mistakes that could cause pages to not have the proper glyph available are less likely to happen.

There actually recently was such a bug in Google Fonts that would not have happened if they did not split the fonts up. KISS has value beyond just being a legendary 70s band.

Anyway, the subset parameter is ignored with TrippyId Fonts, and is also meaningless to Google Fonts for everyone except those using the very oldest browsers. In modern browsers, when a font is split up by language, the unicode-range parameter in the @font-face declaration is a better way to do things.

Font Format Support

TrippyId Fonts only serves web fonts in the WOFF2 format. This format is supported by the vast majority of currently supported web browsers:

https://caniuse.com/#feat=woff2

If you follow that link, you will see the following short list of browsers do not support it

  1. Internet Explorer 11 (and while not listed, all older versions of Internet Explore)
  2. Safari on OS X El Capitan and older
  3. UC Browser on Android (and while not listed, all other versions of UC Browser)
  4. Opera Mini

Opera Mini simply does not support web fonts at all. UC Browser is a effing security nightmare that simply should not be used. It seems to only be popular in Asia where some phones ship with it as the default browser, probably so it is easier to spy on what their users are doing. It is a really bad browser. However as bad as it is, I do suspect an update is coming that will support WOFF2.

TrippyId Fonts could support the first three listed by providing WOFF in addition to WOFF2 but I have chosen not to due to economic reasons. Simply put, it would more than double the space needed because WOFF files are larger than WOFF2 files.

If I was wealthy, server storage space would not be an issue. If a hosting company like Linode (what I currently use) or Digital Ocean wants to sponsor me with free server space, I will gladly add WOFF support.

However as I am paying for the space, it is more important to me to use the space I pay for to cover more fonts for the 90% and growing number of browsers out there than the 10% and shrinking number of browsers out there.

Internet Explorer

Internet Explorer seems to still have about 10% of the desktop market share. That number is a lot smaller when mobile users are taken into consideration.

Internet Explorer uses the Trident Engine, which Microsoft has officially stopped developing except for security updates. Edge does support WOFF2.

Unfortunately there are some corporate web applications that were designed poorly and only work properly with Internet Explorer. That combined with some perhaps exaggerated bad press about Edge will probably result in Internet Explorer remaining to be around for several years to come, though its market share is declining as users migrate to Edge.

Your website will still work for Internet Explorer and even use the right fonts if the user happens to have them installed on the local system. When an Internet Explorer does not have the specified fonts installed, it will just display using the browser default fonts or system fonts you have defined as the fallback in the site CSS file, if they are installed.

Safari on OS X El Capitan (and older)

First let me assure you that Safari on every version of iOS that is currently supported by Apple does support WOFF2. Furthermore, Safari on MacOS Sierra and High Sierra support WOFF2.

For desktop browsers, Safari has about 5% of the market. Of that 5%, since there have been two major releases since El Capitan that do support WOFF2, I suspect (but do not know) that only about 1% of the desktop browser market share is Safari on El Capitan an older. That guess is based on stats I have seen that suggest roughly 20% of OS X users do not use the current or next to current version of OS X.

I could not find an official end of life statement from Apple, but my suspicion is that with the next major release of MacOS (likely this fall) that support for El Capitan will likely officially end.

Safari on OS X El Capitan is not something worth worrying about. As with Internet Explorer, your website will work just fine for them, it just may not render using the fonts you specifically chose.

Font Availability

The collection of available fonts with TrippyId Fonts is currently rather small, but will grow rapidly.

To see the currently available fonts:

I will be attempting to add five new families every week, sometimes more. Every new customer I get, I will add three additional during that week in addition to any fonts they specifically need that can legally be served from TrippyId Fonts.

I am focusing on adding fonts that are currently available from Google Fonts. The entire motive of this project is to allow webmasters currently using Google Fonts to switch to a font server that does not track their users.

With the few font families I have added so far, there already have been several cases where the font family has both weights and styles that are not available from Google Fonts even though they could be.

In those cases I do make the additional weights and styles available at TrippyId Fonts so that webmasters who want to use them have the option to use them.

In some cases, alternate font widths (e.g. Condensed, SemiCondensed, ExtraCondensed) are available at TrippyId that are not available at Google Fonts.

There also will be cases in the future (near future) where some font families are made available that are not at Google Fonts at all.

Currently the selection of families at Google Fonts is much larger and it will probably always be larger, but any font family needed by a webmaster who uses TrippyId Fonts that is at Google Fonts, I can add. In many cases I can also add fonts not at Google Fonts, as long as the font license allows it. If this project really takes off, I am even open to the idea of licensing some commercial fonts to be made available through TrippyId Fonts, but that is a future ambition.

Leave a Reply

Your email address will not be published. Required fields are marked *

Anonymity protected with AWM Pluggable Unplugged