Какие расширения шрифтов вы действительно используете?

Question

Я вижу во многих проектах, что люди используют все расширения шрифтов, такие как .TTF, .WOFF, .WOFF2. Однако это приводит к тому, что множество файлов попадают в один источник, представьте, если у меня есть несколько источников разных типов?

Я использую только .WOFF2, но я заметил, что в INTERNET EXPLORER и в браузерах телевизоров, таких как LG, источник не работает.

Answer 1

Я бы использовал woff2 и woff для включения старых браузеров:

Chrome  Safari  Firefox Opera   IE  Android iOS
5+      5.1+    3.6+    11.50+  9+  4.4+    5.1+

Совет! При создании правил @ font-face - используйте один и тот же FontFamilyName для всех весов. Это облегчает работу с вариациями в вашем CSS

@font-face {
  font-family: 'FontFamilyName';
  src:  url('../fonts/FontFileName.woff2') format('woff2'),
        url('../fonts/FontFileName.woff') format('woff');
  font-weight: 400;
}

@font-face {
  font-family: 'FontFamilyName';
  src:  url('../fonts/FontFileName-Bold.woff2') format('woff2'),
        url('../fonts/FontFileName-Bold.woff') format('woff');
  font-weight: 700;
}

Убедитесь, что вы добавили запасной вариант (стек шрифтов) для поддержки браузеров, которые либо не поддерживают woff, либо вообще не поддерживают веб-шрифты (я не уверен, что LG поддерживает)

h1 { font: 700 2rem 'FontFamilyName', sans-serif; }
p  { font: 400 1rem 'FontFamilyName', sans-serif; }
strong { font-weight: 700; }