Themes

Changing Fonts in a Theme

Permalink 3 users found helpful December 02, 2012 at 9:13 PM

I am starting work with a client who would like to use some specified fonts and therefore, I need some guidance if this is even possible. We are narrowing down the theme to use but I need to know if it is possible to substitute fonts in a theme with something else.

If so, how is it done? Does it involve uploading font files into the concrete site/theme? Does any CSS need to be updated to support this?

Any help would be much appreciated!! Thanks... tga

adajad replied on Dec 3, 2012 at 3:10 am Permalink Reply

I try to use google fonts whenever possible, as that is easiest. If you want to have your own font up there are always licensing issues and may cost you dearly.

Google holds 600+ fonts in their online directory and can be found here: http://www.google.com/webfonts

Just choose the font(s) you want to include in your theme and click on "Quick Use", then follow the instructions.

tgadams11 replied on Dec 8, 2012 at 3:09 pm Permalink Reply

Thanks man for the help.... I've walked through the steps but a little stumped as to what Theme elements need to be updated to make sure the chosen Google Font is now the default font instead of the default Theme font.

I updated the ccm.default.theme.css file thus far and cannot find any other spots that I would enter in the CSS code. I made this update, reloaded this CSS page to the site, and refreshed but still see the other font.

What am I missing?

Thanks... tga

adajad replied on Dec 8, 2012 at 3:38 pm Permalink Reply

Sounds like you have been poking around in the core files when you edited ccm.default.theme.css. I strongly recommend you NOT to do that, since all changes to the core will be lost on the next update.

If you are modifying a core theme, you should fork it and create your own in the outer themes folder ('public_html/themes'). Please see this how-to on modifying a core theme: http://www.concrete5.org/documentation/how-tos/editors/customize-a-...

Now, to answer your question on what to define so your font is used. See below css code for examples:

