www.webdeveloper.com
Results 1 to 7 of 7

Thread: Custom embedded font?

  1. #1
    Join Date
    Apr 2011
    Location
    Seattle, WA
    Posts
    264

    Exclamation Custom embedded font?

    Ok, so I've got this pretty little ditty:

    HTML Code:
    <style type="text/css">
    @fontface{
    	font-family: Derringer;
    	src: url('img/font/derringer.TTF');
    }
    body {
    	font: Derringer, Arial, Helvetica, sans-serif;
    	/* ETC */
    }
    </style>
    But it doesn't work outside of my computer which is rediculously odd because the font-file is on the web-server.

    I don't know what to do or how to fix it -- I have no idea what I'm doing wrong. Any ideas?

  2. #2
    Join Date
    Aug 2010
    Location
    San Diego
    Posts
    242
    First of all, it may work on your computer because that font is installed on your computer. Some things to try:

    Try putting the font name in quotes:
    Code:
    font-family: 'Derringer';
    Double check that the path to the font file is correct in relation to the file referencing it.

    And you need different kinds of fonts for different browsers, this info from the font squirrel site:

    • TrueType Fonts for Firefox 3.5+ , Opera 10+, Safari 3.1+, Chrome 4.0.249.4+
    • EOT fonts for Internet Explorer 4+
    • WOFF fonts for Firefox 3.6+, Internet Explorer 9+, Chrome 5+
    • SVG fonts for iPad and iPhone
    Here's the format I've been using that works for me (which is suggested by Font Squirrel where I've been getting fonts):
    Code:
    @font-face {
        font-family: 'ArmWrestlerBold';
        src: url('../fonts/ArmWrestler-webfont.eot');
        src: url('../fonts/ArmWrestler-webfont.eot?#iefix') format('embedded-opentype'),
             url('../fonts/ArmWrestler-webfont.woff') format('woff'),
             url('../fonts/ArmWrestler-webfont.ttf') format('truetype'),
             url('../fonts/ArmWrestler-webfont.svg#ArmWrestlerBold') format('svg');
        font-weight: normal;
        font-style: normal;
    }
    Last edited by handcraftedweb; 03-20-2012 at 04:36 PM.

  3. #3
    Join Date
    Apr 2011
    Location
    Seattle, WA
    Posts
    264
    (Trying it)

  4. #4
    Join Date
    Apr 2011
    Location
    Seattle, WA
    Posts
    264
    Not working.

    HTML Code:
    <style type="text/css">
    @fontface{
    	font-family: 'Derringer';
    	src: url('img/font/derringer.eot') format('embedded-opentype'); /* IE */  
    	src: url('img/font/derringer.TTF') format("truetype"); /* non-IE */  
    }
    </style>

  5. #5
    Join Date
    Sep 2008
    Location
    Dallas
    Posts
    154
    This is what I've used here: www.launchagency.com

    @font-face {
    font-family: "MyFutura";
    src: url("../fonts/Futura/FuturaStd-Book.otf");
    }

    html, body {
    font-family: "MyFutura", Arial, Helvetica, sans-serif;
    font-size: 14px;
    padding: 0;
    margin: 0;
    width: 100&#37;;
    height: 100%;
    background: #ffffff;
    }

    Maybe because you're missing the quotations around your custom font? I don't know, really, but mine works fine.

  6. #6
    Join Date
    Sep 2006
    Location
    new york
    Posts
    265

    #font-face

    Should be @font-face

    See for instance http://nicewebtype.com/notes/2009/10...css-font-face/

  7. #7
    Join Date
    Mar 2011
    Posts
    1,134
    Make sure that the font file that's referenced in your CSS code as 'derringer.TTF' is using that exact file name on the server. If the file on the server is actually named 'derringer.ttf', then the server will return a 'Not Found' error. This kind of thing often happens when you test your code on a Windows-based computer, but the website is hosted on a computer running Unix or Linux based system where the file names are case-sensitive. The fix for this, of course, is to make sure that the stylesheet reference matches the actual file name. Good luck!
    Rick Trethewey
    Rainbo Design

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles