Posted by robertmaynord on Mon, Dec 11, 2017 - 1:49pm --- Updated: Dec 14 '17 - 1:25pm

Hello!  I have just started working with backdrop, and it has great potential.  I have downloaded the Google Fonts module, and I can successfully choose the fonts I wish to use in Backdrop.  On the Backdrop Google configuration page, it says....

The module applies CSS code for you automatically if you add it here.
This could be useful if you don't use a custom theme or if you don't have access to it.

Example: h1.site-name { font-family: "Artifika"; font-size: 3em; }

I am not sure what the next step is. My "Basicolor" theme configuration page lists all the fonts available for the web site, but no Google Fonts are included.  Do I need to insert something into the css code?  Would I do that at the file level, or the Backdrop block level. I am trying to figure out the last step needed to get the fonts working...

Accepted answer

Do I need to insert something into the css code?

yes, I believe that's correct. You'll need to define where your new fonts should be used, and I believe that needs to be done via CSS.

The  "best practices" way to do that would be to create a sub-theme of the Basicolor theme (by creating a new directory in the theme's folder named mytheme (or whatever you like) that has a mytheme.info file within. The contents of the mytheme.info file should be something like this:

type = theme
name = My Theme
description = A subtheme of Basicolor with an additional stylesheet.
backdrop = 1.x

base theme = basicolor

stylesheets[all][] = css/custom.css

Then add your own CSS file at css/custom.css, and in there you can use your new fonts! (Don't forget to enable your new base-theme at admin/appearance)

Comments

drop's picture

Thu, Dec 14, 2017 - 1:35pm by drop

Do I need to insert something into the css code?

yes, I believe that's correct. You'll need to define where your new fonts should be used, and I believe that needs to be done via CSS.

The  "best practices" way to do that would be to create a sub-theme of the Basicolor theme (by creating a new directory in the theme's folder named mytheme (or whatever you like) that has a mytheme.info file within. The contents of the mytheme.info file should be something like this:

type = theme
name = My Theme
description = A subtheme of Basicolor with an additional stylesheet.
backdrop = 1.x

base theme = basicolor

stylesheets[all][] = css/custom.css

Then add your own CSS file at css/custom.css, and in there you can use your new fonts! (Don't forget to enable your new base-theme at admin/appearance)