Подключение шрифтов к сайту. font-face

Просмотров 22 тыс.

% 738

Привет!
Подключение шрифтов правильно - это достаточно важная и актуальная тема, потому что многие не знают, как работает font-face, как правильно указывать в нем значения и потом, в верстке, использовать шрифт. Это видео как раз про нюансы использования font-face и шрифтов.
clck.ru/PhXeT - исходники видео на GitHub
webfonts.pro/ - отсюда можно скачать шрифты
fonts.google.com/ - гугл-шрифты
www.fontsquirrel.com/tools/webfont-generator - конвертер шрифтов
onlinefontconverter.com/ - конвертер шрифтов
developer.mozilla.org/en-US/docs/Web/CSS/font-weight - про font-weight
Меня зовут Максим Васянович. Фрилансер уже 5 лет, создал более 50 коммерческих сайтов. Преподаватель в онлайн-университете Skillbox, автор курса Веб-верстка.
Понравилось? clck.ru/Gr9Ec
Моя страница вконтакте: maxdenaro
Мой блог: blog.maxgraph.ru
Мой сайт: maxgraph.ru
Канал в телеграм: teleg.run/maxgraph
Чат для верстальщиков: teleg.run/maxgraph_chat
#обучение #шрифты #верстка

Опубликовано:

18 июл 2020

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 81

@vollex_frontend 2 года назад

Если кто-то после знакомство с вашим каналом не умеет верстать - он безнадежен! Вы просто клад!

@maxgraph 2 года назад

Спасибо))

@vladfolk2418 2 года назад

Замечательное видео, чётко, понятно, просто, эргономично, а также годные советы! Всё реализовал в проекте, спасибо!

@maxgraph 2 года назад

Здорово, пожалуйста)

@useruseroff6605 7 месяцев назад

Спасибо огромное за подробное объяснение!

@Maratreason 11 месяцев назад

Очень полезный урок. Большое спасибо!

@doppel864 3 года назад

Так сказать моё почтение!) , искал на трех источниках, и не понял ничего , после твоего видео всё заработало, прими мои скромные лайк и подписку!

@timur_riskulbekov 2 года назад

Кратко чётко и понятно, спасибо большое

@maxgraph 2 года назад

Пожалуйста)

@OOOOOOOOOOOOOOOOOOOOOO333 Год назад

очень приятный голос, комфортная подача материала, Спасибо

@maxgraph Год назад

спасибо)

@evgenyvasilchuk1909 3 года назад

Макс, спасибо за твой контент! Привет со Skillbox))

@maxgraph 3 года назад

Пожалуйста))

@user-ii9sw3ym8i 2 года назад

Как нынче мамонтам на Skillbox учится?)))

@marynakorkishko8408 3 года назад

Спасииииибо! быстро и доступно!

@maxgraph 3 года назад

Пожалуйста)

@user-pm4hx1bd4n 2 года назад

Большое спасибо за информацию.

@maxgraph 2 года назад

Пожалуйста)

@AndCheb Год назад

Спасибо!

@user-sl5jd7zj5o 2 года назад

Спасибо, помогли вспомнить как это делается)

@maxgraph 2 года назад

Пожалуйста)

@user-zw7pq2pf5k 2 года назад

Огромное спасибо! Разобралась.

@maxgraph 2 года назад

Пожалуйста)

@user-ec5us2tg6g 3 года назад

Лайк не глядя

@tonit2237 3 года назад

Очередной годный контент) Лайк! ПиСи: когда указываем путь к шрифту, то перед fonts нужно ставить ../ ведь нужно сначала выйти с папки стилей и потом уже перейти в папку со шрифтами. Сам постоянно такую ошибку допускаю)

@maxgraph 3 года назад

ну тут всегда зависит от размещения шрифтов) но да, верно. Как-нибудь еще сделаю видео по определению этих всех путей

@netvoegoumadelo Год назад

Класссс

@ghoust4619 Год назад

Спасибо, помог :)

@maxgraph Год назад

Пожалуйста)

@lisofsky8151 3 года назад

видео круть ! п.с. если хотите сказать спасибо автору пишите комменты длиннее 7 слов и лайкате чужие комменты ! тогда ютубчик продвинет в алгоритмах

@TamaraNikolaevna Год назад

Спасибо за полезную информацию. У меня два вопроса. 1. Если у body указан font-weight:400, надо ли у тега писать опять font-weight:400? 2. Имеет ли значение, какие писать кавычки в url( ); одинарные или двойные?

@maxgraph Год назад

Нет, необязательно Кавычки тоже необязательны

@TamaraNikolaevna Год назад

@@maxgraph

@TamaraNikolaevna Год назад

@@maxgraph Спасибо

@yura_8952 3 года назад

Спасибо! По поводу .woff, .woff2, это правило действует только для браузеров или для мобильных приложений, собранных на реакте, тоже?

@maxgraph 3 года назад

Не уверен насчёт мобильных, но думаю да

@alexnov4367 2 года назад

Спасибо! Подскажите, можно ли с google fonts скачать шрифт в формате woff? Если нет, то где его взять? В поисковиках много ссылок, но хотелось узнать про "официальный" вариант.

@maxgraph 2 года назад

Можно конвертировать) онлайн конвертеров много

@etherium-gold 11 месяцев назад

от души, мой лайк 666-ой

@alenache1 3 года назад

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

