Custom CSS File for Font Not Working

Community Forums Forums Design Tips and Tricks Custom CSS File for Font Not Working

This topic is: resolved

This topic contains 11 replies, has 4 voices, and was last updated by  nutsandbolts 6 months, 3 weeks ago.

Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • #106867

    rivercramer
    Member
    Post count: 4

    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
    #106875

    nutsandbolts
    Keymaster
    Post count: 3202

    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, Nuts and Bolts Media
    I provide dev and training services for web designers • Find me on Twitter and Google+

    #106935

    sumoncpi
    Blocked
    Post count: 13

    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.

    #107057

    rivercramer
    Member
    Post count: 4

    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?

    #107058

    nutsandbolts
    Keymaster
    Post count: 3202

    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, Nuts and Bolts Media
    I provide dev and training services for web designers • Find me on Twitter and Google+

    #107060

    rivercramer
    Member
    Post count: 4

    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!

    #107061

    nutsandbolts
    Keymaster
    Post count: 3202

    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, Nuts and Bolts Media
    I provide dev and training services for web designers • Find me on Twitter and Google+

    #107062

    rivercramer
    Member
    Post count: 4

    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!

    #107063

    nutsandbolts
    Keymaster
    Post count: 3202

    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, Nuts and Bolts Media
    I provide dev and training services for web designers • Find me on Twitter and Google+

    #107101

    Toon61
    Participant
    Post count: 53

    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.

    #107114

    rivercramer
    Member
    Post count: 4

    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.

    #107154

    nutsandbolts
    Keymaster
    Post count: 3202

    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, Nuts and Bolts Media
    I provide dev and training services for web designers • Find me on Twitter and Google+

Viewing 12 posts - 1 through 12 (of 12 total)

You must be logged in to reply to this topic.