Font-face, Как подключить сразу несколько форматов для одного шрифта?

Question

[DeniSidorenko]

Привет
Есть стандартная структура

@font-face 
  font-family: 'NameFonts'
  src: url('../path/to/fonts.otf')

Однако тут я подключил только формат в otf, но для этого шрифта у меня есть и ttf, woff. Как подключить и те форматы(нужно для отображение в разных браузерах )

Comments

[Сергей delphinpro]

Зачем тег «Google web fonts»?
Этот сервис генерирует ссылку для подключения шрифта и сразу отдает нужные форматы.

Answer 1

[Сергей delphinpro]

Воспользуйтесь сервисами для генерации набора web-шрифтов.
Они же сгенерируют css для корректного подключения.

www.fontsquirrel.com/tools/webfont-generator
https://transfonter.org/

Рекомендую второй.

Comments

[Rheinmetall]

Соглашусь и добавлю в копилку https://fontie.pixelsvsbytes.com/webfont-generator

Answer 2

[zoozag]

@font-face {
  font-family: 'MyWebFont';
  src: url('webfont.eot'); /* IE9 Compat Modes */
  src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('webfont.woff2') format('woff2'), /* Super Modern Browsers */
       url('webfont.woff') format('woff'), /* Pretty Modern Browsers */
       url('webfont.ttf')  format('truetype'), /* Safari, Android, iOS */
       url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
}