Results 1 to 6 of 6

Thread: Can't get @font-face to work in "live" testing

  1. #1
    Join Date
    Aug 2013
    Posts
    20
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default Can't get @font-face to work in "live" testing

    Hello,

    I have a site that I designed and recently began having hosted. While the intended font is displaying on my computer, I'm concerned that's because I already have it loaded locally. A friend is checking things on his end with a Mac using Safari, and he's not getting the right font - I chose Century Gothic, and he's seeing Apple Gothic.

    When I wrote the pages locally, I was using the following @font-face code:

    Code:
    @font-face {
    	font-family: 'Century Gothic';
    	src: url('../webfonts/CenturyGothic.eot');
    	src: local(☺), url('../Fonts/CenturyGothic.woff') format('woff'), url('../Fonts/CenturyGothic.ttf') format('truetype'), url('../Fonts/CenturyGothic.svg') format('svg');
    }

    Since having the site "live", I've experimented with the @font-face on one page only, and still can't get it to work. After trying probably a dozen variations, I last left the page with this code:

    Code:
    @font-face {
    font-family: 'Century Gothic';
    src: url('Fonts/CenturyGothic.eot?');
    src: local(☺),
    url('Fonts/CenturyGothic.woff') format('woff'),
    url('Fonts/CenturyGothic.ttf') format('truetype'),
    url('Fonts/CenturyGothic.svg#CenturyGothic') format('svg');
    }
    ...that last code is untested/checked by my friend, though at this point I'm skeptical that it will work. Which leads me to posting this thread here.


    I'm not sure if my code is bad, I have something placed incorrectly in the server/folders/etc., or all of the above (and possibly other issues). I ended up not only having a "Fonts" folder with a file for each above filetype in the root/main public folder, but also copied this fonts folder into each other page's folder that makes up the site.

    In addition, the reason for the ? in the eot file code is I'm having the site render as IE8 in even IE9 and IE10 browsers (due to an unrelated issue). It was my understanding some older versions of IE need the ? in there for the @font-face to work in them.

    I don't know if it matters re my issues, but I have held off on licensing the files for this until I get things working and finished on the site. While it's hosted, it is password protected from the public until I'm ready for that to be. I was going to license the font before going live...

    If possible, I greatly prefer not to publicly post a link to my site for now. If anyone here is nice enough to help and needs to see the site to do so, please let me know and I'll PM (or e-mail) you the information to be able to do so...

    Thank you!
    Martin

  2. #2
    Join Date
    Jan 2007
    Location
    Davenport, Iowa
    Posts
    1,743
    Thanks
    82
    Thanked 90 Times in 88 Posts

    Default

    I am no expert in this area, but I might be able to point you in the right direction. If anyone else is more knowledgeable in this area please feel free to jump in.

    Read this: http://www.fontspring.com/blog/fixing-ie9-font-face-problems

    What is src: local(smiley face symbol shows up in my browser),?

    What is the rest of the css you are using to display the styled text?

    I couldn't get the safari browser to connect to the internet on my computer for some reason. Here is an example I tried that worked for me:

    Code:
    <style type="text/css">
    @font-face {
    font-family: 'cool font';
    src: url('../angelicwar-webfont.ttf');
    src: url('../angelicwar-webfont.eot');
    src: local('cool font'), url('../angelicwar-webfont.ttf');
    }
    p.custom_font{
    font-family: 'cool font';
    font-size:52px;
    }
    </style>
    <p class='custom_font'>jgahskd</p>
    Last edited by james438; 08-24-2013 at 10:19 PM.
    To choose the lesser of two evils is still to choose evil. My personal site

  3. #3
    Join Date
    Aug 2013
    Posts
    20
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    James, thanks. I'll take a look through this better later on.

    In the meantime, the smiley face is added to tell the computer to reject a local font and load the one connected with the @font-face. This was something I found online that I believe Paul Irish came up with, though I don't want to mis-attribute...

    Before I read through the link re IE9 font face problems, I do have my code set to make IE9 and IE10 render as IE8. Does the info in the linked article still apply in my case then?

  4. #4
    Join Date
    Jan 2007
    Location
    Davenport, Iowa
    Posts
    1,743
    Thanks
    82
    Thanked 90 Times in 88 Posts

    Default

    It should still apply although the link deals with font-face problems in IE6-IE9. I do not have much access to IE9 or IE10, so I can't really test it out unfortunately. Please let me know how things come along.
    To choose the lesser of two evils is still to choose evil. My personal site

  5. #5
    Join Date
    Aug 2013
    Posts
    20
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    I will - I appreciate the help! I have had zero experience in any of this before diving in head first to design a site for an (unrelated) business I've been putting together. I'm fussy in that I want things to look a certain way, so it's important to me to get the @font-face working...

  6. #6
    Join Date
    Jan 2007
    Location
    Davenport, Iowa
    Posts
    1,743
    Thanks
    82
    Thanked 90 Times in 88 Posts

    Default

    When I was working with @font-face I found documentation on this was hard to find, so I can understand the frustration.

    I want to add that last I checked @font-face and font manipulation in general is not an option at this time for browsers in mobile devices. I suspect that as browser technology in mobile devices improves this will become available. In my case what I ended up doing was using a png image of the font character I needed. By mobile devices I am talking about phones, ipads, etc.

    EDIT: Be sure to test this in IE10. I remember having specific problems with that version of IE, but I was able to get it to work when I finally got a hold of a laptop with IE10 on it.
    Last edited by james438; 08-25-2013 at 07:18 PM.
    To choose the lesser of two evils is still to choose evil. My personal site

Similar Threads

  1. Omnislide menu: can't get "mailto" to work in "menuItems.js" file
    By paulzab in forum Dynamic Drive scripts help
    Replies: 2
    Last Post: 01-28-2012, 04:37 AM
  2. @font-face does not work in firefox
    By James Church in forum CSS
    Replies: 1
    Last Post: 05-25-2011, 11:07 AM
  3. Replies: 0
    Last Post: 04-11-2009, 09:48 AM
  4. Replies: 1
    Last Post: 02-27-2009, 07:17 AM
  5. How can I insert "Live Date Script IE" into PHPNUKE?
    By JoAnne ~ in forum Dynamic Drive scripts help
    Replies: 0
    Last Post: 02-09-2005, 02:55 AM

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •