- This topic is empty.
-
AuthorPosts
-
June 4, 2012 at 6:01 pm #38339RockoParticipant
I’m using @font-face for the h1 and p tags of my site. Browserlab shows that it’s loading both font styles fine across the site for all browsers (including IE6) except for the h1 tag in IE8. I figured it was down to a CSS conflict, but there really doesn’t seem to be one. Also, it’s not loading the next fonts in the font-family (i.e. Helvetica, Arial), so I’m totally confused as to what’s causing this. Thanks in advance for your help :)
@font-face {
font-family: 'TheSerifLight';
src: url('../fonts/theserif-3-light-webfont.eot') format('embedded-opentype');
src: url('../fonts/theserif-3-light-webfont.eot?#iefix') format('embedded-opentype'),
url('../fonts/theserif-3-light-webfont.woff') format('woff'),
url('../fonts/theserif-3-light-webfont.ttf') format('truetype'),
url('../fonts/theserif-3-light-webfont.svg#TheSerifLight') format('svg');
font-weight: normal;
font-style: normal; }
@media screen and (-webkit-min-device-pixel-ratio:0) {
@font-face {
font-family: 'TheSerifLight';
src: url('../fonts/theserif-3-light-webfont.eot');
src: url('../fonts/theserif-3-light-webfont.eot?#iefix') format('embedded-opentype'),
url('../fonts/theserif-3-light-webfont.svg#TheSerifLight') format('svg');
font-weight: normal;
font-style: normal; }}
h1 {
margin-top:0.2em;
margin-bottom:0.8em;
font-weight:normal;
color:#444;
font-size:30px;
font-family:'TheSerifLight', Helvetica, Arial, sans-serif; }June 4, 2012 at 6:55 pm #103881RockoParticipantThe code above works fine in IE7 and IE6, and it works fine in IE8 for the paragraph tags. I’m running some tests now (changed h1 to h2, and to a p tag with class) to see if it’s a CSS conflict. Definitely not a CSS conflict, and I’m now wondering why IE8 is picking up the font used for the p tags, but not the font used for a p tag with a class. :/
June 4, 2012 at 7:37 pm #103882TheDocMemberDo you have a link?
Browserlab is never going to be as good as testing on a machine yourself.
June 4, 2012 at 7:42 pm #103883RockoParticipantSry, forgot to add link :)
June 4, 2012 at 8:14 pm #103884SenffParticipantI don’t think it could/would be the reason, but on a related note: you shouldn’t have more than one H1 on a page — unless it’s HTML5, but judging from the doctype that’s not the case.
June 4, 2012 at 8:27 pm #103885RockoParticipantThat’s right, it’s not HTML5. Thanks for the advise though!
June 4, 2012 at 10:23 pm #103893chrisburtonParticipant@Rockmole I don’t have an answer for you but I just wanted to say that I absolutely love your menu.
August 6, 2012 at 12:10 pm #107381SilvermanMember@Rockmole did you ever find a solution to this? I am having exactly the same issue.
August 6, 2012 at 2:18 pm #107389RockoParticipantIt actually seems to be alright. IE8 in Adobe Browserlab was not showing the embedded font, but when i checked it out on two PCs with IE8, it first loads the embedded font, changes it to default sans-serif, then reverts back to the embedded font (all within a couple seconds). Just goes to show that it’s always best to run these tests on the actual machines :)
Seeing as this is only happening for h1 tags on IE8 for PCs, i’m okay with letting it be as is. Did you run it through a browser tester, or are you having trouble with it on an actual PC?
August 6, 2012 at 2:19 pm #107390RockoParticipant@ChristopherBurton Thanks!
-
AuthorPosts
- The forum ‘CSS’ is closed to new topics and replies.