www.webdeveloper.com
Results 1 to 4 of 4

Thread: Custom embedded font?

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

    Exclamation Custom embedded font?

    I have this:

    Code:
    @fontface{
    	font-family: 'Derringer';
    	src: url('img/font/derringer.eot') format('embedded-opentype'); /* IE */  
    	src: url('img/font/derringer.TTF') format("truetype"); /* non-IE */  
    }
    ... but it's not working. I'm the only one who seems to be able to see the "right" font and that's because the font is installed on my computer...

    What am I doing wrong?

  2. #2
    Join Date
    Mar 2011
    Posts
    1,133
    One of two things is causing the problem. Either the font files have not been uploaded to the server, or the directory paths to the font files in your stylesheet are incorrect or malformed. If the font files have been uploaded to the indicated directory, then change the URLs in the stylesheet to complete URLs, as in 'http://www.example.com/img/font/derringer.eot'. Good luck!
    Rick Trethewey
    Rainbo Design

  3. #3
    Join Date
    Aug 2010
    Location
    San Diego
    Posts
    242
    Post a link to the site so we can look.

  4. #4
    Join Date
    May 2005
    Location
    Gold Coast (MS)
    Posts
    2,207
    One of these might help:

    Embed Fonts:

    Fairly New: WOFF - TypeKit: http://typekit.com/ | Font Squirrel: http://www.fontsquirrel.com/

    1) @font-face Generator (Free Online Tool): http://www.fontsquirrel.com/fontface/generator
    ( HTML5Rocks has a good tutorial on using @font-face, along with a table showing current browser support: http://www.html5rocks.com/tutorials/webfonts/quick/ )
    How to Achieve Cross-Browser @font-face Support: http://blog.themeforest.net/tutorial...-face-support/
    2) Use sIFR:

    http://www.mikeindustries.com/blog/sifr/
    http://www.sitepoint.com/newsletter/...d=5&issue=58#6
    http://www.alistapart.com/articles/dynatext/
    3) Use WEFT (supported by IE only): http://www.microsoft.com/typography/...ft/default.htm
    4) Expand Your Font Palette Using CSS3: http://randsco.com/index.php/2009/07/04/p680

    5) CSS @ Ten: The Next Big Thing: http://www.alistapart.com/articles/cssatten
    6) CSS3 Embedding @font-face: http://www.zenelements.com/blog/css3-embed-font-face/
    7) Bulletproof @font-face syntax: http://paulirish.com/2009/bulletproo...tation-syntax/
    8) Cufon: http://cufon.shoqolate.com/generate/
    9) Use a text image in the font you want.

    10) Use Google Fonts: http://www.google.com/webfonts
    How To Use Google Fonts In Your Next Web Project & Why You Should: http://www.makeuseof.com/tag/google-fonts-web-project/

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