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

css, font-face

Solution

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;
}

Problem

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 the `@font-face` three times for those three types. Please anybody help me. I have currently used the code like the following: ``` @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: normal; font-style: normal; } @font-face { font-family: 'Gotham'; src: url("/fonts/Gotham-Bold.eot"); } @font-face { font-family: 'Gotham'; src: url("/fonts/Gotham-Bold.woff") format("woff"); } ``` Thanks.

Original source