Different Fonts for Different WorkFlowy Outlines

By

blog-book-button

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.

  1. 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
  2. StylishChrome, 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.

  1. In the 1st line: replace the description of your font
  2. In the 2nd line: replace my custom tag name with your own
  3. 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:


Get EXCLUSIVE bite-sized  WorkFlowy  updates: tips, tricks & news about FREE online workshops with Frank Degenaar. Sign up here.

Overwhelmed?

Workflowy replaces your notebooks, stickies and bloated apps with a simple, smooth digital notebook that makes it easy to get organized and be productive.

Share on twitter
Share on facebook
Share on linkedin
Share on email
Subscribe
Notify of
guest
69 Comments
Inline Feedbacks
View all comments
Stephen Dewitt
Stephen Dewitt
5 years ago

Thank you for this but I am struggling with this one a bit… nothing is happening when I try to use these tags. I am on firefox, perhaps that is the issue. I have installed Tampermonkey and have that script running fine, and have followed the same steps with Stylish (I’m fairly tech literate)- I have tried fonts that are definitely installed in workflowy like serif, and many others, but … nothing happens. Perhaps if I understood better – is the stylish script in some way calling the Tampermonkey script? I don’t quite understand what the Stylish script is ‘doing’ .. Thank you for any help, I would really like to get this working

frank.dg
frank.dg
5 years ago
Reply to  Stephen Dewitt

Hey Stephen,

Have you tried refreshing your WorkFlowy tab? After installing a Tampermonkey script that’s kind of necessary. Failing which, could you send me a screenshot of your Stylish code tweaks (frankman777@gmail.com)… or post a link here to an image online?

Stylish gives your outlines the style you want. The JavaScript code makes the tagging dynamic possible. As long as both your Stylish style and Tampermonkey script are installed correctly, you shouldn’t need to worry about how they interact.

psychologyandevolution
Reply to  frank.dg

Hi Frank,
I had tried closing firefox, but it seemed now that I had to close some background firefox tasks in task manager for it to fully refresh – it’s all working now, apologies and thanks!

frank.dg
frank.dg
5 years ago
Reply to  frank.dg

Fantastic! Enjoy geeking out on your favorite fonts 🙂

frank.dg
frank.dg
5 years ago

BTW, if anyone would like to make their font tags invisible, use this code (just replace the tag name):

/* INVISIBLE FONT TAGS */
[title~= “#courier”] {
color: transparent !important;
}

Kip Niswonger
5 years ago
Reply to  frank.dg

Did not make transparent.

Here is copied code below.

/* INVISIBLE FONT TAGS */
[title~=”#mont”] {
color: transparent !important;
}

frank.dg
frank.dg
5 years ago
Reply to  Kip Niswonger

Delete your first “quotation mark” and enter it again. That will correct it. Unfortunately WordPress sometimes inadvertently changes the quotes in code portions pasted into comments… I’ve added a space in the code pasted… That should fix it for others copy pasting. Thanks for reporting back 🙂

Kip Niswonger
5 years ago
Reply to  frank.dg

Thanks for your help. That worked.

Any idea how to make fonts larger on iPhone and iPad in Workflowy? I think they should have a font option for some larger fonts or to make fonts larger on mobile devices. Sure would make it easier to see for those of us with waning eyesight.

frank.dg
frank.dg
5 years ago
Reply to  Kip Niswonger

Sorry… no can do… other than zooming into any list so it becomes the list title.

Pamela
4 years ago
Reply to  frank.dg

Lost here. For the #nobullet and hiding tags, should the code be pasted in TM or in the Stylish code?

frank.dg
frank.dg
4 years ago
Reply to  Pamela

Hi Pamela… Into Stylish. Once the TM script is installed, you can forget that it’s there.

Kip Niswonger
5 years ago

Any screenshots of code pasted in Tampermonkey. Mine did not work.

frank.dg
frank.dg
5 years ago
Reply to  Kip Niswonger

Hi Kip,
Did you (1) save your TM script and (2) is it activated when you look at your TM dashboard? (3) Did you refresh your WorkFlowy tab? Could you post a link to an example screenshot of your Stylish code?

As far as the code in TM, it’s a plain copy-paste of the script linked to. No more, no less.

