Create and share a font theme component

[Discourse]

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

vim LICENSE 

Download the font

http://localfont.com/ 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 GitHub.com 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": "https://github.com/SamSaffron/discourse-roboto-theme", "license_url": "https://github.com/SamSaffron/discourse-roboto-theme/blob/master/LICENSE", "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:

Structure of themes and theme components

Discourse supports native themes that can be sourced from a .tar.gz archive or from a remote git repository including private repositories. [56] An example theme is at: GitHub - discourse/discourse-simple-theme: Sam's simple discourse theme [32] The git repository will be checked for updates (once a day), or by using the Check for Updates button. When changes are detected the Check for Updates button will change to the Update to Latest. [image] To create a theme you need to follow a spec…

---

This document is version controlled - suggest changes on github.

[bletch (Danny Goodall)]

Great tutorial.

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

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

[pfaffman (Jay Pfaffman)]

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

[Dave_Driesmans]

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

So:
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
(/uploads/db0202/original/1X/...)

Edit:
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.

[kcahtoor]

@Dave_Driesmans

I declared the variable in $variables

I am getting the same error Error: Undefined variable. And also there are not any assets shown in uploads or upload as a heading.

Is this how-to needs updating?

Thank in advance