Support » Themes and Templates » Change style in header only?

  • I would like to change the font of the text in the header only (so that it is the same font as I use in my logo).

    I found out where I can change the font for all text that is written on the page, but I would like to keep the present font everywhere except in the header…

    Any suggestions in which file I could make that change? And how?

Viewing 5 replies - 1 through 5 (of 5 total)
  • Can’t give specifics without seeing your site.

    In general, the header text will be set in /wp-content/themes/{themename}/header.php

    Look at that file.

    If you header text is set in an <h1> ..... </h1> tag, and that tag is contained within a

    <div id="header">
      <h1> ..... </h1>


    you would add this to style.css
    #header h1 { font-size: 36px; }

    that will change the font size on h1, but only h1 found within an IF of header.

    You must substitute whatever tag is wrapped around your header text in your theme for <h1>, and the ID of the div that tag is contained within for id="header"

    My site is this one:

    It’s the font for “Glanssmycken” in the header I would like to change from Arial to Vivaldi. I can change in style.css but then all the text on the site is changed and that doesn’t look so good…

    In my file header.php this is the code:

    <!-- Header -->
          <div id="header">
            <h1 class="blog-title"><a href="<?php bloginfo('url'); ?>" title="<?php bloginfo('name'); ?>"><?php bloginfo('name'); ?></a></h1>
            <p class="blog-description"><?php bloginfo('description'); ?></p>

    In style.css:

      font:normal 12px Arial, Helvetica;
      background:url(../img/bg/background.png) repeat !important;

    And also:

    #header .blog-title
      padding:30px 20px 0px 20px;
    #header .blog-title a
    #header .blog-description
      padding:0px 20px 0px 20px;

    #header * {font-family:Vivaldi}

    Would be a quick easy way to apply it to all elements in the header.

    Of course remember, that is only going to display for users with the font installed, mac, windows or other os alike, if the PC being used to view the site doesn’t have the font, it’ll default to something else… regardless of which method is used in the CSS.

    #header basically targets the elements with id=”header” and anything following that before the opening { is a sub-element.., in this case we use * , which simply means ALL.


    Try adding this to your stylesheet /wp-content/themes/{themename}/style.css

    #header .blog-title, #header .blog-title a {
       font-family: Vivaldi, arial, helvetica;

    The other fonts in the list are in case Vivaldi is not installed on a computer. Vivaldi would not be a common font. When a browser can’t find on the computer a font it is supposed to display, it goes down the list and uses the first font it finds. If it can’t find any, it uses the default font defined in the browser’s setup.

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Change style in header only?’ is closed to new replies.