Kip Niswonger
5 years ago
Reply to  frank.dg

Thanks for the quick reply. Working like a charm now. Kip

frank.dg
frank.dg
5 years ago

Another interesting tip:

Anyone wanting to “archive” or hide any lists, include this code and tag any outlines to be hidden with #hide:

/* ARCHIVE OR HIDE LISTS */
div.project.hide-proj, div.content.bullet {
display: none;
visibility: hidden;
}

Tagged outlines neither appear when navigating your account nor in searches 🙂

moakdesigns
3 years ago
Reply to  frank.dg

I was not able to replicate this archive/hide lists. Is there some piece of code that I may be missing?

moakdesigns
3 years ago
Reply to  frank.dg

Nevermind, it’s working now. Apparently it needed me to close the tab and reopen it instead of just simply refreshing my browser. Odd but I’m glad that this is working now! This is super useful! Thank you again!

Scott Cardais
Scott Cardais
5 years ago

I’m having some trouble with this. Using Chrome on Mac 10.11.5. Created new script in Stylish and saved. Refreshed Chrome. Tampermonkey says that the script is On. Stylish says that the new style is active. Link to Stylish script. Link to Tampermonkey script.

Any help would be appreciated.

frank.dg
frank.dg
5 years ago
Reply to  Scott Cardais

All I do is copy the JavaScript into TM as is… don’t worry too much about any errors. It should work. I don’t know a thing about JS… but I do know that copying the exact code (with any errors) seems to do the job.

It seems like you’ve taken a thorough look at Stylish and TM in your troubleshooting. I cannot think of anything else at this stage but to copy the original TM code over one more time (version 1.1)… and then refresh your WorkFlowy browser tab (just as you’ve already done)…

Scott Cardais
Scott Cardais
5 years ago
Reply to  frank.dg

Got it sorted out with an embarrassingly simple solution. I was capitalizing my tags! Using all lower case to match the script in Stylish solved the problem.

Markus
Markus
5 years ago

Hi Frank,

is it possible to make the bullets invisible but not the text of a given list?

frank.dg
frank.dg
5 years ago
Reply to  Markus

Hi Markus, there must be a way, for sure… but it’s above my CSS skill level presently. You could toggle all bullets on/ off with this CSS code (but then I’m sure you knew that already):

/* HIDE BULLETS */
.bullet, #bulletBucket .bulletBucketBullet {
background-image: none;
}

Markus
Markus
5 years ago
Reply to  frank.dg

I got it to work eventually. In case anyone was wondering the same, here’s the CSS code:

/* Bullets hidden #nobullet */
.project.nobullet-proj .bullet {
visibility:hidden !Important;
}
/* INVISIBLE FONT TAGS */
[title~= “#nobullet” ] {
color: transparent !important;
}

frank.dg
frank.dg
5 years ago
Reply to  frank.dg

Brilliant, Markus 🙂

I tweaked the code a little so that you can still click on any invisible bullet to zoom in:

/* Bullets hidden #nobullet */
.project.nobullet-proj .bullet {
opacity: 0 !Important;
}

franciscoslucas
5 years ago

Hey Frank,

Thanks for this excellent tweak.

Quick question: is there a way to override the default font with the one configured in stylish? (without the need to use the #font attribute).

Cheers,
Francisco

PS: As requested, here’s a screenshot using Ubuntu’s font face – http://i.imgur.com/RydjNwf.png

frank.dg
frank.dg
5 years ago

Hi Francisco, thanks for the screenshot. The Ubuntu font looks great!

Here’s the CSS code for Stylish to change the default font globally (as you can see, I use Monospace as my default):

/* Global font styling */
#documentView {
font-family: monospace !important;
}

franciscoslucas
5 years ago
Reply to  frank.dg

Hey Frank,

Excellent stuff! And thanks for the lightning reply.

Best regards,
Francisco

Ksenia
Ksenia
5 years ago

