As your use of WorkFlowy expands, you’ll be doing a lot more than creating lists. You might want to give life logging or journaling a go. Then there’s task management and project outlining, long-form writing, threshing out your blog posts… or just thinking about thinking.
You might very well want to have different fonts for different outlines, seeing as when you zoom into any list, you may potentially be moving into a different mode altogether. If you’re zooming into your journal, you may want to have a font that helps you put on your journaling hat. It could be a typewriter font… or whatever else. This post gives you those tools.
This is what you’re in for…
I’m getting ahead of myself here: Whatever font(s) you have installed on your machine, you’ll be able to create a custom tag for… and when you tag any list therewith, it and all its children lists will now take on that specific font:
The rhyme and reason
Carefully selected fonts can and will work wonders when setting up the workbench or writing environment that you actually want to hang out in. When I wrote my WorkFlowy book in WorkFlowy, I set my global font to Montserrat, an almost identical free alternative to the beautiful Gotham Rounded Light (which for commercial purposes costs an arm and a leg). So I got to write using the actual font that my book would end up having. That right there was pure magic. If I had know about this trick at the time, I would have been able to tag just my entire book-writing outline with a #Montserrat tag.
Go ahead and explore the wide world of fonts and you too will discover that certain font families go a long way in creating the aesthetics, and as a result, the mood or tone of what you are hammering out on your keyboard. You’ll easily find some gorgeous free fonts that are a snap to install.
Structure and order
It’s not all about prettifying your outlines. Your choice of font is also highly practical. Choosing a Monospaced font for certain outlines ensures that you have evenly spaced characters. There’s an example in the animated GIF shown above. Also, here’s a nifty little calendar setup that a WorkFlowy user, Rob Cherny, shared with me. A Monospaced font gets everything lined up nicely:
Behind the scenes: setting this up
You’re going to need 2 tools to get the job done. After setup, there is zero tinkering – they run behind the scenes. So don’t go all soft on me now. Put in the (minuscule) effort now and reap the benefits until… well, until your hard drive crashes.
- Tampermonkey (or similar). This is the 3rd post until now that I’ve brought in this neat little tool. You set it up in a minute or two and then you can forget that it even exists. Seek out and install the Tampermonkey extension (or similar) for your browser… and then create a new user script with the copy-paste JavaScript you can find here. I don’t know the first thing about JavaScript (neither can I manipulate it) – so you and I are probably in the same boat: copy and paste. That will get the job done
- Stylish: Chrome, Firefox, Opera. I hope you’re familiar with this extension by now. If not, here’s a free Stylish chapter download from my book. Make sure you have Stylish installed and then copy the code you’ll find in this shared WorkFlowy list into a new Stylish style.
Customizing your fonts in Stylish
This is what the code will look like in Stylish:
There are 3 examples above, but you can copy and tweak any of them to create your own font tags.
- In the 1st line: replace the description of your font
- In the 2nd line: replace my custom tag name with your own
- In the 3rd line: you need to insert the exact technical name of your font
You can create as many different tags for different font styles as you want. You could even change the color, size, font weight of your text, etc. In fact, this “trick” is really for styling any aspect of any list or outline you want (by tagging it). Changing up the font family was the first and obvious application for me. That’s just to say that the sky’s the limit if you care to tinker with CSS.
Once you’ve fine folk have got this up and running, would you mind posting a link (in the comments) to a screenshot of an outline that you’ve used a font tag on? That would be really cool 🙂
Additional tagging tips:
- Take a look at Ksenia’s font tag syntax which plays nice with WorkFlowy’s tag autocomplete feature.
- Try making your font tags transparent.
- Tinker with this code to hide/ archive any lists.
- To hide bullets in any outline, this is how.
Get EXCLUSIVE bite-sized WorkFlowy updates: tips, tricks & news about FREE online workshops with Frank Degenaar. Sign up here.