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/
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.
“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).
@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.
Thanks everyone for the help. Im going to try out these methods tonight and report back 🙂
Thanks again!
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!
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.
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.
thanks so much bud i appreciate it!
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!
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
