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

user_16012521 0
Viewed 140

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>

font-face css
2 Answers

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;.

user_17662300

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>

user_172029600
Related