#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Sep 2012
    Posts
    26
    Rep Power
    0

    Entypo Font Not Displaying


    I moved this site over to its official domain and now the glyphs for the Entypo Font aren't displaying properly. The main site (www.northwesternesse.com) has charset encoding of iso-8859-1, while the site I just completed, done in HTML5, has a charset of utf-8. Do they both have to be the same? If so, which one should I go with?

    www.northwesternesse.com/hobbitnews

    Here's the CSS code for the font glyphs. The paths are correct:

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

    ul#join li a {
    background: transparent;
    display: block;
    margin: 0;
    opacity: .75;
    padding: 10px 0 10px 10px;
    text-decoration: none;

    -webkit-transition: all .2s ease;
    -moz-transition: all .2s ease;
    -o-transition: all .2s ease;
    transition: all .2s ease;
    }

    ul#join li a:before {
    content: '';
    display: inline-block;
    font-family: 'EntypoRegular';
    font-weight: normal;
    font-size: 40px;
    line-height: .5px;
    margin: -3px 10px 0 0;
    vertical-align: middle;
    }
  2. #2
  3. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,131
    Rep Power
    4304
    It's generally recommended that UTF-8 be used, but use whichever one you've been using while you were developing the site.
    Spreading knowledge, one newbie at a time.

    Check out my blog. | Learn CSS. | PHP includes | X/HTML Validator | CSS validator | Common CSS Mistakes | Common JS Mistakes

    Remember people spend most of their time on other people's sites (so don't violate web design conventions).
  4. #3
  5. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Sep 2012
    Posts
    26
    Rep Power
    0
    Well I developed the main site years ago...but I just completed the Hobbit News part of it in HTML5. The glyphs font worked fine when the site was on my domain but now that I've moved it over to its own folder on the www.northwesternesse.com domain, they aren't working. I'll try changing the charset for the main site.

    Okay just changed the main site to UTF-8, but the font still isn't showing correctly.

    Here's the link where it's working okay:

    debbierking.com/hobbitnews

    And the site where the glyphs aren't displaying:

    northwesternesse.com/hobbitnews
  6. #4
  7. For POny!
    Devshed Newbie (0 - 499 posts)

    Join Date
    Apr 2012
    Location
    Amsterdam
    Posts
    416
    Rep Power
    115
    Hi,

    I just check this issue on my old computer and it looks like your don't have the font files on
    northwesternesse.com/hobbitnews/fonts/Entypo-webfont.ttf



    You mind want to have a look at that. Just wondering though. If you only use this font for this little icons, Why not save your self some header requests and use data urls . Pretty nice too. certainly if you are pumping html5 through your side like its wildfire :P

    hope this helps!

    ciao!

    P.s. as a side not, the content property is a pain in the *** to debug
  8. #5
  9. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Sep 2012
    Posts
    26
    Rep Power
    0
    The Entypo files are in the fonts folder on the server, including the .ttf file. Am not sure why you're not seeing it.

    How would you use data urls? Would that solve this problem?
  10. #6
  11. No Profile Picture
    Lost in code
    Devshed Supreme Being (6500+ posts)

    Join Date
    Dec 2004
    Posts
    8,316
    Rep Power
    7171
    The font URLs are returning 404's for me too, that's why they're not showing up. If you visit
    www.northwesternesse.com/fonts/Entypo-webfont.eot

    You'll see that you get a 404 error.
    PHP FAQ

    Originally Posted by Spad
    Ah USB, the only rectangular connector where you have to make 3 attempts before you get it the right way around
  12. #7
  13. For POny!
    Devshed Newbie (0 - 499 posts)

    Join Date
    Apr 2012
    Location
    Amsterdam
    Posts
    416
    Rep Power
    115
    Originally Posted by DesignLady94
    The Entypo files are in the fonts folder on the server, including the .ttf file. Am not sure why you're not seeing it.

    How would you use data urls? Would that solve this problem?
    They are not on your server.

    I linked an article that explains how to use those data urls. If you only use that complete font stuff to link 3 social media icons, I would recommend looking in alternatives like that. (sprites are a nice way to go to, which can also be imported as data)

    P.s. if those fonts are on that sever can you give a direct link?
  14. #8
  15. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Sep 2012
    Posts
    26
    Rep Power
    0
    This makes no sense to me. The fonts are loaded on to the server but when you try to access them in the url they don't show up. I'm going to contact the server owner.

    Am purposely wanting to use web-faced font glyphs and not images for hi-res display purposes.
  16. #9
  17. For POny!
    Devshed Newbie (0 - 499 posts)

    Join Date
    Apr 2012
    Location
    Amsterdam
    Posts
    416
    Rep Power
    115
    Originally Posted by DesignLady94
    This makes no sense to me. The fonts are loaded on to the server but when you try to access them in the url they don't show up. I'm going to contact the server owner.

    Am purposely wanting to use web-faced font glyphs and not images for hi-res display purposes.
    weird stuff. Well in that case you made a good decision to have those fonts just checking as a fellow designer
  18. #10
  19. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Sep 2012
    Posts
    26
    Rep Power
    0
    Okay a popup shows up now when you type this url in:

    http://www.northwesternesse.com/hobbitnews/fonts/entypo-webfont.ttf and the same for .eot and .woff.

    But the fonts still aren't displaying.
  20. #11
  21. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,131
    Rep Power
    4304
    It seems that your server hasn't been configured with the correct mime-type for each of those file types.

    If you don't already have one, make a plain text file called just ".htaccess" (Windows might make you name it something else though) and add the following to it. Then upload it to the top level directory of your site.
    Code:
    AddType image/svg+xml .svg
    AddType application/x-font-truetype .ttf
    AddType application/x-font-opentype .otf
    AddType application/x-font-woff .woff
    AddType application/vnd.ms-fontobject .eot
    Spreading knowledge, one newbie at a time.

    Check out my blog. | Learn CSS. | PHP includes | X/HTML Validator | CSS validator | Common CSS Mistakes | Common JS Mistakes

    Remember people spend most of their time on other people's sites (so don't violate web design conventions).
  22. #12
  23. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Sep 2012
    Posts
    26
    Rep Power
    0
    Kravvitz,

    Have done this...had to create the file with the extension and then delete the extension once I uploaded it on the server. I tried putting it both at the top of Hobbit News and the top of NorthWesternesse and neither works.

    Changed the permissions to 644 and its *still* not working.

    I'm at a total loss here. Its now no longer working on my old server either.
  24. #13
  25. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Sep 2012
    Posts
    26
    Rep Power
    0
    Okay never mind...I'm going with a different glyph font and it's showing okay though I don't like it as well. The other was just too much hassle. Just am having a little trouble getting it to look right in IE8.

    Thanks Aeturnus and Kravvitz for trying to help!
  26. #14
  27. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Nov 2012
    Posts
    1
    Rep Power
    0

    Smile Howdy All


    I have a post on using Entypo on a website. There are a few things to consider and look at when using it as a font or using the unicode.

    open-logix.com/webtech/use-custom-webfontspictograms-in-5-steps/

    Hopefully this Helps

    -Harry

IMN logo majestic logo threadwatch logo seochat tools logo