SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Guru
    Join Date
    Jun 2009
    Posts
    825
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)

    @font-face -- need some things cleared up...

    so the client sends me this font:
    http://mayacove.com/dev/gotham.gif
    (screenshot of font file structure..)

    I put all these fonts in a dir called "fonts" at the root of my site...

    now the font came with a css stylesheet, thus:

    Code:
    /** Generated by FG **/
    @font-face {
    	font-family: 'Conv_GothamRnd-Light';
    	src: url('fonts/GothamRnd-Light.eot');
    	src: local('☺'), url('fonts/GothamRnd-Light.woff') format('woff'), url('fonts/GothamRnd-Light.ttf') format('truetype'), url('fonts/GothamRnd-Light.svg') format('svg');
    	font-weight: normal;
    	font-style: normal;
    }

    but I don't see any fonts in "Gotham" font dir with extensions like .woff, .ttf, .eot, .svg etc...
    (and what are all those fonts inside "Gotham HTF" dir? they don't have extensions...)

    I did put this CSS in my stylesheet, but it's not working.. does this go at the top of the stylesheet? like a reset?

    have never done this web font stuff.. need some clarification....

    thank you.....

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,319
    Mentioned
    462 Post(s)
    Tagged
    8 Thread(s)
    Hm, fonts optimized for the web are different from fonts on your computer. From what I read here, Gotham is not officially allowed to be used as a web font. In such circumstances, often the best thing to do is find a similar font that is allowed to be used on the web. A great place to get free font kits is FontQuirrel, but as pointed out in the link, TypeKit also has a nice font you can use that's very close to Gotham. It's also worth checking FontDeck.

  3. #3
    SitePoint Guru
    Join Date
    Jun 2009
    Posts
    825
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    thank you for your response...

    ok, I wrote to the client.. what if she responds she does have rights to the font?

    how do I make it work? (since, as mentioned in my OP, there are no fonts with the extensions mentioned in css that comes with the font...)

    but will look at FontQuirrel like you mentioned... hopefully I can find something.. I have never used @font-face and either way want to learn how to make this work...

    thank you...

  4. #4
    SitePoint Guru
    Join Date
    Jun 2009
    Posts
    825
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    can't find free fonts...

    here http://www.fontsquirrel.com/

    any font you click on, after you hit "download" there's a price next to it..

    same thing here...

    https://www.fontspring.com/free

    after you click "view" then "download" for any font, there's a price next to it (and "add to cart") why do they list these fonts as FREE, then?????

    regardless of what happens with my client, I want to learn how to do webfonts with @font-face, I need to find a free font...

    thank you...

  5. #5
    SitePoint Guru
    Join Date
    Jun 2009
    Posts
    825
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    never mind, found a free font, with @font-face kit and everything...
    http://www.fontsquirrel.com/fonts/PT-Sans

    made it work -- yay! I have a question though..

    here's entire CSS for this font:

    Code:
    @font-face {
        font-family: 'PTSansNarrowRegular';
        src: url('fonts/PTN57F-webfont.eot');
        src: url('fonts/PTN57F-webfont.eot?#iefix') format('embedded-opentype'),
             url('fonts/PTN57F-webfont.woff') format('woff'),
             url('fonts/PTN57F-webfont.ttf') format('truetype'),
             url('fonts/PTN57F-webfont.svg#PTSansNarrowRegular') format('svg');
        font-weight: normal;
        font-style: normal;
    
    }
    
    @font-face {
        font-family: 'PTSansCaptionBold';
        src: url('fonts/PTC75F-webfont.eot');
        src: url('fonts/PTC75F-webfont.eot?#iefix') format('embedded-opentype'),
             url('fonts/PTC75F-webfont.woff') format('woff'),
             url('fonts/PTC75F-webfont.ttf') format('truetype'),
             url('fonts/PTC75F-webfont.svg#PTSansCaptionBold') format('svg');
        font-weight: normal;
        font-style: normal;
    
    }
    
    @font-face {
        font-family: 'PTSansCaptionRegular';
        src: url('fonts/PTC55F-webfont.eot');
        src: url('fonts/PTC55F-webfont.eot?#iefix') format('embedded-opentype'),
             url('fonts/PTC55F-webfont.woff') format('woff'),
             url('fonts/PTC55F-webfont.ttf') format('truetype'),
             url('fonts/PTC55F-webfont.svg#PTSansCaptionRegular') format('svg');
        font-weight: normal;
        font-style: normal;
    
    }
    
    @font-face {
        font-family: 'PTSansBoldItalic';
        src: url('fonts/PTS76F-webfont.eot');
        src: url('fonts/PTS76F-webfont.eot?#iefix') format('embedded-opentype'),
             url('fonts/PTS76F-webfont.woff') format('woff'),
             url('fonts/PTS76F-webfont.ttf') format('truetype'),
             url('fonts/PTS76F-webfont.svg#PTSansBoldItalic') format('svg');
        font-weight: normal;
        font-style: normal;
    
    }
    
    @font-face {
        font-family: 'PTSansBold';
        src: url('fonts/PTS75F-webfont.eot');
        src: url('fonts/PTS75F-webfont.eot?#iefix') format('embedded-opentype'),
             url('fonts/PTS75F-webfont.woff') format('woff'),
             url('fonts/PTS75F-webfont.ttf') format('truetype'),
             url('fonts/PTS75F-webfont.svg#PTSansBold') format('svg');
        font-weight: normal;
        font-style: normal;
    
    }
    
    @font-face {
        font-family: 'PTSansItalic';
        src: url('fonts/PTS56F-webfont.eot');
        src: url('fonts/PTS56F-webfont.eot?#iefix') format('embedded-opentype'),
             url('fonts/PTS56F-webfont.woff') format('woff'),
             url('fonts/PTS56F-webfont.ttf') format('truetype'),
             url('fonts/PTS56F-webfont.svg#PTSansItalic') format('svg');
        font-weight: normal;
        font-style: normal;
    
    }
    
    @font-face {
        font-family: 'PTSansRegular';
        src: url('fonts/PTS55F-webfont.eot');
        src: url('fonts/PTS55F-webfont.eot?#iefix') format('embedded-opentype'),
             url('fonts/PTS55F-webfont.woff') format('woff'),
             url('fonts/PTS55F-webfont.ttf') format('truetype'),
             url('fonts/PTS55F-webfont.svg#PTSansRegular') format('svg');
        font-weight: normal;
        font-style: normal;
    
    }
    
    @font-face {
        font-family: 'PTSansNarrowBold';
        src: url('fonts/PTN77F-webfont.eot');
        src: url('fonts/PTN77F-webfont.eot?#iefix') format('embedded-opentype'),
             url('fonts/PTN77F-webfont.woff') format('woff'),
             url('fonts/PTN77F-webfont.ttf') format('truetype'),
             url('fonts/PTN77F-webfont.svg#PTSansNarrowBold') format('svg');
        font-weight: normal;
        font-style: normal;
    
    }
    so this is the one I'm using... PTSansCaptionRegular

    but if I have font-weight:bold rule, will that make it bold? or do I have to specify the "bold" font-family (PTSansBoldItalic)?

    can't tell if my headines are bold or just look bold b/c they're big... ;-)

    learned something new -- yay!! :-)

    thank you...

  6. #6
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,319
    Mentioned
    462 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by maya90 View Post
    if I have font-weight:bold rule, will that make it bold? or do I have to specify the "bold" font-family (PTSansBoldItalic)?
    Good question, and there are several answers. If you'd asked me this a few weeks ago, I'd have said your only option was to do this:

    Code:
    element {
      font-family: PTSansBold; 
      font-weight: normal;
    }
    So, in that scenario, you don't set the font to bold, but just call the bold version of the font. However, recently there were some threads here that made me see it all a different way:

    http://www.sitepoint.com/forums/show...87#post5160487
    http://www.sitepoint.com/forums/show...-Face-Question

    and here are some recommended articles:
    http://www.fontspring.com/support/in.../style-linking
    http://www.metaltoad.com/blog/how-us...browser-styles


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
  •