Thank you for such a wonderful tweak! This puts an end to the countless hours of trying to compare the look of my outline using different fonts in my mind’s eye by changing the main document font in the Stylish theme, remembering the look, changing the font again, and trying to compare things in my mind. I’ve spent some time creating the font tag codes (using “#f-fontname” syntax makes it easier to separate font tags with autocomplete) for a considerable number of fonts I might use. Time well spent. Now I just plop a tag and can compare the results right in front of me, leaving my mind’s eye available for other endeavors.

Both this and the “archive/hide list” tweaks are coming very handy while I’m restructuring my outline. I separated the old and the new by different fonts so no matter where I am down the rabbit hole, I know whether I’m in the old burrow or the freshly dug one.

frank.dg
frank.dg
5 years ago
Reply to  Ksenia

Magic, magic, magic! I love your #f-fontname tag syntax which harnesses autocomplete for any set of font tags. Going to make some adjustments immediately. It’s genius 🙂

Rob
Rob
3 years ago
Reply to  frank.dg

Where would this tag go in the script? I can’t make it work.
/* MONOSPACE */
div.project.#f-mono-proj div.content {
font-family: Monospace !Important;
}
returns an error. What am I doing wrong?

Rob
Rob
3 years ago
Reply to  frank.dg

I figured it out. Don’t put the # in the code. Now on to making them transparent.

Kip Niswonger
5 years ago

Frank…love what you are doing with the computer side for fonts. Frank… Please tell the developers to come up with a larger font that we can use on our iPhones and iPads. Some of us are not getting any younger and would appreciate the ability to use a larger font on our phones. Then we could nuke most of our Task apps. I’m sure they could come up with a nice larger readable font that we could choose from the list of fonts they give us. This way when we take Workflowy with us on our phones we could at least see it better. I’m sure I’m not the only one who thinks this.

frank.dg
frank.dg
4 years ago
Reply to  Kip Niswonger

Hey Kip, HandyFlowy on mobile now allows you to enlarge your font:

https://blog.workflowy.com/2016/04/21/handyflowy-workflowy/

Kevin Murray
5 years ago

That looks great, Frank.

But each time I copy the Tampermonkey script in, I get errors –comment image?dl=0

Is that normal?

Haven’t got it to work yet, but refreshed, etc.

frank.dg
frank.dg
5 years ago
Reply to  Kevin Murray

Hi Kevin,
TM script errors in this case do not matter. This should work. Have you taken a look at the comments above and the solutions to what turned out to be missteps?

Kevin Murray
5 years ago
Reply to  frank.dg

I’ve finally got it to work, but the 1.0 script on Tampermonkey, but not 1.1.

Kevin Murray
5 years ago
Reply to  frank.dg

Now I see I’d inadvertently copied an extra line from the 1.1 script. All OK. now.

Johan Deknudt
Johan Deknudt
5 years ago

Thanks to this post I make a #shoppinglist style.

/*#shoppinglist*/

/*This style turns the #shoppinglist tag into a yellow background and black text.
after you select or open the bullet it make the entire list yellow.
Enjoy
*/

div.project.selected.shoppinglist-proj {
color: #111 !important;
background-color: #FFFF00; /*yellow*/
border-radius: 5px
}
div.project.open.shoppinglist-proj {
color: #111 !important;
background-color: #FFFF00; /*yellow*/
border-radius: 5px
}
div.project.highlighted.shoppinglist-proj {
/*I don’t know how to keep the list yellow when you mouse over the bullet.
In addition it keeps the text color from the contentTag class below.
So I added this so the text turns white when you mouse over.*/

color: #FFF !important;
}

/*Borrowed from custom tag colours*/
.contentTag[title*=”#shoppinglist”] {
color: #111 !important;
background-color: #FFFF00;
border-radius: 5px
}

frank.dg
frank.dg
5 years ago
Reply to  Johan Deknudt

Really cool Johan!

This concept could be applied to many other use cases. For instance, if you wanted to have your journal Doogie Howser style, you could make the list background blue and have a white Dos font 🙂

comment image?dl=1

Laura
Laura
5 years ago

Hey Frank and other users –
I’m using Stylish brilliantly to create colored tags. I’m wondering if I can do something similar to have Stylish color the ENIRE text of a line (based on a tag) and also to BOLD the entire line (again based on the tag.)

I’m not CSS fluent at all, so not sure if this is possible, or how to start this in Stylish. Any help is appreciated!

Markus
Markus
5 years ago
Reply to  Laura

Hi Laura,

