Adding a Custom Font On Checklists

Adding a Custom Font

With the font picker in the Checklist Editor, it is possible to add your very own custom font! All you have to do is scroll down to the bottom of the options list and choose "Custom..."

Once you have this custom option selected, you'll notice two additional fields pop up. These are where you can put the information for your custom font. 

These new fields will be for adding in the CSS that the checklist will use to display your new font ("Custom Font CSS") and the URL where your custom font is hosted ("Custom Font URL").

Start by adding in the CSS that the checklist will use to display your font. In this field you'll simply add in the value that would normally come after the font-family property in your web app's CSS. For example in this case, we're trying to add in the Homemade Apple font from Google Fonts for our sister website Napcues, where family members can posts notices to others telling them when to wake them up from their nap.

The CSS to use this font in our application would normally look like this: 

font-family: 'Homemade Apple', cursive;

Don't be intimidated by this! The first part is just the portion of our CSS rule that tells the browser we want to change the font-family we're using for the checklist and the part after the colon tells the browser what font families to actually use. Note that for this example, we have our awesome "Homemade Apple" font and then "cursive" specified. The "cursive" is a back up font in case our Google Font doesn't load. You don't have to include a backup font, but it is usually a good way to make sure that all your users have a good experience. 

Note, if you are using Google Fonts, the site is super helpful and will tell you what to write for this CSS! Just add a font on the site, click on the little box that says "Family Selected" and it will give you a slide-out with lots of helpful information that looks a something like this: 

Once you've figured out what CSS to use, you can type it into the "Custom Font CSS". Your editor should now look something like this: 

When you add in the CSS rule you can leave the semicolon at the end or take it out. Either one will work.

Don't be afraid that your checklist still doesn't show your custom font. It still needs to know where to get your custom font from on the world wide web. This is the url that your font is hosted at. If you're not sure what this URL is, it will usually be in your web application somewhere as a <link> tag. 

If you're using Google Fonts, this is another place where the aforementioned helpful slide-out has your back. You can look at the href that is in the <link> tag and copy paste that URL into the "Custom Font URL" box. 

At this point your checklist should be showing your custom font!

(Uh oh, looks like Napcues is going to have to go back to the drawing board)

Common Issues

If your font still isn't showing up the right way there are a couple of things to think about.

  • Make sure that the URL is actually serving up your font
    • The URL that you are putting in the "Custom Font URL" field actually needs to send your font over. It should be sending something that looks like code. If you paste the URL into your browser and you get something that looks like a regular website, chances are you don't have the right link to the place where the font itself is hosted.
  • Make sure that your Custom Font CSS doesn't have the font-family part of the rule
    • We take care of the font-family part for you! The checklist only needs the name of your font and a backup font if you're using one to display things the right way. You're not writing the full CSS rule, just giving us the part that goes after font-family.
  • You have a typo in the CSS or URL
    • If things still aren't displaying, go back and make sure that you don't have a typo in the CSS or the URL that you gave us. Don't worry, it happens to the best of us!