Подключение шрифтов к сайту. font-face
HTML-код
- Опубликовано: 17 июл 2020
- Привет!
Подключение шрифтов правильно - это достаточно важная и актуальная тема, потому что многие не знают, как работает font-face, как правильно указывать в нем значения и потом, в верстке, использовать шрифт. Это видео как раз про нюансы использования font-face и шрифтов.
clck.ru/PhXeT - исходники видео на GitHub
webfonts.pro/ - отсюда можно скачать шрифты
fonts.google.com/ - гугл-шрифты
www.fontsquirrel.com/tools/we... - конвертер шрифтов
onlinefontconverter.com/ - конвертер шрифтов
developer.mozilla.org/en-US/d... - про font-weight
Меня зовут Максим Васянович. Фрилансер уже 5 лет, создал более 50 коммерческих сайтов. Преподаватель в онлайн-университете Skillbox, автор курса Веб-верстка.
Понравилось? clck.ru/Gr9Ec
Моя страница вконтакте: maxdenaro
Мой блог: blog.maxgraph.ru
Мой сайт: maxgraph.ru
Канал в телеграм: teleg.run/maxgraph
Чат для верстальщиков: teleg.run/maxgraph_chat
#обучение #шрифты #верстка
Если кто-то после знакомство с вашим каналом не умеет верстать - он безнадежен! Вы просто клад!
Спасибо))
Очень полезный урок. Большое спасибо!
Замечательное видео, чётко, понятно, просто, эргономично, а также годные советы! Всё реализовал в проекте, спасибо!
Здорово, пожалуйста)
Так сказать моё почтение!) , искал на трех источниках, и не понял ничего , после твоего видео всё заработало, прими мои скромные лайк и подписку!
Спасибо огромное за подробное объяснение!
Макс, спасибо за твой контент! Привет со Skillbox))
Пожалуйста))
Как нынче мамонтам на Skillbox учится?)))
очень приятный голос, комфортная подача материала, Спасибо
спасибо)
Кратко чётко и понятно, спасибо большое
Пожалуйста)
Спасибо, помогли вспомнить как это делается)
Пожалуйста)
Большое спасибо за информацию.
Пожалуйста)
Очередной годный контент) Лайк!
ПиСи: когда указываем путь к шрифту, то перед fonts нужно ставить ../ ведь нужно сначала выйти с папки стилей и потом уже перейти в папку со шрифтами. Сам постоянно такую ошибку допускаю)
ну тут всегда зависит от размещения шрифтов) но да, верно.
Как-нибудь еще сделаю видео по определению этих всех путей
Спасибо! По поводу .woff, .woff2, это правило действует только для браузеров или для мобильных приложений, собранных на реакте, тоже?
Не уверен насчёт мобильных, но думаю да
Огромное спасибо! Разобралась.
Пожалуйста)
Спасииииибо! быстро и доступно!
Пожалуйста)
Спасибо! Подскажите, можно ли с google fonts скачать шрифт в формате woff? Если нет, то где его взять? В поисковиках много ссылок, но хотелось узнать про "официальный" вариант.
Можно конвертировать) онлайн конвертеров много
Лайк не глядя
Спасибо большое за видео!
Подскажите, пожалуйста, а где логичнее размещать @font-face, если верстаешь с SASS? В _base?
Здравствуйте, да, можно так
@@maxgraph спасибо большое за ответ!!!
Спасибо за полезную информацию. У меня два вопроса. 1. Если у body указан font-weight:400, надо ли у тега писать опять font-weight:400? 2. Имеет ли значение, какие писать кавычки в url( ); одинарные или двойные?
Нет, необязательно
Кавычки тоже необязательны
@@maxgraph
@@maxgraph Спасибо
Спасибо, помог :)
Пожалуйста)
Спасибо за видео, очень доступно. Возник вопрос. Нужно ли для "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 спасибо)
Подключаю два шрифта для проекта, какой будет , где подключаться?
Где какой вызовешь)
Здравствуйте. Можете подсказать, а пиксельные и прочие шрифты можно поставить? Что не пробовал, не работает.
Если сможете, то можете объяснить как их ставить. Заранее спасибо!
Здравствуйте. Что есть "пиксельные шрифты"?
По поводу preload не было сказано, я использую обычно
Уже после выкладки вспомнил про него( Добавлю наверное отдельным видео :) спасибо!
@@maxgraph вам спасибо за контент)
видео круть !
п.с. если хотите сказать спасибо автору
пишите комменты длиннее 7 слов
и лайкате чужие комменты !
тогда ютубчик продвинет в алгоритмах
Класссс
Добрый день Максим.
Хотел спросить совета. У меня не одно, а два семейства шрифтов Raleway и Lato. Все сделал как нужно, но получается что шрифты включаются когда я убираю галочку в девтулс на названии семйства шрифта (там где свойства, заголовка например).
И второй вот вопрос, нужно ли их в head подключать?
Помоги ничего не могу сделать. Не получается и все.
Спасибо 🤝
Добрый день.
Пока не очень понял проблему, надо бы посмотреть
Насчёт head - это про прелоад?
@@maxgraph получается так. Шрифты скачаны, подключены в css. Также они подключены через link (тоже с путями на папку где шрифты лежат) и прописан и кроссориджин и прелоад и все что нужно.
Я прописываю свойство в css заголовку font-family: Raleway; , но шрифт не меняется. Когда открываю девтулс, то слева по щелчку на заголовок открываются его свойства css. И соответственно я вижу что прописано семейство этого шрифта.
Когда в девтулс отключаю это свойство(путём снятия галочки) то шрифт срабатывает (получается срабатывает когда я отключаю его). Не пойму почему.
Пришли код в телегу, так сложно разобраться)
@@maxgraph а как канал называется.можешь ссылку кинуть?
@@maxgraph прислал фотки кода. Там в принципе все видно!
от души, мой лайк 666-ой
У мну шрифт ника не может правильно отразиться. Axiforma называется. Подключается - с этим все норм. но вот отражается не так. Может ли быть дело в live serverе в wscode?
Я уже конвертил его на спец сайтах и как только с ним не потанцевал. В Винде отображается, в демке конвертора тож правильно отображается. Но вот на моем проекте - никак( help
Возможно кириллица не поддерживается
@@maxgraph Самим шрифтом поддерживается и сравниваю с отображением в фигме - там на кирил написано, и при установке ttf на desktop глифы правильные...
Спасибо. Правильно понял, что можно скачать и подключить только font-weight 400, браузер сам нарисует любую жирность для данного шрифта? Но тогда зачем в скачанном файле всегда имеются шрифты жирностью 300-900, если они сами рисуются браузером?
То что нарисует браузер, будет отличаться от макета, если вы например подключите шрифт с толщиной 400, а будете использовать с толщиной 700
@@maxgraph ясно, спасибо большое.
А если их(шрифты) скачать, а потом подключать, то норм?
Ну я про это же и рассказывал) или мы о разном подумали?
@@maxgraph и не важно, что это за шрифты будут. Чтобы не появилось предвзятое отношение к шрифтам гугл или любых других.
Предвзятого отношения нет :) Но внешние шрифты, с внешних ресурсов - не очень хорошо.
в фонт-фейс нужно указывать тип шрифта чтобы браузер не скачивал все файлы подряд, а только тот тип, который может обработать
Все супер, но делай звук погромче пожалуйста. Смотрю в свободное время в транспорте в наушниках и очень плохо слышно голос
Я ставил громкость среднюю по рекомендациям знающих в этом людей. Громче будет эхо, увы(
MaxGraph - cайты как страсть Принято:)
еще бы видео по подключению шрифтовых иконок
Ну, в целом это можно. Но вообще я не вижу им применения, в современной разработке мало кто использует :)
@@maxgraph а что используют вместо них?
svg) и во по нему как раз будет видео.
@@maxgraph ждем )
@@kerusdc8322 ruclips.net/video/dPoRsolsCjA/видео.html
На данный момент самый годный гайд) Пока Макс не снял своё видео)
Сам только пару дней назад по нему ПОНЯЛ что и как)
Не за что)
а у меня напротив , в woff2 размер больше , нежели просто в woff
Странно)