Custom CSS File for Font Not Working

[rivercramerMember]

I am trying to change the font on my website using a custom CSS style sheet. This is what that sheet looks like now:

/*
Theme Name: Magazine Pro Theme
Theme URI: http://my.studiopress.com/themes/magazine/
Description: A mobile responsive and HTML5 theme built for the Genesis Framework.
Author: StudioPress
Author URI: http://www.studiopress.com/

Version: 3.0.1

Tags: black, white, one-column, responsive-layout, custom-background, custom-header, custom-menu, full-width-template, sticky-post, theme-options, threaded-comments, translation-ready, premise-landing-page

Template: genesis
Template Version: 2.0

License: GPL-2.0+
License URI: http://www.opensource.org/licenses/gpl-license.php
*/

@import url(http://fonts.googleapis.com/css?family=Josefin+Sans);

.site-title {
font-family: 'Josefin Sans', sans-serif;
font-size: 16px;
line-height: 2;
margin-bottom: 0;
}

I have added a hook in the header script like so:

<link rel='stylesheet’ type='text/css’ href='http://thedenverdust.com/wp-content/themes/magazine-pro/custom-font.css' media="all" />

But the font does not seem to change. Did I mess up somewhere? Obviously new, but willing to learn.

http://thedenverdust.com

[nutsandboltsMember]

I'm not sure I understand why the font is being added through a custom stylesheet - you can add all of that to the style.css in your child theme's folder. Child themes do not update and are meant to be customized directly.

A better practice for adding Google fonts is to enqueue it through functions.php, then make the necessary changes in your child theme's stylesheet. See here for more info: http://genesisdesignr.com/installing-google-fonts-best-way/

---

Andrea Whitmer, Owner/Developer, Nuts and Bolts Media
I provide development and training services for designers • Find me on Twitter and Google+

[sumoncpiMember]

body
{
margin: 0 auto;
padding: 0;
font-size: 80%; /* Resets 1em to 10px */
font-family: 'Lucida Grande', Verdana, Arial, Sans-Serif;
background-color: #123C66;
color: #000000;
}

I got it to work changing another tag, maybe this will help someone else with the same problem :

.BlockContent-body
{
position: relative;
overflow: hidden;
z-index: 0;
margin: 7px;
text-align: left;
color: #085159;
font-family: 'Arial';
font-size: 12px;
font-weight: normal;
font-style: normal;
text-decoration: none;
}

Thank you.

[rivercramerMember]

Okay, I didn't think so at first. I then read another forum which suggested this as a safer alternative. I'll try the enqueue option. When editing, should I first make copies of my php and css files, in case I screw up and hold them on my computer? Is it best to edit these files first in textedit and then upload and overwrite the files through ftp?

[nutsandboltsMember]

Definitely keep a copy of your files just in case. It's always better to use FTP to edit the files vs. the WordPress editor - if something breaks, you'll have it right there and can revert the changes in your FTP program. Let us know how it goes!

---

Andrea Whitmer, Owner/Developer, Nuts and Bolts Media
I provide development and training services for designers • Find me on Twitter and Google+

[rivercramerMember]

This is great! I learned a lot, thank you. I can now edit with FTP and everything!

One more question, how do I specify which font I want for which part of the website? Like if I want my header Josefin Sans but the posts to be Ubuntu?

Again, thanks for all your help. I'll do a shout out when I am all up and running!

[nutsandboltsMember]

Once you've enqueued the scripts for each font in your functions.php file, you'll want to search out the elements you want to change in the stylesheet. So, for example, if you want your body text to be Ubuntu, you'd find this:

body {
background-color: #fff;
color: #222;
font-family: 'Roboto', sans-serif;
font-size: 16px;
font-weight: 300;
line-height: 1.625;
}

and change it to this:

body {
background-color: #fff;
color: #222;
font-family: 'Ubuntu', sans-serif;
font-size: 16px;
font-weight: 300;
line-height: 1.625;
}

That will only work if the font you name is enqueued; otherwise it will fall back to a default sans serif font like Arial. Hopefully that makes sense.

Generally, when I'm changing fonts, I search style.css for "font-family" - that brings up every CSS rule where a font is assigned, and makes it easier to change them.

---

Andrea Whitmer, Owner/Developer, Nuts and Bolts Media
I provide development and training services for designers • Find me on Twitter and Google+

[rivercramerMember]

That absolutely makes sense. Cool, I'll give that a shot. Looks like I can edit everything else about the font from there as well? Thanks again!

[nutsandboltsMember]

Yep! If you aren't familiar with using Firebug (or Inspector if you use Chrome), I have a tutorial that will walk you through. Makes it SUPER easy to find the elements you want to change and which CSS rules apply to them: http://www.nutsandboltsmedia.com/how-to-customize-your-genesis-child-theme-with-chromes-inspector/

---

Andrea Whitmer, Owner/Developer, Nuts and Bolts Media
I provide development and training services for designers • Find me on Twitter and Google+

[Toon61Member]

Andrea,
You are right; Child Themes do not update ... automatically.
But when Studiopress releases an update to a child theme, and you just install it, you run in all sorts of problems because the style.css will also be updated. So any changes you made are lost.
It is not uncommon to leave all default child theme files as is, and create your own additional CSS or PHP files, just to make sure that a Child Theme update doesn't ruin your edits.

[rivercramerMember]

Toon61,
Then before updating my child theme, should I simply make a copy of the php and css files, reloading them after I update? My original problem was I created my own files and tried to hook them into the header, but I believe somewhere my code was wrong.

[nutsandboltsMember]

You shouldn't update the child theme - there is no compelling reason to do so. For example, many older themes have been rereleased with a Pro version, but that is considered an entirely different child. Since the child theme is just a skin with all core functionality contained in the framework, as long as the framework is up to date, the child will continue to function. I have clients who are using ANCIENT child themes but they still work just fine.

---

Andrea Whitmer, Owner/Developer, Nuts and Bolts Media
I provide development and training services for designers • Find me on Twitter and Google+

[Author]

Posts