• Skip to main content
  • Skip to forum navigation

StudioPress

  • Shop for Themes
  • My StudioPress

Forum navigation

  • Home
  • General Genesis Discussions
  • StudioPress Themes
  • Genesis Blocks
    • Genesis Blocks
    • Genesis Custom Blocks
  • Retired Themes
  • FAQs
  • Forum Rules
  • Internationalization and Translations
  • Forum Bugs and Suggestions
  • Forum Log In

Are You Using The WordPress Block Editor?

Genesis now offers plugins that help you build better sites faster with the WordPress block editor (Gutenberg). Try the feature-rich free versions of each plugin for yourself!

Genesis Blocks Genesis Custom Blocks

Custom CSS File for Font Not Working

Welcome!

These forums are for general discussion on WordPress and Genesis. Official support for StudioPress themes is offered exclusively at My StudioPress. Responses in this forum are not guaranteed. Please note that this forum will require a new username, separate from the one used for My.StudioPress.

Log In
Register Lost Password

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

This topic is: resolved

Tagged: css, font, Google font, header, script

  • This topic has 11 replies, 4 voices, and was last updated 11 years ago by nutsandbolts.
Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • May 26, 2014 at 3:16 pm #106867
    rivercramer
    Member

    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
    May 26, 2014 at 5:13 pm #106875
    nutsandbolts
    Member

    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+

    May 27, 2014 at 4:05 am #106935
    sumoncpi
    Participant

    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.

    May 27, 2014 at 4:16 pm #107057
    rivercramer
    Member

    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?

    May 27, 2014 at 4:18 pm #107058
    nutsandbolts
    Member

    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+

    May 27, 2014 at 4:45 pm #107060
    rivercramer
    Member

    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!

    May 27, 2014 at 4:52 pm #107061
    nutsandbolts
    Member

    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+

    May 27, 2014 at 4:54 pm #107062
    rivercramer
    Member

    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!

    May 27, 2014 at 4:56 pm #107063
    nutsandbolts
    Member

    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+

    May 28, 2014 at 4:59 am #107101
    Toon61
    Member

    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.

    May 28, 2014 at 8:57 am #107114
    rivercramer
    Member

    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.

    May 28, 2014 at 1:02 pm #107154
    nutsandbolts
    Member

    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
Viewing 12 posts - 1 through 12 (of 12 total)
  • The forum ‘Design Tips and Tricks’ is closed to new topics and replies.

CTA

Ready to get started? Create a site or shop for themes.

Create a site with WP EngineShop for Themes

Footer

StudioPress

© 2025 WPEngine, Inc.

Products
  • Create a Site with WP Engine
  • Shop for Themes
  • Theme Features
  • Get Started
  • Showcase
Company
  • Brand Assets
  • Terms of Service
  • Accptable Usse Policy
  • Privacy Policy
  • Refund Policy
  • Contact Us
Community
  • Find Developers
  • Forums
  • Facebook Group
  • #GenesisWP
  • Showcase
Resources
  • StudioPress Blog
  • Help & Documentation
  • FAQs
  • Code Snippets
  • Affiliates
Connect
  • StudioPress Live
  • StudioPress FM
  • Facebook
  • Twitter
  • Dribbble