CSS Help - I can change body font on my homepage but won't let me change on internal page

by jt47000

Posted: 11 years ago 3 replies

WEB DESIGN

Hi guys,

I gotta tell ya, wordpress is great but trying to use custom fonts is a nightmare... why can;t it just be easy?

Here's my problem. My site is JBeachHouse | Just another WordPress site . I used a plugin called Wordpress Font Uploader to upload my custom header font and upload my custom body font and it worked fine for the homepage, however the custom font for the body works on the homepage but not on the internal pages.

If you go to JBeachHouse | Just another WordPress site, notice the custom fonts for both the header and the body, then click on the "Tour" button up top and notice how the body font on the Tour page is Arial or Georgia.

I've tried to inspect it with firebug, messing with codes, messing with my custom.js and nothing has worked. Please help

Thank You

JT

#body #change #font #homepage #internal #page

Michael Westgate

11 years ago

Hi,

You have span tags that define a font style and that overrides everything. My guess is that when you put the content in the WYSIWYG editor in the back end you copy and pasted it and that often creates the span tags.

Go to the admin, find the content, switch to HTML view and remove the span tags.

I've included two quotes below that show the difference in markup (additional span tag) between the home page and the content page.

<div class="home_text">
<h1><center>"Need A Vacation?..."</center></h1>
<p><center><img src="http://www.beachbikereview.com/jbeachhouse-temp-location/old1.jpg" width="379" height="132">

<img src="http://www.beachbikereview.com/jbeachhouse-temp-location/old4.jpg" width="379" height="132"></center>

<p> </p>

J House offers an Exceptional Getaway to Rocky Point Mexico's prestigious gated community of Las Conchas.Only 65 miles South of the Mexico border, Puerto Peñasco (Rocky Point) is a one of a kind, casual, beach front hideaway.

<p> </p>

and

<div class="fullwidth-page">
<h1>
Tour </h1>
<h1 style="text-align: center;">The J Beach House is located In Prestigious Las Conchas, directly on the beach</h1>
<p><span style="font-family: Tahoma; font-size: small;"><a href="http://www.beachbikereview.com/jbeachhouse-temp-location/?attachment_id=41" rel="attachment wp-att-41"><img class="alignleft size-full wp-image-41" alt="1" src="http://www.beachbikereview.com/jbeachhouse-temp-location/wp-content/uploads/2013/01/11.jpg" width="347" height="225" /></a>The J House is furnished with pretty much everything you will need to make the best of your stay. The kitchen has a full size refrigerator and freezer, dishes, pots and pans, cooking utensils, toaster, microwave, Flatware and a dishwasher, also has a bottle of fresh filtered water. Both bathrooms have a shower that are supplied with fresh water. There is an additional shower off the back patio to use after a dip in the ocean. If you choose not to bring any food there are plenty of restaurants to choose from.</span></p>
<p> </p>

Hope this helps,
Mike

[ 1 ] Thanks

{{ DiscussionBoard.errors[7564966].message }}

jt47000 11 years ago

Mike,

You were right! It totally worked. I can't thank you enough. I spent hours mulling over this and couldn't figure it out for the life of me. Thanks man, I really appreciate your help

Cheers,

JT
- Thanks
{{ DiscussionBoard.errors[7565635].message }}
Michael Westgate 11 years ago

No worries dude, happy to help .

You wouldn't believe how many hours I have spent in the office fixing similar problems! And then after hours of trying complex solutions a second pair of eyes spots the seemingly OBVIOUS culprit within 5 minutes ..!!

At my company a large number of these styling issues were due to rogue styles getting in to the HTML due to 'copy and pasting'. So we just got in the habit of copying from word into notepad and then from notepad into the WYSIWYG editor (pasting from notepad won't copy over any styles - only content). Not a foolproof solution but all the little things help.
- Thanks
{{ DiscussionBoard.errors[7568882].message }}