Include images and fonts in themes

themes

(Sam Saffron) #1

Themes now allow you to handle uploaded assets such as images and fonts.

To add uploads view your theme and click + Add in the Uploads section:

In the upload dialog, upload the asset and name a SCSS variable name which you can use in your stylesheet.

Once uploaded it will pop up in the uploads list:

Uploaded assets can be referenced in your css using the variable name.

So for example, we can use this font by setting common SCSS to:

@font-face {
  font-family: Amazing;
  src: url($Amazing-Font) format('woff2')
}

body {
    font-family: Amazing;
    font-size: 15px;
}   

You can control what assets your theme accepts using the site setting: theme authorized extensions


How to develop custom themes
How to change default font
Daemonite Material Theme
Anyone embedding fonts successfully?
(David Taylor) #2

Can this be used to add additional javascript files as “assets”? Or is it just images/fonts?

If it would allow javascript files, that could effectively allow client-side plugins to be distributed without having to mess with app.yml, which would be awesome! Especially for people on managed hosting who can’t install plugins.


(Jeff Atwood) #3

Up to @sam but that sounds like a lot of scope creep to me. Plus added danger…


(Jeff Wong) #4

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?


(David Taylor) #5

(Sam Saffron) #6

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:


(Pad Pors) #7

Hi.

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:
  .fa-gear::before{
  font-family: 'Material Icons';
  font-feature-settings: 'liga';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;  /* Preferred icon size */
    content: "settings";
}

(Sam Saffron) #8

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


(Pad Pors) #9

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

and this is the screenshot of the settings icon:


(Sam Saffron) #10

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.


(Pad Pors) #11

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="https://fonts.googleapis.com/icon?family=Material+Icons"
      rel="stylesheet">

(Michael Downey) #12

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.

:frowning:


Anyone embedding fonts successfully?