Include images and fonts in themes and components

Oh wow, this is awesome! Themes keep getting better and better. :slight_smile: For those of us experimenting with building remote repo themes, what is (or will be) the equivalent way to include assets in our repository?


Yeah, this is not planned at the moment. My brain can think of a hack that could make this work, but it is horrid and I am not going to disclose how it could be done.

I think we can revisit this in a few more months when the system has fully stabilized and community themes and theme components have sprouted :sunflower:



I tried to add google material design font-icons as posted above, but I couldn’t succeed. I just wanted to be sure if I’m doing anything wrong or this recipe is not for font-icons.

I did as followings:

  • uploaded the icon font via the +add button of the theme,
  • scss name is set to $Material
  • added these lines in the body:
@font-face {
  font-family: Material Icons;
  src: url($MIwoff2) format('woff2')
  • added these lines to css:
  font-family: 'Material Icons';
  font-feature-settings: 'liga';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;  /* Preferred icon size */
    content: "settings";

Screenshot of upload section? Any errors when you save the sass?

all the font formats seem to be uploaded, without errors:

and this is the screenshot of the settings icon:

If the CSS saves with no error when you add the var it means it should have taken correctly. Maybe try explicitly to preview the component, then dig into CSS using dev tools.


the error was with the font icons, it seems that the way to use material design icons is to add this line to the head section, and not to attach them!

<link href=""

Currently (as of 2018-08-18) after uploading three weights of a single font family, each with unique variable names:

  1. If I use the full URL path to the uploaded font, things are fine, but
  2. If I use the variable, the font does not render.


Is it possible to upload images in PNG format - to preserve their transparent background?

I’m trying to upload the logo & small logo for our site but it’s being converted to JPG.


I’m trying to create a dark theme for the site at the moment (:wave: Mojave) & this giving the image a white background which doesn’t look that great.

Try the instructions laid out in this topic:

And also note:


Simpler workaround here would be to run png through and upload that


If I upload a font, I get a CORS policy for the No ‘Access-Control-Allow-Origin’ because our uploads are via a different subdomain on our ‘s3 cdn url’ setting e.g. vs (for the CDN).

Is there a way to get around that for font files in themes?

this makes me wonder…

i do love the Samsung Sans font. How would I go about changing my site’s font to Samsung Sans?

In the site settings there’s an cors origins option — if you add your uploads url there it should allow it.

All the instructions for adding a custom font are in the original post above. You need to upload the font file and then add the custom CSS.


Just a note here that I was playing around with images in themes, and found that I wanted to use a theme image url in a template. Perhaps there’s another way of doing this, but I found this nifty method using SASS functions and JSON: Making Sass talk to JavaScript with JSON | CSS-Tricks


"assets": {
  "balloons": "assets/balloons.png",
  "bike": "assets/bike.png"


@function image-urls() {
  @return '{ "balloons" : "#{$balloons}", "bike" : "#{$bike}" }';

body::before {
  display: none;
  content: image-urls();


<script type='text/x-handlebars' data-template-name='components/categories-and-latest-topics'>
  <img src="{{imageUrls.balloons}}">

<script type="text/discourse-plugin" version="0.8">
const computed = require('ember-addons/ember-computed-decorators').default;

api.modifyClass('component:categories-and-latest-topics', {
    let style = null;
    if (window.getComputedStyle && window.getComputedStyle(document.body, '::before')) {
      style = window.getComputedStyle(document.body, '::before');
      style = style.content;
    return JSON.parse(JSON.parse(style));

Nice workaround! I think it would be good for us to make asset URLs available to javascript/templates. Easiest thing would be to make it work like

handlebars: {{theme-setting "assets.balloons"}}

javascript: settings.assets.balloons

Or with slightly more effort we could have

handlebars: {{theme-asset "balloons"}}

javascript: themeAssets.balloons

@sam implemented this here:

You can now do

handlebars: {{theme-setting "theme_uploads.balloons"}}

javascript: settings.theme_uploads.balloons

cc @angus


How do I use an uploaded asset in an image tag within the html in the theme editor (e.g. after header or header)? I have an image I want to add to the after header section, but I’m uncertain what the relative url is for an uploaded image. I’ve successfully used the scss variable for adding background images in the css file, but I want to add images within the html as well.


You can’t use an asset variable directly in HTML at the moment. You can either link to the asset directly, or use CSS to load the asset as a background-image of an element (I’ve added an example to the original post).