WordPress.org

Ready to get started?Download WordPress

Forums

Change style in header only? (6 posts)

  1. lotgla
    Member
    Posted 5 years ago #

    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?

  2. stvwlf
    Member
    Posted 5 years ago #

    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>
    </h1>
    structure

    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"

  3. lotgla
    Member
    Posted 5 years ago #

    My site is this one:
    http://www.glanssmycken.se

    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>
          </div>

    In style.css:
    html

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

    And also:

    #header
    {
      clear:both;
      width:980px;
      height:120px;
    }
    
    #header .blog-title
    {
      padding:30px 20px 0px 20px;
      font-size:30px;
    }
    
    #header .blog-title a
    {
      text-decoration:none;
    }
    
    #header .blog-description
    {
      padding:0px 20px 0px 20px;
    }
  4. t31os
    Member
    Posted 5 years ago #

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

  5. stvwlf
    Member
    Posted 5 years ago #

    Hi

    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.

  6. t31os
    Member
    Posted 5 years ago #

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags