CODEWITHSUNDEEP
cssfont-face
Elijah Whitney
Elijah Whitney

Reputation: 31

How come my font face looks different on the web than it does in the ttf/woff files?

This is what the font should look like.
Here's what the font looks like in the .ttf file.
And this is what the font looks like on my website.

#top {
    margin:             30px 30px 0px 150px;
    border:             3px solid maroon;
    text-align:       center;
    height:             130px;
    background:     url(text/dumbledore.gif) right no-repeat, url(text/gandalf.gif) left no-repeat, url(text/tenor.gif) center;
}

@font-face {
    font-family: 'Beyond Wonderland';
    src: url('fonts/BeyondWonderland.eot');
    src: url('fonts/BeyondWonderland.eot?#iefix') format('embedded-opentype'),
        url('fonts/BeyondWonderland.woff2') format('woff2'),
        url('fonts/BeyondWonderland.woff') format('woff'),
        url('fonts/BeyondWonderland.ttf') format('truetype'),
        url('fonts/BeyondWonderland.svg#BeyondWonderland') format('svg');
    font-weight:  normal;
    font-style:   normal;
}

h1#title-text {
  font-family:  'Beyond Wonderland';
  border:       none;
  font-size:    450%;
  width:        100%;
  text-shadow:  1px white;
  color:        black;
  text-align:   center;
  padding:      20px 0px 20px 0px;
  margin:       auto;
}
    <div id="top">
        <h1 id="title-text" title="You are viewing the home page">Welcome to the Erevrast Home Page!</h1>
    </div>

Upvotes: 3

Views: 450

Answers (2)

Parking Master
Parking Master

Reputation: 626

You're defining the src of the font twice in CSS. seperating it by commas will show the font after it if it can't be loaded. Example:

src: url(nonexistentfont.ttf), Arial;

Will show the font "Arial" because the other font couldn't be loaded.

Try this 

#top {
    margin: 30px 30px 0px 150px;
    border: 3px solid maroon;
    text-align: center;
    height: 130px;
    background: url(text/dumbledore.gif) right no-repeat, url(text/gandalf.gif) left no-repeat, url(text/tenor.gif) center;
}

@font-face {
    font-family: 'Beyond Wonderland';
    src: url(fonts/BeyondWonderland.eot), url(fonts/BeyondWonderland.eot?#iefix) format('embedded-opentype'), url(fonts/BeyondWonderland.woff2') format('woff2'), url('fonts/BeyondWonderland.woff') format('woff'), url('fonts/BeyondWonderland.ttf') format('truetype'), url('fonts/BeyondWonderland.svg#BeyondWonderland') format('svg');
    font-weight: normal;
    font-style: normal;
}

h1#title-text {
  font-family:  'Beyond Wonderland';
  border:       none;
  font-size:    450%;
  width:        100%;
  text-shadow:  1px white;
  color:        black;
  text-align:   center;
  padding:      20px 0px 20px 0px;
  margin:       auto;
}
    <div id="top">
        <h1 id="title-text" title="You are viewing the home page">Welcome to the Erevrast Home Page!</h1>
    </div>

Upvotes: 1

Luke
Luke

Reputation: 20070

The text-shadow applies to even the faintest line in the font, so every smudge/scrape in the artistic font will end up with a 1 pixel white shadow. Try removing text-shadow: 1px white;.

Upvotes: 1

Related Questions