| SitePoint Sponsor |
Hi,
I just started a website, and I am using CSS to change the font. The problem is that when I open the page, for a fraction of a second I see the text as Times New Roman, and then it switches to Verdana, as specified in the style sheet. I don't see other pages on the web doing this, at least not the good pages. Can anyone tell me what I am doing wrong? Thanks.
Hi PRinCanton. Welcome to the forums.
It's a little hard to tell without seeing the site. Can you provide a link?
Here is the link:
http://www.prashanthspage.com/
Hm, I can't see any reason why you'd be getting that effect. What browser are you using?
The main thing I'd suggest is that you add the red bit to the following rule:
It's good to specify the computer's default sans-serif font in the event that it can't find (or takes time to find) the specified font.Code:font-family: Verdana, sans-serif;
Hello and thank you for the response! I am using Firefox 6.0.2, and I made the changes you specified to the style sheet, and still I get the problem when the page loads (I see Times New Roman for a split second, and then I see Verdana). Could it be a problem with the html or head element?
It's odd that you are seeing that. I don't see that effect in any browser. Have you tried clearing your cache? (Probably irrelevant, but you might as well try.)
My guess would be that it's the invalid code that is causing the browser to scratch it's head for a moment while thinking "Hey, what?", before it figures out what you want it to do.
If you're using XHTML or fauXHTML, you need to close all elements, including spot tags like <meta>, so you should haveYou've also got two <body> tags, one legal and one not. There should just be one, after the closing </head>. Try changing those and see if that makes a difference.Code:<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
Any posts I write in Arial are on my mobile phone, so please excuse typos etc.
Any posts I write in Verdana are on a PC, so feel free to berate me mercilessly for any mistakes
I tried clearing the cache, and the problem is still there. The problem is easily seen when I refresh the page. But when I use the embedded style sheet instead of the external style sheet, the problem goes away! I am happy but frustrated that the external style sheet did not work. Here is the line I used to reference the external style sheet and also the style sheet itself. Can you see any problems with them?
<link href="style1.css" rel="stylesheet" type="text/css"/>
/*
CSS for Prashanth's Page
*/
body {
font-family: Verdana, sans-serif;
}
I just saw this post. Are you referring to the following body tag:
<body style="background-color:PowderBlue; font-family: Verdana, sans-serif;">
Since I am new to HTML, I thought this was a "body style" tag! I will change this and see if it helps. I will also change the forward slash that you highlight and see if this helps. Thanks for the advice!
You're allowed to do that, no problem at all (although for a site with more than one page it isn't a good idea) ... what you're not allowed to do is to put it before the closing </head> tag ... sorry if I didn't make that clear!Originally Posted by PRinCanton
Actually, slight change of tack – technically you're not allowed to use colour names in CSS beyond the 16 base colours, you should either use #hex or rgb() codes instead. Although I'm not aware of any current browsers that using names will cause problems for, it's still best if you can do it right just in case it causes problems in future browsers. And there isn't a lot of point in declaring the same font properties in both inline CSS and an external stylesheet.
Any posts I write in Arial are on my mobile phone, so please excuse typos etc.
Any posts I write in Verdana are on a PC, so feel free to berate me mercilessly for any mistakes
I am not seeing the effect either.
In any case, inline css is actually not a very efficient way to code, in general.Tho it's still valid code, you should do all your styling within a <style> tag or an external CSS file imported via a link. This may or may not be the culprit, but I noticed your site is very media heavy, it could be that your computer is getting chocked from all the media data, and with the CSS instructions being inline, it's "lagging" when rendering.<body style="background-color:PowderBlue; font-family: Verdana, sans-serif;">
Brilliant ideas, elegant execution.
Graphic Design, Art Direction, Copywriting and Web Design.
I notice the effect only in Firefox (6.0.2). I had previously made some changes to Firefox to make it load faster, which might be the cause of the problem. When I use IE, I notice only a band of the screen will change back to the original background color (white) when I hit refresh, and even this happens very quickly. I used some html from w3schools.com and created another page and another style sheet just to make sure it wasn't anything bad in my own code. Here is a link to the page that I made from the w3schools code:
www.prashanthspage.com/test.html
The above page still has the effect that I am talking about. I notice that none of the professionally done pages seem to do this, even in my tweaked Firefox browser, and I have looked at the page source for those pages and they all have style sheets. Some examples are indeed.com, vongage.com, search.yahoo.com, and even this page (sitepoint). I am wondering if it is something in their headers or their html definition that is making their pages load so well. I notice that the problem completely disappears when I use inline styling as in the code that I wrote in the previous post (I am using inline styling now on the index page). But I don't want to be limited to using inline styling. Thank you all for your posts and help!
It's an odd situation, but if it's only happening in Firefox 6, it's no biggie. The current version is Firefox 12.
You've gone back to not ending your font list with serif/sans-serif. It's best to make that a standard procedure.
PRinCanton
I can't recreate the text change either, but suggest you put the font-family CSS first. Font-family does create problems if not defined first. If this doesn't change it for you, try <body style="font-family: Verdana, sans-serif!important; background-color:PowderBlue;">
Placing "!important" immediately behind the last font family and before the semi-colon should override any other font family references.
It is also a good idea to change the background color from PowderBlue to the hex color code "#B0E0E6"
Posting Permissions
Reply With Quote
Bookmarks