Все ли правильно с подключением шрифтов?

Question

[Danya Wyse]

1. Ищем шрифт

Например
https://fonts.google.com

2. Конвертируем файл шрифта во все форматы для кроссбраузерной поддержки

Я использовал
https://transfonter.org

3. Заливаем на свой проект файлы шрифта в папку font, файл stylesheet.css я переименовал в stylesheet.scss и импортировал его в main.scss
4. Изменяем пути шрифтов таким образом чтобы были видимы на сайте

Подскажите в чем неправ, где и что можно улучшить?

Comments

[iBird Rose]

ну я бы еще src: local() добавил https://developer.mozilla.org/ru/docs/Web/CSS/@fon...

[Ankhena]

Современным браузерам достаточно woff2, предыдущему поколению woff
Всё остальное уже очень давно можно отправлять в помойку.

С local осторожно. Если у пользователя по какой-то причине установлен кривой шрифт, то ему будет не очень.

[Danya Wyse]

Ankhena, ну вообще, не будет лишним оставить старые форматы? Вдруг все таки придется с какими нибудь "дедами" работать?

[Ankhena]

Danya Wyse, я не знаю, что у вас в ТЗ. Именно им определяются деды.
eot это, кажется 9-ый ИЕ. В нем даже флексы как-то работали.
А не, 8ой. Ну-ну.. привет там клиенту, которому нужен 8ИЕ.

[Danya Wyse]

Ankhena, я пока что учусь, и хочу все делать правильно

[Ankhena]

Danya Wyse, это вы молодец :)

[Danya Wyse]

Ankhena, в любом случае, спасибо за фидбек )

[SagePtr]

Danya Wyse, если старинные браузеры вместо красивого шрифта будут отображать стандартный - невелика проблема. Скорее всего, 95% сайтов в таких браузерах и так разваливаются и отображаются криво независимо от шрифтов.

[Одиночка Айс]

Если вы нашли шрифт на гугл.фонтс, на кой черт его конвертировать и ставить на сервер?

[Сергей delphinpro]

Danya Wyse,

ну вообще, не будет лишним оставить старые форматы?

Лишним не будет. Но и смысла в современных реалиях нет.

Answer 1

[Михаил Р.]

За картинки вместо кода - ремня.

По вопросу:
0. Где ошибки из консоли, или надо гадать?
1. Два src, одного хватит.
2. Слишком много ; хватит одного, в самом конце.
3. Загрузка шрифта идет с верху в низ (замечал, что часто woff2 игнорится, если первым указан woff), соответственно woff2 > woff (ttf и eot по вкусу, для старья).

Пример:

@font-face {
  font-family: name_font;
  font-style: normal;
  font-weight: normal;
  src:
    local("name_font"),
    local("name-font"),
    local("name font"),
    url("path_name_font/name_font.woff2") format("woff2"),
    url("path_name_font/name_font.woff") format("woff");
}

Comments

[Danya Wyse]

Ошибок никаких нет в консоли

[Михаил Р.]

Danya Wyse, вижу, что Вы используете sass, соотвественно, при сборке с лишними ; и }, препроцессор должен выдать Вам примерно следующего рода ошибку:

url("path_name_font/name_font.woff2") format("woff");
                                                    ^
Expected "{".

51 │ url("path_name_font/name_font.woff2") format("woff");
                                                         ^

[Danya Wyse]

Михаил Р., ошибок нет, все работает и в консоле нет ошибок