The Weirdest Google Fonts and What To Do With Them
New Week = New Google Fonts
Google Fonts is constantly adding new fonts to their long library of fonts on a weekly basis and it’s great! I personally subscribe to Google Font’s twitter feed (which I did not know they had for the longest of time!) to keep a pulse on what fonts are being released and other changes to their platform.
It’s great! There’s a lot of great fonts being highlighted, some great info, and sometimes some fun little projects people are doing. 10 out of 10 twitter feed, would recommend.
Recently however, I have been noticing some weird fonts being released and I need to talk about them. You, much like past me, will take a quick little glance at these fonts and think that they are weird and quirky and useless. But I am here to tell you you’re wrong! Well… they are very much weird and quirky but they are far from useless and I am here to tell you why.
Come with me. Let’s talk about these ‘lil weird fonts.
The Redacted Font is as if a person took a black highlighter to a document, blacking out every word and every space (the only font I’ve seen like this). It has a great “this is an official document” feeling that you see in a government release. It is also a monospaced font, so regardless the letter being used they will all be the same sized space.
The Redacted Script Font is the cursive alternative of this font family. All letters are transformed to an indiscernible script font in the style of handwriting. It has that nice personal feel unlike the Redacted Font. The best part about this font is that it have different weights so depending on the size of it, you can have it properly weighted.
How To Use Redacted Fonts:
Both of these fonts are great for rapid prototyping, allowing you to keep the focus on the design and general layout without getting hung up on what the words say or the font choice. The Redacted Script is especially nice for testimonial sections of a prototype. I also think there is a lot of potential in using the Redacted font for an interactive web browser puzzle game. Since it’s a mono font, you could essentially find a another monospaced font with similar sizing and reveal that text under the redacted text upon hover.
Flow Font Family
These all are the essentially the same font but with different amounts of rounded corners:
- Flow Circular: Fully rounded corners for a nice pill shaped style
- Flow Rounded: Slightly rounded corners
- Flow Block: Crisp sharp corners
How To Use Flow Fonts:
These fonts are my goto prototyping fonts! They all account for spaces and different letter sizes (unlike the Redacted font) giving a more true and realistic feeling of how fonts will appear.
When I first heard about these fonts I was a bit baffled on why there would be a dedicated font to emojis. Then I remembered that every browser, every operating system, ever app can and do have their own library of emojis to render for the user to view. So a green apple emoji (🍏) will display differently depending on if you are viewing it on your iPhone, your Pixel, Firefox, Twitter, Skype, WhatsApp and so on. There is even a dedicated website (Emojipedia.com) that catalogues all the different emojis on all the different platforms and how they are displayed.
How To Use Emoji Fonts:
Not only are the Emojis in this font one of the better designed ones out there, but this dedicated font will allow you to have a consistent style to your Emojis in your content and designs across all browsers, operating systems, and apps. Since Noto Emoji has solid color outlined emojis, this will allow you to better incorporate emojis as a part of a light theme / dark theme applications. Noto Emoji is a variable font that also allows you to change the weight of the thickness on the emojis, which is very helpful as they scale up or down in their size.
Kabla and Other Color Fonts
As I was finally coming to fully understand all the interesting things you can do with variable fonts (like the Wonky Axis variable, which is officially my favorite axis), Google Fonts then released and introduced me to Color Fonts. As of writing this, there are only 9 on Google Fonts and it was my first exposure to this type of font.
Most fonts have one color that is applied to them, but similar to variable fonts, the designer or developer can edit the different variables of a color font to change how it appears. With color fonts, the variables that are editable essentially boil down to which parts of the font are what color(s) and what style (solid, radial gradient, linear gradient, etc). So as an example, the Nabla font has variables so different parts of each letter can be colored and even have shaded gradients.
These fonts are using a new format called COLRv1 which is not 100% compatible with all browsers at this current time, most noticeably Safari.
How To Use Color Fonts:
This will really depend ons on the font and what variables it has that you can work with. Having the ability to apply gradients to a font as a part of the font could be used to really jazz up a design whether it’s subtle or a bold gradient. I am mostly excited to see more color fonts be created and to see how designers incorporate them into their designs.
That’s about it!
That’s all the truly weird fonts that I know.
I really am excited to see more interesting fonts like this appear on Google Fonts. I love all normal fonts, but seeing new fonts like these come along really makes me think of the interesting ways a font can be used in a design.
If you know of any fonts that I missed, do get in touch! I’d love to know about all the other ‘lil oddball fonts out there.