@user-zg2fl7hg2r 2 года назад

Спасибо большое за видео! Подскажите, пожалуйста, а где логичнее размещать @font-face, если верстаешь с SASS? В _base?

@maxgraph 2 года назад

Здравствуйте, да, можно так

@user-zg2fl7hg2r 2 года назад

@@maxgraph спасибо большое за ответ!!!

@MarkoTH000 2 года назад

Спасибо за видео, очень доступно. Возник вопрос. Нужно ли для "src" указывать "local" и для "url" указывать "format". Например: @font-face { font-family: 'Roboto'; *src: local('Roboto'), local('Roboto-Regular'),* url('../fonts/Roboto-Regular.woff2') *format('woff2'),* url('../fonts/Roboto-Regular.woff') *format('woff');* font-weight: normal; font-style: normal; font-display: swap; }

@maxgraph 2 года назад

Да, будет не лишним)

@MarkoTH000 2 года назад

@@maxgraph спасибо)

@loptomp 2 года назад

Здравствуйте. Можете подсказать, а пиксельные и прочие шрифты можно поставить? Что не пробовал, не работает. Если сможете, то можете объяснить как их ставить. Заранее спасибо!

@maxgraph 2 года назад

Здравствуйте. Что есть "пиксельные шрифты"?

@user-kl6be1qp3g 3 года назад

Подключаю два шрифта для проекта, какой будет , где подключаться?

@maxgraph 3 года назад

Где какой вызовешь)

@user-tp3vf7wt7x 2 года назад

У мну шрифт ника не может правильно отразиться. Axiforma называется. Подключается - с этим все норм. но вот отражается не так. Может ли быть дело в live serverе в wscode? Я уже конвертил его на спец сайтах и как только с ним не потанцевал. В Винде отображается, в демке конвертора тож правильно отображается. Но вот на моем проекте - никак( help

@maxgraph 2 года назад

Возможно кириллица не поддерживается

@user-tp3vf7wt7x 2 года назад

@@maxgraph Самим шрифтом поддерживается и сравниваю с отображением в фигме - там на кирил написано, и при установке ttf на desktop глифы правильные...

@asgard1428 2 года назад

Добрый день Максим. Хотел спросить совета. У меня не одно, а два семейства шрифтов Raleway и Lato. Все сделал как нужно, но получается что шрифты включаются когда я убираю галочку в девтулс на названии семйства шрифта (там где свойства, заголовка например). И второй вот вопрос, нужно ли их в head подключать? Помоги ничего не могу сделать. Не получается и все. Спасибо 🤝

@maxgraph 2 года назад

Добрый день. Пока не очень понял проблему, надо бы посмотреть Насчёт head - это про прелоад?

@asgard1428 2 года назад

@@maxgraph получается так. Шрифты скачаны, подключены в css. Также они подключены через link (тоже с путями на папку где шрифты лежат) и прописан и кроссориджин и прелоад и все что нужно. Я прописываю свойство в css заголовку font-family: Raleway; , но шрифт не меняется. Когда открываю девтулс, то слева по щелчку на заголовок открываются его свойства css. И соответственно я вижу что прописано семейство этого шрифта. Когда в девтулс отключаю это свойство(путём снятия галочки) то шрифт срабатывает (получается срабатывает когда я отключаю его). Не пойму почему.

@maxgraph 2 года назад

Пришли код в телегу, так сложно разобраться)

@asgard1428 2 года назад

@@maxgraph а как канал называется.можешь ссылку кинуть?

@asgard1428 2 года назад

@@maxgraph прислал фотки кода. Там в принципе все видно!

@en_kratia Год назад

Спасибо. Правильно понял, что можно скачать и подключить только font-weight 400, браузер сам нарисует любую жирность для данного шрифта? Но тогда зачем в скачанном файле всегда имеются шрифты жирностью 300-900, если они сами рисуются браузером?

@maxgraph Год назад

То что нарисует браузер, будет отличаться от макета, если вы например подключите шрифт с толщиной 400, а будете использовать с толщиной 700

@en_kratia Год назад

@@maxgraph ясно, спасибо большое.

@dimad1325 3 года назад

По поводу preload не было сказано, я использую обычно

@maxgraph 3 года назад

Уже после выкладки вспомнил про него( Добавлю наверное отдельным видео :) спасибо!

@dimad1325 3 года назад

@@maxgraph вам спасибо за контент)

@user-dn4mc6nq8t 3 года назад

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

@maxgraph 3 года назад

Я ставил громкость среднюю по рекомендациям знающих в этом людей. Громче будет эхо, увы(

@user-dn4mc6nq8t 3 года назад

MaxGraph - cайты как страсть Принято:)

@kerusdc8322 3 года назад

еще бы видео по подключению шрифтовых иконок

@maxgraph 3 года назад

Ну, в целом это можно. Но вообще я не вижу им применения, в современной разработке мало кто использует :)

@kerusdc8322 3 года назад

@@maxgraph а что используют вместо них?

@maxgraph 3 года назад

svg) и во по нему как раз будет видео.

@kerusdc8322 3 года назад

@@maxgraph ждем )

@tonit2237 3 года назад

@@kerusdc8322 ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-dPoRsolsCjA.html На данный момент самый годный гайд) Пока Макс не снял своё видео) Сам только пару дней назад по нему ПОНЯЛ что и как) Не за что)