Forums

Changing fonts in themes other than Elemental

Permalink
At present, there seems to be no way to change the font of a theme purchased at the Marketplace, without "forking" the theme.

One problem is when there are updates to the original theme - they do not carry over to the "forked" version. This is logical. Second problem is that the developers, and rightfully so - do not want to support a theme that has been forked.
Normally I purchase a theme for structure and function, but one of the first things I have to do is change the font. I am forced to fork the theme, and thereafter am "on my own".

Is there any way I could add a different google font through theme customization - specifically the "extra css" at the bottom of the customization bar, under the cog.
I have tried theses solutions:

1. I couldn't get this to work with google fonts
https://www.concrete5.org/community/forums/5-7-discussion/what-is-th...

2. I couldn't get this to work on the iPad or iPhone:
https://www.concrete5.org/marketplace/themes/hi-vis1/support/goolge-...

If anybody has a solution please let me know - I appreciate the help
arlenesey
 
Kurtopsy replied on at Permalink Reply
Kurtopsy
I don't use 5.7, but to change fonts for 5.6 I do the following and it works very well. I imagine it works the same with 5.7.

Get the .ttf or .otf of the font you want

Go tohttp://www.fontsquirrel.com/tools/webfont-generator... and upload your file. It will generate code to enter in the css file, and files to put in the directory. Make sure the paths and names are correct in css.

Target the element you want to have the font with the font-family: 'your font';

If you need me to explain this more in-depth, just let me know.
arlenesey replied on at Permalink Reply
arlenesey
Hi Kurtopsy -
Very detailed answer, but not quite what I am looking for. I use Google Fonts, whenever possible.
Actually, I retried the suggestion Nr 2 from the developer of the "HiVis" theme, and it worked. The first time around, I had added an extra " ' ". The little things matter.
So here is the solution that worked for me:
This code has been added to the "custom CSS" part of theme "Design" under the cog.
I am using Concrete5 5.7.4.1

@import url(//fonts.googleapis.com/css?family=Inconsolata);
body {
    font-family: 'Inconsolata'!important;
}
div.ccm-page h1, div.ccm-page h2, div.ccm-page h3, div.ccm-page h4, div.ccm-page h5, div.ccm-page h6 {
  font-family: 'Inconsolata'!important;
}
div.ccm-page .top-bar-section ul li > a {
    font-family: 'Inconsolata'!important;
}


I had to add the "!important", but it may not be necessary for you. The classes will depend on your theme.
Thank you "1976 Limited" - Gareth Lockett
Kurtopsy replied on at Permalink Reply
Kurtopsy
Thanks for the update. I'm glad you got it working.