4 replies [Last post]
Bluenose
Bluenose's picture
Offline
Enthusiast
Last seen: 2 years 1 week ago
Timezone: GMT+1
Joined: 2011-10-11
Posts: 96
Points: 136

Hello

I have a test site here that I am customising (I have left all the copyright notices intact, of course): but I am having trouble with the font (which is detailed in my CCS external stylesheet).

The relevant CSS is this:

#logo h1, #logo h2 { 
  font: normal 500% 'Jenna Sue', arial, sans-serif;
  border-bottom: 0;
  text-transform: none;
  margin: 0;
  padding: 0;
  float: left;
}

and the HTML:

<div id="site_heading">
 <div id="logo">
	 <div id="logo_text">
              <h1><a href="index.html">dima <span class="logo_colour">dayoub</span></a></h1>
          <h2>Simple. Contemporary. Website Template.</h2>
        </div>
</div>
  </div><!--close site_heading-->

Neither Safari nor IE recognise the font and yet further down the Web page, where it says 'Welcome to my site!', both browsers do recognise the font!

If it's not font or browser related, what could the problem be, please?

Thank you.

Bluenose

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 30 weeks 10 hours ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

Web fonts

Where's your @font-face selector? See @font-face.

Can you link to a public server url?

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

Bluenose
Bluenose's picture
Offline
Enthusiast
Last seen: 2 years 1 week ago
Timezone: GMT+1
Joined: 2011-10-11
Posts: 96
Points: 136

Hello Gary Thank you for

Hello Gary

Thank you for getting back to me.

This is the URL: http://www.bayingwolf.com/dima/index.html

And the image URL is here:

The font is in the stylesheet:

@font-face { 
  font-family: Jenna Sue; 
    src: url('../fonts/JennaSue-webfont.eot'); 
    src: local("Jenna Sue"), url('../fonts/JennaSue-webfont.ttf'); 
} 

and it's in a folder called 'Fonts' on my server. I can't see the font displayed on my Web page on my desktop, either but, as I say, I can see it displayed further down the page.

Thanks again for your help.

Blueie

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 30 weeks 10 hours ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

Overridden

You fail to declare the font for the span, and its h1 rules override the general h1 rules.

#site_heading H1 {
  color: #FFFFFF;
  font: 200% arial,sans-serif;
  letter-spacing: -2px;
  text-shadow: 1px 1px #1D1D1D;
  width: 940px;
}

No font rules found for the span.logo_colour.

#logo_text h1 a .logo_colour {
  color: #BD2CBB;
}

The .eot format is a MSFT proprietary type that is not and never was well supported. Keep it for old IE (<9) browsers, but use .woff, the current recommendation, as your go-to format.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

Bluenose
Bluenose's picture
Offline
Enthusiast
Last seen: 2 years 1 week ago
Timezone: GMT+1
Joined: 2011-10-11
Posts: 96
Points: 136

Hello Gary Thanks for

Hello Gary

Thanks for pointing that out to me and those details about the font extension.

It looks a lot better now both in Safari and IE!

Thanks again.

Blue