@font-face -- need some things cleared up

HTML & CSS
1

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:

[FONT=Courier New]/** 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;
}[/FONT]

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

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, [URL=“https://typekit.com/fonts/proxima-nova”]TypeKit also has a nice font you can use that’s very close to Gotham. It’s also worth checking FontDeck.

3

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

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…

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

never mind, found a free font, with @font-face kit and everything…

made it work – yay! I have a question though…

here’s entire CSS for this font:


[FONT=Courier New]@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;[/FONT]

}

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… :wink:

learned something new – yay!! :slight_smile:

thank you…

6

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:

[I]element[/I] {
  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:

and here are some recommended articles:
http://www.fontspring.com/support/installing_webfonts/style-linking
http://www.metaltoad.com/blog/how-use-font-face-avoid-faux-italic-and-bold-browser-styles