WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] How can I change the font on my blog? (13 posts)

  1. TheDrewMiller
    Member
    Posted 4 years ago #

    I am looking to change the font on my blog for certain things
    - Page Titles
    - Category Titles
    - Page default text
    - Header and Footer Hyperlinks

    I am not advanced when it comes to coding and am open to all solutions. After reading up on it a bit I am thinking maybe I need to change the default font family? Maybe upload some fonts?
    I may be way off as well lol. Anyways, if you have any knowledge in this area it would be greatly appreciated

    I am using the infocus (custom theme) that I bought from Themeforest.com and they just aren't providing me with quick service so I figured I might find the answer here

    Thanks in advance!

    p.s. - I tried the anyfont plugin which is supposed to do what I am looking for but it doesn't seem to be compatible with my blog. BUMMER

    p.p.s - if you need to see any php/ccs/html from my blog i would be happy to provide

  2. ambrosite
    Member
    Posted 4 years ago #

    I'm not familiar with Themeforest themes, but the fonts are usually specified in the style.css file. You need to search for the CSS properties "font" or "font-family" and edit the font list. Just be aware, you can only use certain fonts on a web page. This article gives some good suggestions for font stacks.

    http://unitinteractive.com/blog/2008/06/26/better-css-font-stacks/

  3. TheDrewMiller
    Member
    Posted 4 years ago #

    Thanks bud

    I am thinking what I am trying to accomplish is unrealistic....with that method anyways.

    Basically the blog has the "Page Title" automatically show up above the main text on the page. My client is requesting that I change the font of the "Page Title" on all the pages.

    They have given me a opensource custom font that they have downloaded off of dafont.com and would like it in other places as well.

    I am wondering if there is anyway I can stop the "Page Title" from showing up on default and maybe insert the page title as an image with the font they would like. That is the only workaround that I can envision at this point. Do you feel that this is realistic?

    I wouldn't know how to stop the "Page Title" from showing up on defualt so I'll have to ask the creators of the theme, by any chance would you have any expertise in this area?

    I would be willing to supply any files from the blog that you would need to make a recommendation.

    Thanks!

    p.s. - Take a look at the blog so you can see what I am talking about.
    http://hometendersofamerica.net/?page_id=22

    The text I would be looking to change would be "Realtor Benefits" which is the page title and shows up by default. I do not see any way within the theme setting or options to turn this off and I am assuming I would have to mess with the "appearance settings" on the blog to make this work.

  4. ambrosite
    Member
    Posted 4 years ago #

    "I am wondering if there is anyway I can stop the "Page Title" from showing up on default and maybe insert the page title as an image with the font they would like. That is the only workaround that I can envision at this point. Do you feel that this is realistic?"

    It is possible, yes, using a technique called CSS background image replacement. This article explains how to do it.

    http://css-tricks.com/css-image-replacement/

    Of the techniques described in that article, the Phark text-indent method is the one I use (none of them are perfect).

  5. Shane G.
    Member
    Posted 4 years ago #

  6. ambrosite
    Member
    Posted 4 years ago #

    @Shane G.,

    Those are good plugins, unfortunately they probably won't help him, since his client has given him a specific custom font which they want him to use.

  7. TheDrewMiller
    Member
    Posted 4 years ago #

    Thanks everyone for the help. Im going to try out these methods tonight and report back :)

    Thanks again!

  8. TheDrewMiller
    Member
    Posted 4 years ago #

    ambrosite, thanks for the article as it seems to be the most viable solution

    When using this method I would have to use that specific code (Phark Text Indent)
    on each page I would want to take the header text out of correct?

    I am unsure of what text i would be inputting in the code when using it

    I understand what i would be inputting after backround:...
    but not sure before that

    h1.technique-three {
    width: 350px; height: 75px;
    background: url("images/header-image.jpg");
    text-indent: -9999px;
    }

    thanks!

  9. ambrosite
    Member
    Posted 4 years ago #

    You shouldn't need to change your template code at all. WordPress automatically appends a unique class to each post. For example, you can target the "Realtor Benefits" heading using a selector like this:

    div.post-22 h1 {
    width: 350px; height: 75px;
    background: url("images/header-22.jpg");
    text-indent: -9999px;
    }

    For each post, retrieve the post ID and add another selector to target the heading, like this:

    div.post-23 h1 {
    width: 350px; height: 75px;
    background: url("images/header-23.jpg");
    text-indent: -9999px;
    }

    div.post-24 h1 {
    width: 350px; height: 75px;
    background: url("images/header-24.jpg");
    text-indent: -9999px;
    }

    ... and so on.

  10. ambrosite
    Member
    Posted 4 years ago #

    One more thing: the width and height are carving out the space where the image will appear in place of the text. Therefore, they should exactly match the dimensions of the header image you create.

  11. TheDrewMiller
    Member
    Posted 4 years ago #

    thanks so much bud i appreciate it!

  12. TheDrewMiller
    Member
    Posted 4 years ago #

    question: I have changed my permalinks on my pages to now be the title of the pages rather than the post id. would i input the page name now rather than the post id so this method works?if not, how do i find the post id?

    thanks again!

  13. ambrosite
    Member
    Posted 4 years ago #

    The post ID becomes visible in the URL when you edit the post in the admin panel. For example, the ID of this post is '3':

    http://www.yoursite.com/wp-admin/page.php?action=edit&post=3

Topic Closed

This topic has been closed to new replies.

About this Topic