# Create and share a font theme component
**URL:** https://meta.discourse.org/t/create-and-share-a-font-theme-component/62462
**Category:** Developer Guides
**Tags:** how-to, theme-guides
**Created:** [May 10, 2017, 8:48pm UTC](https://meta.discourse.org/t/create-and-share-a-font-theme-component/62462 "2017-05-10T20:48:47Z")
**Posts on this page:** 5
**Page:** 1
### Author:  [@Discourse](https://meta.discourse.org/u/Discourse)
#### Post date: [May 10, 2017, 8:48pm UTC](https://meta.discourse.org/t/create-and-share-a-font-theme-component/62462/1 "2017-05-10T20:48:47Z")
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
```sh
mkdir discourse-roboto-theme
cd discourse-roboto-theme
git init .
vim about.json
```
For `about.json` add a skeleton config file
```json
{
"name": "Roboto theme component",
"about_url": "",
"license_url": "",
"assets": {
"roboto": "assets/roboto.woff2"
}
}
```
Add a `LICENSE` file, I [usually use MIT](https://github.com/SamSaffron/discourse-solarized/blob/master/LICENSE)
```sh
vim LICENSE
```
### Download the font
[http://localfont.com/](http://localfont.com/) is a handy site to get fonts
```sh
mkdir assets
cp ~/Downloads/roboto.woff2 roboto.woff2
```
### Add CSS that consumes the theme
```sh
mkdir common
cd common
```
Create a file called `common.scss` with
```scss
@font-face {
font-family: Roboto;
src: url($roboto) format("woff2");
}
body {
font-family: Roboto;
}
```
### Push changes to GitHub
Check in all your changes:
```sh
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](https://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 #Customization > 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:
```json
{
"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
```sh
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](https://meta.discourse.org/t/how-to-develop-custom-themes/60848):
>
> Discourse supports [native themes](https://meta.discourse.org/t/native-theme-support/47494/26) that can be sourced from a .tar.gz archive or from a remote git repository including [private repositories](https://meta.discourse.org/t/how-to-source-a-theme-from-a-private-git-repository/82584). An example theme is at: [GitHub - discourse/discourse-simple-theme: Sam's simple discourse theme · GitHub](https://github.com/SamSaffron/discourse-simple-theme) The git repository will be checked for updates ([once a day](https://github.com/discourse/discourse/blob/main/app/jobs/scheduled/check_out_of_date_themes.rb)), 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 foll…
* * *
This document is version controlled - suggest changes [on github](https://github.com/discourse/discourse/blob/main/docs/developer-guides/docs/05-themes-components/23-font-component.md).
---
### Author:  [@bletch](https://meta.discourse.org/u/bletch)
#### Post date: [August 6, 2018, 9:32pm UTC](https://meta.discourse.org/t/create-and-share-a-font-theme-component/62462/2 "2018-08-06T21:32:28Z")
Great tutorial.
Worked like a charm except it looks like [localfont.com](http://localfont.com) is down or no more.
I used this [Google webfonts helper site](https://google-webfonts-helper.herokuapp.com/) to download a .woff2 version of the font I was after.
---
### Author:  [@pfaffman](https://meta.discourse.org/u/pfaffman)
#### Post date: [October 25, 2018, 9:15pm UTC](https://meta.discourse.org/t/create-and-share-a-font-theme-component/62462/3 "2018-10-25T21:15:45Z")
See also [Install the Discourse Theme CLI console app to help you build themes](https://meta.discourse.org/t/discourse-theme-cli-console-app-to-help-you-build-themes/82950)
---
### Author:  [@Dave\_Driesmans](https://meta.discourse.org/u/Dave_Driesmans)
#### Post date: [June 21, 2022, 9:34am UTC](https://meta.discourse.org/t/create-and-share-a-font-theme-component/62462/4 "2022-06-21T09:34:03Z")
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
```plaintext
"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.
---
### Author:  [@kcahtoor](https://meta.discourse.org/u/kcahtoor)
#### Post date: [August 19, 2025, 10:34pm UTC](https://meta.discourse.org/t/create-and-share-a-font-theme-component/62462/7 "2025-08-19T22:34:35Z")
> [@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