@font-face различные варианты одного шрифта?

Question

[Shillkas11]

Привет. На сайте используется несколько вариаций одного и того же шрифта:

@font-face {
	font-family: HelveticaRegular;
	src: url(/fonts/Helvetica/HelveticaRegular.ttf);
}
@font-face {
	font-family: HelveticaLight;
	src: url(/fonts/Helvetica/HelveticaLight.ttf);
}
@font-face {
	font-family: HelveticaBold;
	src: url(/fonts/Helvetica/HelveticaBold.ttf);
}

Сейчас думаю грузить только `HelveticaRegular` и регулировать различные вариации с помощью CSS свойств, но проблема в том что по всему сайту font-family используется в различных вариациях, и в каждом отдельном CSS правиле редактировать это совсем не хочется. Можно ли задать css свойства для шрифта уже при подключении в font-face, т.е. исходя из примера выше во всех трех font-face будет грузиться один и тот же шрифт HelveticaRegular.ttf, но для различных вариантов будет применяться определенные css свойства?

Answer 1

[Алексей Скляров]

У вас HelveticaRegular это шрифт Helvetica с 400 жирностью, то есть если вы подключите этот шрифт и поставите font-weight:700,то у шрифта все равно жирность не поменяется.

Вам нужно делать так:

@font-face {
  font-family: Helvetica;
  src: url(/fonts/Helvetica/HelveticaRegular.ttf);
  font-weight:400;
}
@font-face {
  font-family: Helvetica;
  src: url(/fonts/Helvetica/HelveticaLight.ttf);
  font-weight:300;
}
@font-face {
  font-family: Helvetica;
  src: url(/fonts/Helvetica/HelveticaBold.ttf);
  font-weight:700
}

Answer 2

[Александр Присяжнюк]

Вот так вам нужно подключать шрифты:

@font-face {
  font-family: Helvetica;
  src: url(/fonts/Helvetica/HelveticaRegular.woff2) format("woff2");
  src: url(/fonts/Helvetica/HelveticaRegular.woff) format("woff");
  font-style: normal; 
  font-weight: 400;
}
@font-face {
  font-family: Helvetica;
  src: url(/fonts/Helvetica/HelveticaLight.woff2) format("woff2");
  src: url(/fonts/Helvetica/HelveticaLight.woff) format("woff");
  font-style: normal; 
  font-weight: 300;
}
@font-face {
  font-family: Helvetica;
  src: url(/fonts/Helvetica/HelveticaBold.woff2) format("woff2");
  src: url(/fonts/Helvetica/HelveticaBold.woff) format("woff");
  font-style: normal; 
  font-weight: 700;
}

1. Нужно конвертировать из .ttf в веб формат .woff2 и .woff. Сделать это можно здесь:
https://www.fontsquirrel.com/tools/webfont-generator
2. Подключать шрифты нужно вот так:

.block {
  font-family: 'Helvetica', Arial, sans-serif; 
  font-weight: 400; // для regular, 300 для light и 700 для bold
}

3. Не рекомендую оставлять только одну толщину шрифта, вы так хотите сэкономить. НО дизайнеры которые делают шрифты вырисовывают каждое начертание идеально. А если просто в css менять жирность шрифта, выглядеть будет немного по-другому. Слишком это хрупко. Потому делайте так как я описал выше.