Changing font in Network Theme

Hey There-
Can anyone tell me what line and .php file I need to mod the Header font? I would like to use Philosopher in google fonts. I have the code....just don't know where to swipe it. TIA :slight_smile:

  • DavidM
    • DEV MAN’s Mascot

    Hi tutuology,

    For a change to the header font, you'll need to work with CSS rather than PHP. And if you haven't already, you're going to want to utilize the child theme that resides in the Network theme folder as follows:
    network\themes\network-child

    Basically, you'll want to copy over that folder to the themes folder on your site, so wp-content/themes/. For more information on parent/child setup, please see the following:
    https://premium.wpmudev.org/wpmu-and-buddypress-themes/what-are-parent-and-child-themes/

    The reason for the above is to ensure that any changes you make aren't overwritten when you update the theme (ie. when a new theme version is released).

    So with that in mind, you'll want to activate that new child theme, navigate to Apearance > Editor and uncomment the last line in the file by removing the /* */ characters so that it looks like this:
    @import url( _inc/css/child.css );

    From there, you should be able to add the next bit of code to the child css file which resides at the following:
    network-child\_inc\css\child.css

    Right after the last */ in that file, you can add the following:
    #header h1 { font-family: 'Philosopher', arial, serif; }

    And that should do it! Sorry if some bits and pieces seem redundant but I wanted to try and make as simple as possible to follow. Hope that helps! Please let me know if you have any questions!

    Cheers,
    David

  • Tammie
    • WordPress Wizard

    Actually DavidM not if she's using a Google font - I think you need to read up before advising with regards to Google fonts as that's a key step. Please check your information.

    @tutology: We have 2 places you can add that :

    1. Either to the function font_show() OR
    2. In header.php after wp_head()

    Just put in the <link .... google link and then you are loading the font.

    Then just use in your CSS as you want either after the link in header.php using <style or use in the actual child.css.

    We will be updating our Google font list but they keep adding them - not a bad thing but hard to keep up with :slight_smile:

  • tutuology
    • The Bug Hunter

    Thanks Tammie. I'll let you know either way how it turns out. @David, thanks...I know I'll end up with a network child theme as I will need to be able to feature store owners product on the front page. Gina's been thru it all before me and she had to make some tweaks to the child theme to be afforded that feature (product features on the front page).

  • tutuology
    • The Bug Hunter

    sorry for needing clarity Tammie. This is the code google fonts gave me: <link target="_blank" href="http://fonts.googleapis.com/css?family=Philosopher:regular" rel="stylesheet" type="text/css" >
    <style>
    body {
    font-family: 'Philosopher', serif;
    font-size: 60px;
    font-style: normal;
    font-weight: 400;
    text-shadow: 2px 2px 2px #aaa;
    text-decoration: none;
    text-transform: none;
    letter-spacing: 0em;
    word-spacing: 0em;
    line-height: 1.2;
    }
    </style>

    Do I place this entire code after wp_head(), or do I just place the link, then add the rest somewhere else?

    Just put in the <link .... google link and then you are loading the font.
    Then just use in your CSS as you want either after the link in header.php using <style or use in the actual child.css.

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.