Create and share a font theme component

Discourse supports importing themes containing assets from a remote repository.

This allows theme authors to share fonts and images.

Create a new git repository with the font

mkdir discourse-roboto-theme
cd discourse-roboto-theme
git init .
vim about.json

For about.json add a skeleton config file

   "name" : "Roboto theme component",
   "about_url" : "",
   "license_url": "",
   "assets": {
        "roboto": "assets/roboto.woff2"

Add a LICENSE file, I usually use MIT


Download the font is a handy site to get fonts

mkdir assets
cp ~/Downloads/roboto.woff2 roboto.woff2

Add CSS that consumes the theme

mkdir common
cd common

Create a file called common.scss with

@font-face {
  font-family: Roboto;
  src: url($roboto) format('woff2')

body {
    font-family: Roboto;

Push changes to GitHub

Check in all your changes:

git add LICENSE
git add about.json
git add assets/roboto.woff2
git add common/common.scss
git commit -am "first commit"

Create an account on and then create a new repository.

(Optional) create a topic on Discourse as a home to discuss your colors

Ideally you would create a topic in the #plugin:theme category with some screenshots of your color scheme. You will use this as your about_url

Fill in the missing information in your about.json file

  • Navigate to your LICENSE page on GitHub, fill in that URL as your license_url

  • Either use the GitHub project URL or Discourse topic URL as your about_url

At the end of the process your about.json file will look something like:

   "name" : "Roboto theme component",
   "about_url": "",
   "license_url": "",
   "assets": {
        "roboto": "assets/roboto.woff2"

Check in the change and push to GitHub

git commit -am "added more details"
git push

Test your font component

  • In the admin/customize/theme screen import your theme from GitHub


You can now easily share fonts!

See also:


Great tutorial.

Worked like a charm except it looks like is down or no more.

I used this Google webfonts helper site to download a .woff2 version of the font I was after.

See also Discourse Theme CLI (console app to help you build themes)

1 Like

When i followed the stepped i received an Error: Undefined variable: “$fontname”.

I declared the variable in $variables:
fontname: "assets/fontname.woff2";

It’s seems to me you have to fill it in, but what path to use in the $variables?

When you let Discourse upload the files with

"assets": {
        "fontname": "assets/fontname.woff2"

it uploads the file to another path then assets/roboto.woff2 it seems

No need for $variables, the magic happens with the uploads. But i had assets/font.svg#regular in the assets and the hashtag created the issue.