that is definitely possible, but not achievable with stylish alone, as far as I know. You would have to download the chrome extension “Painter For WorkFlowy” (see Franks post: https://blog.workflowy.com/2016/03/24/painter-for-workflowy/) and create a new Style with the following code:

.wfcolor-red {
color:red !important;
font-weight:bold !important;
background-color:white !important}

Each line (not an entire list, for this you would have to install a Tapermonkey script) in which you have entered the tag #red will have red font, bold font weight and a white background.
Additionally, you can make the hashtag invisible by adding this line of code:
[title~=”#red”] {opacity:0}

http://imgur.com/vX4qbQP

I hope this helps

Pamela M.
Pamela M.
5 years ago

Great! …not so great is that I’m lost in possibilities instead of actually getting the tasks done on my Workflowy lists.
What I can’t find, is how to change the font on lower-level bullets.
I’d like the children in my list to have a smaller size then the higher levelled bullets. Makes my meeting minutes look a lot sweeter.
Do you have the way to the proper solution for this ? Would be great…again…great 😉

frank.dg
frank.dg
5 years ago
Reply to  Pamela M.

Hey Pamela,

Besides giving a specific font tag to each and every single one of your children lists and making them invisible (highly not recommended)… unless there’s some CSS that allows you to style all children lists of a tagged parent list, but not the parent list istself… you could use rawbytz’s “Underline Hack”. Whatever you underline will take on the characteristics you’ve specified in the code (and you can select multiple items at the same time:

span.contentUnderline {
text-decoration: none !important;
font-family: Gotham !important;
font-weight: bold;
color: black !important;

Change up the Gotham font (keep this as a standalone style).

Another thing might be to just underline the actual parent list contents with a bolder/ bigger/ heavier font. I do that for blog headings and book writing while I write in WorkFlowy.

Pamela M.
Pamela M.
5 years ago
Reply to  frank.dg

Thanks, I’ll give it a shot!

Carl
4 years ago

I have to agree that the numerous fonts give you better options for different types of works. The ability to change your font size to suit your desired outcome in amazing.

Nonetheless, it is certain that taking optimal advantage of this feature could be at first quite challenging. Much practice is needed for one to be fully competent when it comes to WorkFlowy fonts.

Your elaborate information goes a long way in making the usability of the fonts easier and more friendly. Thanks.

frank.dg
frank.dg
4 years ago
Reply to  Carl

Why, thank you, fine lad. I’m glad this is working out for you 🙂

abiloon
4 years ago

Frank, this is awesome. I’ll probably be buying your book in the near future. 🙂

I just started playing with this, and this is what I’ve done so far. I know a bit of CSS, so it was easy to make tags for different fonts, colors, and highlight colors. Similar tags could of course be created for font sizes as well.
Screenshot of the result: http://abiloon.com/wp-content/uploads/2016/09/mystyles.png
Screenshot of the code: http://abiloon.com/wp-content/uploads/2016/09/mycode.png

I can tell I’m going to be going wild with this. Thanks again!

frank.dg
frank.dg
4 years ago
Reply to  abiloon

Hey @abiloon,
Looks like you’re giving your outlines some TLC. Thanks for sharing the screenshots 🙂

Ksenia
Ksenia
4 years ago
Reply to  abiloon

Very nice! What I’ve also found useful is to group similar tags together in classes and sub-classes for ease of referencing and editing even further. So in your example I would prefix all the above tags with “#s-” for “style” tags or even subgroup further to have “#s-f-” for fonts, “#s-c-” for colors and “#s-h-” for highlights. One benefit is the autocomplete that will help you input these tags when you’re editing your document. Another benefit – you can style the tags themselves in groups/classes rather than one at a time. I usually hide these types of tags once I’m done editing the document to have a beautiful outline without the style tags crowding the view. So, if the style tags were grouped as mentioned above the following code would hide them from view (I usually keep this in a separate Stylish to be able to toggle this on/off when needed):

[title*= “#s-“] {color: transparent !important;}

Ksenia
Ksenia
4 years ago
Reply to  Ksenia

Please make sure you retype the double quotes in “#s-” in the above code if you copy/paste it as WordPress messes with them and renders the code useless.

abiloon
4 years ago
Reply to  Ksenia

Thanks @Ksenia! I’m going to try that. One question: what is the syntax for for styling things in groups/classes? (BTW, I looked up !important and now understand why it is important – although my styles were working without it).

Ksenia
Ksenia
4 years ago
Reply to  Ksenia

Just as listed in my post, title*= makes sure that any item with the title that contains (that’s what the asterisk is for) the string on the other side of the equal sign will get whatever formatting that follows. Here’s the sample where the code is first formatting the tags with the “#s-” prefix (all style tags) and then applying just a different color to each subclass (“#s-f-“, “#s-c-“, “#s-h-“).

Sample:
comment image?dl=1
Code:
comment image?dl=1

frank.dg
frank.dg
4 years ago
Reply to  Ksenia

To take advantage of Ksenia’s brilliant tag “bundling” tip for the tag autocomplete menu, you’ll need to have an already existing tag somewhere – anywhere – in WorkFlowy. If not, it won’t show up. So… keep a list of font tags tucked away somewhere… like so:

comment image?dl=1

abiloon
4 years ago

I’ve noticed something about the hierarchy of styles. If this has already been mentioned above, please ignore it (or you can just not approve it, Frank). Apparently styles applied by tagging will not override previous styles from your stylesheet. In this screenshot http://abiloon.com/wp-content/uploads/2016/09/stylehierarchy.png you can see the color styles I have specified, in the same order as they are in my stylesheet (you can see the code in my post above). If I apply the #bluegray style, then in sublists I cannot apply #dustyrose or #chillgreen, because they come before #bluegray in the stylesheet.

I’m guessing there’s no workaround for this, but if there is, please let me know.

Ksenia
Ksenia
4 years ago
Reply to  abiloon

Adding !important to every line of your code appears to fix the problem 🙂

/* DUSTY ROSE */ div.project.dustyrose-proj div.content {color: #f99 !important;}

abiloon
4 years ago
Reply to  Ksenia

No, @Ksenia, that hasn’t helped for me. Not in Chrome on Windows, nor on my Chromebook…

Ksenia
Ksenia
4 years ago

Hmm, that’s odd. I’m on Windows 10 and tried it in Chrome Version 53.0.2785.101 m (64-bit) and also Chrome Version 55.0.2858.0 canary (64-bit). And before adding the !important element the code performed exactly as you showed and the after is working great.

abiloon
4 years ago
Reply to  Ksenia

That’s strange. I’m on Windows 10 and Chrome Version 53.0.2785.101 m (64-bit) too. The order of the styles in the spreadsheet is clearly influencing the behavior. I have tried resaving, reloading, restarting Chrome, but no change.
Screenshot of the code:
http://abiloon.com/wp-content/uploads/2016/09/code-important.png
Screenshot of the results:
http://abiloon.com/wp-content/uploads/2016/09/important-results.png

BTW, how did you post an image directly into your comment?

frank.dg
frank.dg
4 years ago
Reply to  abiloon

Hey @Abiloon,
It seems that if one pops the image link in after a line break (hitting Enter), the image shows up 🙂 (i.e. no other text in the same line).

Ksenia
Ksenia
4 years ago
Reply to  abiloon

It sounds silly, but did you by any chance make a copy of the code while you were modifying this version and its overriding your results? Because I did find that the order in which you turn on the styles does matter. So maybe try turning off all the styles except this one and see if that fixes the issue.

Ksenia
Ksenia
4 years ago
Reply to  abiloon

My bad, I didn’t put the !important everywhere. And the !important being in every line defeats the purpose of it (at least in this context) because then the hierarchical approach still rules. Let’s see if any of the CSS gurus know of a workaround. Sorry for the false hope.

abiloon
4 years ago

@frank.dg, thanks for the tip. And @Ksenia, thanks for taking the time to consider that. In terms of CSS rules, it makes sense, so I don’t expect an easy workaround. An inelegant workaround would be to make lots of slight variations in color and order them in the stylesheet such that any given main color can be replaced with a different subcolor, as in:
– Red 1
– Blue 1
— Red 2
– Yellow 1
— Red 3
— Blue 2
I.e., a sublist whose parent is styled Yellow 1 can still be changed to Red 3 or Blue 2. Then you could have sub-sub colors and so on. As I said, not very elegant.

rolfessenden
rolfessenden
4 years ago

I want to mark items done, and NOT have them crossed off. I prefer to change their color, so I know they are done, but crossing them off makes them hard to read.

I also want them to disappear when I hide done items.

Is there a way to do this?

abiloon
4 years ago
Reply to  rolfessenden

@rolfessenden, the following code works for me, except that if I have used a tag style to change the color of that list, the ‘done’ color does not apply. If you are using tag styles only for fonts (or not at all), then this should work. Of course, change the color to a color of your choice. If you are not familiar with CSS, you can use the w3schools.com Colorpicker (http://www.w3schools.com/colors/colors_picker.asp) to choose a color you like and generate a hexidecimal color value. For example, changing the third line to “color: #9966ff !important;” will give you a purple color.

/* APPEARANCE OF DONE ITEMS */
.doneAppearance .name .content, .done .name .content {
color: red !important;
text-decoration: none !important;
}

frank.dg
frank.dg
4 years ago
Reply to  abiloon

Thanks a ton for posting that @abiloon. @rolfessenden got exactly what he asked for. Here’s a piece of CSS that I poached from Userstyles.org… It fades out the completed items to a greater degree and fades them in on hover over (you can play around with the opacity):

/* FADE OUT COMPLETED ITEMS + FADE IN ON HOVER OVER */
@media screen {
.project.done .content,
.project.doneAppearance .content {
opacity: 0.4;
}

.project.done:hover .content,
.project.done:focus .content,
.project.done .content:focus,
.project.doneAppearance:hover .content,
.project.doneAppearance:focus .content,
.project.doneAppearance .content:focus {
opacity: 1;
}
}

This is what is looks like:

comment image?dl=1

rolfessenden
rolfessenden
4 years ago

Thanks to both @abiloon and @frank.dg for these tips. I did have tag fonts installed, but I have turned it off for now. Also the fading trick may solve my problem better than what I was thinking anyway. I will use it for a week, and see how it works for me.

trackback

[…] span to get any font style for whatever text you underline. But what about entire outlines? I wrote a post on using custom font tags to transform entire outlines to the style you […]

heathflint
4 years ago

Hello!
I’ve been working on the font tagging but I’m finding that any Google Fonts I download and try to use, as well as fonts that have more than one word in their name are breaking the CSS. I’ve been fiddling with this for a while, and I was wondering if anyone could offer any insight.

A couple items to note.
1. I changed the Applies to URL on Stylish to https://workflowy.com/#, and then was able to get partial success.

2. Code Below
/* OPEN SANS */
div.project.oppn-proj div.content {
font-family: Gill Sans !Important;
}
I’ve been trying it with different fonts which is why the names do not match. Also, I have tried with using both single and double quotes with no success (to contain the font name).

I’m running Tampermonkey, and the styling script 1.1.

Thank you.

abiloon
4 years ago
Reply to  heathflint

That’s strange. What platform and browser are you using? I am using some fonts with multiple words, and they work. I haven’t tried downloading Google Fonts, so I don’t know about that. I have multiple fonts in each of my styles because I work both on my Chromebook and on Windows machines, and the available fonts are different (the CSS will apply whatever listed font is available on the machine before resorting to default variations). This is the font part of my CSS:

/* POP */ div.project.sfpop-proj div.content {font-family: AR CENA,Hobo Std,Narkisim,Verdana !important;}
/* TEMPUS */ div.project.sftmps-proj div.content {font-family: Tempus Sans ITC, Comic Sans MS !important;}
/* CALIBRI */ div.project.sfcalib-proj div.content {font-family: Calibri,Carlito !important;}
/* CONSOLAS */ div.project.sfcnsls-proj div.content {font-family: Consolas,Noto Mono !important;}
/* ARIAL BLACK */ div.project.sfarialb-proj div.content {font-family: Arial Black !important;}
/* GEORGIA */ div.project.sfgrg-proj div.content {font-family: Georgia,Serif !important;}

Which version of Stylish do you use? I’m using 1.7.2, and it has changed considerably from when I first started using Stylish. Now you can specify “URLs on the domain” and just enter “workflowy.com”, and it will apply the style to any page in that domain.

Subscribe to the newsletter

We'll send you a weekly roundup of the latest posts