Can I specify unique fonts on pages or in the sidebar?

  • Hello,

    Is it possible to specify a special font for a one-time use, for example on a page or in the sidebar?

    I have a rudimentary understanding of how WordPress uses the style.css file to specify font characteristics throughout the blog. For example I have modified the Kubrick theme to make h1, h2, etc, etc exactly what I want so my blog looks the way I want. I have also tinkered with the php files; for example, I have made the sidebar hide listings of certain pages that I want to remain private. But here my understanding of how things works breaks down a little and I am having a lot of trouble figuring out what I need from the forums and docs.

    What I would like to do is have a unique font on one of my pages. Specifically, I removed the header from my “About the author” page and I want to replace it with an h1-like font that just says my name. I did this by making a special template for this page and specifying <h1></h1> for the title call:

    new author page

    However, the rest of the blog needs h1 to be a centered font (this is specified in style.css), but here I want the font to be left-aligned. And while I’m at it I would like to reduce the size a little.

    Can I create a whole new font category (h?) in style.css? Or can I achieve this by doing something in the special page template I have created?

    Sorry so long, thanks if you can help me.

Viewing 5 replies - 1 through 5 (of 5 total)

  • Look for things that include #sidebar and modify those. You can add your own #sidebar id’s as well to the css sheet.

    Thread Starter annaship11

    (@annaship11)

    I’m sorry, I don’t follow. Are you saying to modify a font specific to the sidebar I can create an id in style.css using “#sidebar”? Will the sidebar.php file automatically use it or do I need additional specifications outside the style.css file?

    Any tips on changing a font on a page?

    he is saying that fonts are designated in your stylesheet.

    the short answer to this question:

    Is it possible to specify a special font for a one-time use, for example on a page or in the sidebar?

    is yes.

    You asked if it can be done — it can. You didnt ask “HOW” so I’ll refer you to some good reading:

    https://www.w3.org/Style/CSS/learning

    Lots and lots of links to wonderful tutorials and CSS primers.

    h1 class="left-aligned"

    h1 class="right-aligned"

    h1 class="right-aligned special-font"

    .left-aligned { text-align: left; }

    .right-aligned { text-align: right; }

    .special-font { font crap goes here; }

    Thats just ONE way. And obviously you can expand upon those.

    All you need to do is assign a class or id to the H1 selector. Use ID if that will be the ONLY instance of that element on the page; use class if you are going to use it in several places.

    For example:

    h1#about {
   color: red;
}

h1.highlight {
   color: #000;
   background: #ff6;
   font-weight: normal;
   font-style: italic;
}

    If you just leave it as a class, you can use it with anything, a paragraph, a header (h1, h2, etc.)

    .highlight {
   color: #000;
   background: #ff6;
   font-weight: normal;
   font-style: italic;
}

    And to call it on your template, you’d do this:

    <h1 id="about">About Me<h/1>

    or

    <h2 class="highlight">What's New</h2>

    or

    <p class="highlight">Here's some new stuff here.</p>

    And so forth. And you can be as creative as you want; I just gave brief examples of changing the font colors and styles, but you can mess with the padding, margins, alignment, font-family, etc.

    Thread Starter annaship11

    (@annaship11)

    Thanks, jonimueller!

    This is precisely what I needed to know: how the interaction between the style.css and template files worked. (I had actually tried all this before but didn’t call it up properly in the template with an id, that’s what I couldn’t figure out.)

    Now I understand, this is very helpful. Thanks again.

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Can I specify unique fonts on pages or in the sidebar?’ is closed to new replies.