@import url(http://fonts.googleapis.com/css?family=Exo:400,700,900italic);
body{
 font-family:'Exo', sans-serif; //sets all your pages to use the 'Exo' font unless explicitly told otherwise
}
p{
 font-weight: 400; //regular font weight is 400
}
h1, h2{
 font-weight: 900italic; //extra bold and italic for h1 and h2
}
h1{
 font-size: 3em; //h1 will have a size three times the regular font size, which per default blank browser is 16px
}
h2{
 font-size: 2em;

Viewing 15 lines of 39 lines. View entire code block.

 
@import url(http://fonts.googleapis.com/css?family=Exo:400,700,900italic);
 
body{
 font-family:'Exo', sans-serif; //sets all your pages to use the 'Exo' font unless explicitly told otherwise
}
p{
 font-weight: 400; //regular font weight is 400
}
h1, h2{
 font-weight: 900italic; //extra bold and italic for h1 and h2
}
h1{
 font-size: 3em; //h1 will have a size three times the regular font size, which per default blank browser is 16px
}
h2{
 font-size: 2em;
}
h3, h4{
 font-weight: 700; //bold for h3 and h4
}
h3{
 font-size: 1.7em;
}
h4{
 font-size: 1.5em;
}
p{
 font-weight: 400; //regular font weight for paragraph
 font-size: 1em;
}
a{
 font-weight: 700; //bold for links
 font-size: 1em;  
 text-decoration: none;
}
.code{
 font-family:'Courier New', sans-serif; //Here I'm setting another font for the 'code' class
 font-size: 0.8em;
 margin-left: 4em;
}

So basically I just tell the style sheet which font to use in the body tag, and then set weight and size for the elements. On the 'code' class above I explicitly define another font to be used.

Don't forget to turn off 'Overrides Cache' when you edit your sources (applies to v. 5.6+), and to clear your site and browser cache to be sure you see the results.

tgadams11 replied on Dec 8, 2012 at 3:54 pm Permalink Reply

Hello Adajad... really appreciate your help... I reversed the changes to the .CSS file I changed. I will take a look at this additional info you provided and see if that gets me where I need to go... If I have any more questions, I will certainly post again...

Thanks!!

mhawke replied on Dec 8, 2012 at 5:46 pm Permalink Reply

A couple of caveats. I think the ccm.default.theme.css file is an internal file used for dashboard and toolbar stuff, not your actual site. There is usually a .css file in your theme file such as 'style,css' or 'main.css' that your site uses. The font css that adajad is recommending needs to be added in that css file.

Also, in general I've had trouble overrriding core css files because they often contain relative paths to images such as 'background-image:url(../images/bg.jpg)' which get messed up when you move the css file to your new override folder location. If I really need to change a core style, I just override the style in my theme's style sheet in a separate section I label like this:

/* CORE OVERRIDES */
ccm.whatever {border:1px solid #ccc;}
/*END OF CORE OVERRIDES */

adajad replied on Dec 10, 2012 at 3:27 am Permalink Reply

And to add to mhawke, you can make sure your override styles are used by adding !important to them (which simply tells the browser to not use styles on the element if defined later in another stylesheet):

/* CORE OVERRIDES */
ccm.whatever {border:1px solid #ccc !important;}
/*END OF CORE OVERRIDES */

tgadams11 replied on Dec 21, 2012 at 8:52 pm Permalink Reply

Hello Adajad,
I hope you're well... I have been working on making this font update for a current site I am working on and starting to get frustrated... I have updated the main.css file and also been looking at the typography.css file which has one one notation for the font...

So in the main.css file I have added this part in:

/* font override per client */
@import url(http://fonts.googleapis.com/css?family=IM+Fell+Double+Pica+SC);
body{
 font-family: 'IM Fell Double Pica SC', serif; //sets all your pages to use the font unless explicitly told otherwise
}
p{
 font-weight: 400; //regular font weight is 400
}
h1, h2{
 font-weight: 900italic; //extra bold and italic for h1 and h2
}
h1{
 font-size: 3em; //h1 will have a size three times the regular font size, which per default blank browser is 16px
}
h2{

Viewing 15 lines of 40 lines. View entire code block.

 
/* font override per client */
@import url(http://fonts.googleapis.com/css?family=IM+Fell+Double+Pica+SC);
 
body{
 font-family: 'IM Fell Double Pica SC', serif; //sets all your pages to use the font unless explicitly told otherwise
}
p{
 font-weight: 400; //regular font weight is 400
}
h1, h2{
 font-weight: 900italic; //extra bold and italic for h1 and h2
}
h1{
 font-size: 3em; //h1 will have a size three times the regular font size, which per default blank browser is 16px
}
h2{
 font-size: 2em;
}
h3, h4{
 font-weight: 700; //bold for h3 and h4
}
h3{
 font-size: 1.7em;
}
h4{
 font-size: 1.5em;
}
p{
 font-weight: 400; //regular font weight for paragraph
 font-size: 1em;
}
a{
 font-weight: 700; //bold for links
 font-size: 1em; 
text-decoration: none;
}
.code{
 font-family: 'IM Fell Double Pica SC', serif; //Here I set another font for the 'code' class
 font-size: 0.8em;
 margin-left: 4em;
}

In the same main.css file, I see a couple other font references for:

#page #header #logo{ color:#999; font-size:32px; 
   font-family:Arial, Helvetica, sans-serif; 
   line-height: auto;

And then in the typography.css file, I see:

body { 
   /* customize_body */ font: normal normal 13px Arial; /* customize_body */
   /* customize_body */ color: #777777; /* customize_body */
   line-height:18px;
}
img {border: 0px}
a,a:visited,a:active {
   /* customize_link */ color: #66aa33; /* customize_link */
}
a:hover {
   /* customize_link_hover */ color: #66CC00; /* customize_link_hover */
} 
h1,h2,h3,h4,h5{ margin:0px 0px 4px 0px; padding:4px 0px; margin-top:8px }
h1{ font: normal normal 21px Arial; line-height:28px }
h2{ font-size:18px; line-height:24px }

Viewing 15 lines of 19 lines. View entire code block.

 
body { 
   /* customize_body */ font: normal normal 13px Arial; /* customize_body */
   /* customize_body */ color: #777777; /* customize_body */
   line-height:18px;
}
 
img {border: 0px}
a,a:visited,a:active {
   /* customize_link */ color: #66aa33; /* customize_link */
}
a:hover {
   /* customize_link_hover */ color: #66CC00; /* customize_link_hover */
} 
 
h1,h2,h3,h4,h5{ margin:0px 0px 4px 0px; padding:4px 0px; margin-top:8px }
h1{ font: normal normal 21px Arial; line-height:28px }
h2{ font-size:18px; line-height:24px }
h3{ font-size:16px; line-height:21px }
h4{ font-size:14px; line-height:18px }
h5{ font-size:13px; line-height:16px }
p{ padding:0px 0px 0px 0px; margin:0px 0px 12px 0px; }

So am I doing this right? I noticed that you mention at what "level" I should be looking for the .CSS files for the Theme, but there is only one level that I find them... /concrete/themes/default/main.css

Any further help would be much appreciated... really need to make this font change happen...

Thanks! tga

mhawke replied on Dec 21, 2012 at 9:25 pm Permalink Reply

Stay out of anything under '[root]/concrete'. Those are core system files and should not affect your site. Even if you are successful at making these files affect your site, the next time you upgrade concrete5, the upgrade will overwrite your changes with new core files. You need to make a copy of whatever theme you are using and put it under '[root]/themes'.

Before you go any further, you need to re-read the link posted earlier:

http://www.concrete5.org/documentation/how-tos/editors/customize-a-...

Scroll down to the part where it says "Copy that theme!"

tgadams11 replied on Dec 21, 2012 at 9:34 pm Permalink Reply

Okay okay... slap me around a little... hahaha... I undid what I did to the main.css file... was just trying to follow what ADAJAD had posted... but apparently I took a detour... ;-)

I will reread that document... hopefully it will make more sense this time around...

Thanks!

tgadams11 replied on Dec 21, 2012 at 9:56 pm Permalink Reply

Hey MHawke... I am getting there... there's a little hint of light at the end of the tunnel.

Quick Question: Okay... so if I copy the theme and rename it, does it HAVE to be placed at the upper level? Or can it still reside in the same location of the Theme itself? Is moving it up to the higher level, or in this case, within the /Packages/Themes_Clearview/ directory (instead of /Packages/Themes_Clearview/Themes/ directory) the safe guard against it being overridden everytime updates for the specific Theme (Clearview) occur?

So in other words, I should be placing the copied version here:

/packages/my_clearview/

Just trying to figure out the correct level to place my renamed copy of it while following the example which is just a tad sketchy...

tga

mhawke replied on Dec 21, 2012 at 10:06 pm Permalink Reply

You're killin' me here :-)

I thought you said you were working inside the '[root]/concrete' folder? Now you're saying the theme files are inside a package.

If the theme files are inside the package, then you don't have to make a copy of anything. Just make your css changes inside the last theme folder here:

'[root]/packages/themes_clearview/themes/clearview/main.css'

Does that make any sense?

tgadams11 replied on Dec 21, 2012 at 10:13 pm Permalink Reply

Because Clearview is a purchased Theme package, it ends up outside of the /concrete directory and gets placed into the /packages directory... Even the article that you asked me to re-read again refers to purchased Themes versus default or core themes... See I did read again... ;-)

I do appreciate the help... So because it is a purchased Theme and outside the "core" directory of /concrete, I can make the changes in there and have nothing to worry about then, right? Just want to make sure...

And with that in mind, do I need to add in that CSS code block I mentioned before for the specific font? Or do I simply need to go through the main.css file and update all font references to the preferred type face?

mhawke replied on Dec 21, 2012 at 10:19 pm Permalink Reply

If you'd like to leave your original 'Clearview' theme in place and modify a copy of it then you can take the entire 'clearview' folder that's here:

[root]/packages/themes_clearview/themes

and put it in

[root]/themes

and rename the folder 'my_clearview' so you end up with

[root]/themes/my_clearview/

Then edit the 'description.txt' file and change the first line to "My Clearview". Then go to Dashboard->Themes and install the "My Clearview" theme and then 'Activate' it so your site is using your Clearview clone.

Then make all your modifications to the files in '[root]/themes/my_clearview' folder.

Phew.

tgadams11 replied on Dec 21, 2012 at 10:21 pm Permalink Reply

Okay... I think I will do that... It makes more sense... Let me see if I can at least get through of this and activate my version... then I'll forge ahead on trying to update the font again.

tga

tgadams11 replied on Dec 21, 2012 at 10:27 pm Permalink Reply

Okay... so far so good... I got my version of Clearview installed and activated... Now on to updating the font... woohoo!!

mhawke replied on Dec 21, 2012 at 11:18 pm Permalink Best Answer Reply

I noticed that the @import technique mentioned above has problems working inside the C5 environment. Try this instead. Add this to your header.php file:

<link href='http://fonts.googleapis.com/css?family=Monda' rel='stylesheet' type='text/css'>

Then style your elements using the font name. In the example above, the name is "Monda" so this will style the body in main.css:

body {font-family: Monda, sans serif}

For more font ideas, visit the Google Fonts page and click the 'Quick Use' link for a font you'd like to use to get the specific line that needs to be added to your header.php for that font.

http://www.google.com/webfonts

mhawke replied on Dec 21, 2012 at 11:26 pm Permalink Reply

The 'header.php' file is usually in the "elements" folder within your theme folder.

tgadams11 replied on Dec 21, 2012 at 11:28 pm Permalink Reply

Perfect!! Thanks... seems we have posting crossing each other... like we're almost intune with each other... hahaha

Okay... getting closer... now onto the MAIN.CSS file.

tgadams11 replied on Dec 21, 2012 at 11:26 pm Permalink Reply

I had JUST posted asking for this guidance... so appreciate you posting it before I did... However, I do not find the HEADER.PHP file in the theme folder content... I see several other PHP files for the different types of pages such as:

blog_entry
default
full
home
left_sidebar
pb_post
right_sidebar
view

All .PHP files/pages... So would the DEFAULT.PHP be considered the HEADER.PHP file?

mhawke replied on Dec 21, 2012 at 11:35 pm Permalink Reply

If you look at 'full.php' for example, you will see a line near the top that 'includes' the file found in 'elements/header.php'. Near the bottom of 'full.php' you will see it includes 'elements/footer.php'. This is standard C5 architecture. It allows you to make changes to the header and footer in one file and then the other page types like 'full.php' or 'left_sidebar.php' all grab the same header and footer file. It is designed like this because most websites have the same content in the header and footer of every page. If you did it the old fashioned way and put a header section and a footer section on each page type file then every time you made a change to the header or footer content, you would have to make the identical change in every one of your page type files which is tedious and prone to errors.

tgadams11 replied on Dec 21, 2012 at 11:38 pm Permalink Reply

Appreciate that additional caution info...

Okay... sooooooooooo close. I have updated all of the font-family references in the MAIN.CSS file and have seen updates occur but not completely. What about the TYPOGRAPHY.CSS file?

I just looked in there and see that it is reference the previous font... so thinking that I need to update this CSS file as well... Wanted to ask for your opinion as well.

mhawke replied on Dec 21, 2012 at 11:42 pm Permalink Reply

typography.css is a pain but a necessary evil. Put the identical stuff in there as well. It's used to style the contents of the tinyMCE editor in the content block but you'll notice that it's called after main.css so it overrules the styles in main.css.

tgadams11 replied on Dec 21, 2012 at 11:43 pm Permalink Reply

Well I decided to try it... And it worked... Everything had updated up to that point but a Header. So once I updated the typography.css file and posted it... that Header ended up updating... So looks like I'm good to go now...

Really appreciate your help on this one!!

mhawke replied on Dec 21, 2012 at 11:45 pm Permalink Reply

You are now a certified concrete5 pro.

tgadams11 replied on Dec 21, 2012 at 11:50 pm Permalink Reply

Yeah yeah yeah... sure.... This project is an easy one. It's another project I have that's going to be the challenge... I think you might have been on some of the discussions I've posted... it's the one with the jQuery menu, etc.

Have a great Christmas!

mhawke replied on Dec 21, 2012 at 11:53 pm Permalink Reply

Yes... jQuery. That will be another adventure.

Merry Christmas to you and yours as well.

adajad replied on Dec 22, 2012 at 2:22 am Permalink Reply

Just here to explain why the above didn't work. Editing a core theme within the concrete folder doesn't hurt anything but will be overwritten when c5 is updated, that is why you should stay out of it.

The reason your code didn't work is because you are setting the font to 'arial' in typography.css and are linking to that file after your main.css in the theme. Setting font on individual elements also takes presidence over more general declarations like on 'body'. Either import of a google font works in c5, but I use @import most often as I then just need to edit one file on a design change.

Another note on typography.css is that in v. 5.7 in the first months of next year, the use of typography.css will be deprecated as a new editor will be introduced.

I'm glad you got it working and I'm sorry I was afk most of the time in chat yesterday.

mhawke replied on Dec 22, 2012 at 8:24 am Permalink Reply

@adajad... how do you stop C5 from messing with the URL on the @import address? Every time I tried that method, C5 will prepend my domain to it so I got something like:

@import url(http://www.mysite.com/themes/mytheme/http://fonts.googleapis.com...

I couldn't figure out how to fudge with the URL to stop C5 from changing it. That's why I ended up recommending the addition of the stylesheet inclusion in the header.php.

Also, I've heard that @import is to be avoided due to performance issues.

tgadams11 replied on Dec 22, 2012 at 11:27 am Permalink Reply

No worries Adajad... appreciate being there when I need the assists. I will definitely be reaching out again when I start diving into another project in the coming days/week as I am sure I will need some hand holding...

Happy Holidays to you!

Forums

Themes

Changing Fonts in a Theme

Code

Post Reply

Delete Post

Mark Post as Spam

Destroy Spammer

Sign In?