I have three font type -Gotham-bold, Gotham-medium, Gotham-thin, so do I need to use three times @font-face?

Question

Actually I have three files in the fonts folder. These are Gotham-Bold.ttf, Gotham-Medium.ttf, Gotham-Thin.ttf..... So do I need to use th

Answer 1

Yes, you need to declare each font-type as a separate @fontface. Each would be a different font-family in that case.

Like so:

@font-face {
  font-family: 'GothamThin';
  /* links to all gotham thin files, font-weight/style declaration */
}
@font-face {
  font-family: 'GothamMedium';
  /* links to all gotham medium files, font-weight/style declaration */
}
@font-face {
  font-family: 'GothamBold';
  /* links to all gotham bold files, font-weight/style declaration */
}

Only include the fonts you are using, though.. if you don't use Gotham Thin anywhere on the page, don't include it (for speed).

Answer 2

That is correct, you'll need an @font-face for each weight of the font you want to use.

@font-face {
  font-family: 'Gotham';
  src: url('fonts/Gotham-Bold.eot'); /* IE9 Compat Modes */
  src: url('fonts/Gotham-Bold.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
     url('fonts/Gotham-Bold.woff') format('woff'), /* Modern Browsers */
     url('fonts/Gotham-Bold.ttf')  format('truetype'), /* Safari, Android, iOS */
     url('fonts/Gotham-Bold.svg#svgFontName') format('svg'); /* Legacy iOS */
   font-weight: 700;
   font-style: normal;
 }

@font-face {
  font-family: 'Gotham';
  src: url('fonts/Gotham-Medium.eot'); /* IE9 Compat Modes */
  src: url('fonts/Gotham-Medium.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
     url('fonts/Gotham-Medium.woff') format('woff'), /* Modern Browsers */
     url('fonts/Gotham-Medium.ttf')  format('truetype'), /* Safari, Android, iOS */
     url('fonts/Gotham-Medium.svg#svgFontName') format('svg'); /* Legacy iOS */
   font-weight: 400;
   font-style: normal;
 }

@font-face {
  font-family: 'Gotham';
  src: url('fonts/Gotham-Thin.eot'); /* IE9 Compat Modes */
  src: url('fonts/Gotham-Thin.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
     url('fonts/Gotham-Thin.woff') format('woff'), /* Modern Browsers */
     url('fonts/Gotham-Thin.ttf')  format('truetype'), /* Safari, Android, iOS */
     url('fonts/Gotham-Thin.svg#svgFontName') format('svg'); /* Legacy iOS */
   font-weight: 300;
   font-style: normal;
 }

Then you can use your fonts as so:

body {
   font-family: 'Gotham';
}

// For normal
.normal {
  font-weight: 400;
}

// For bold
.bold,
strong {
  font-weight: 700;
}

// For thin
.light {
  font-weight: 300;
}