Тёмный

Google Fonts. Как подключить шрифты в 2024 году ? Переменные в шрифтах - Google Fonts. 

Web Skills
Подписаться 1,6 тыс.
Просмотров 4,4 тыс.
50% 1

Друзья я всех вас приветствую. Как вы знаете буквально на днях интерфейс - Google Fonts обновился, в связи с этим я решил записать видео, чтобы показать вам, как в новом интерфейсе выбрать необходимые шрифты и подключить их в свой проект. Также в данном видео я познакомлю вам с переменными в шрифтах - Google Fonts, рассмотрим что они нам дают и для чего нужны.
Если есть вопросы, пишите их в комментариях, с радостью на них ответим.
Также будем рады видеть вас в наших сообществах:
::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
Вконтакте: web__skills
Telegram канал: t.me/web_skills
::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
💻 Бесплатный курс по верстке сайтов: webcademy.ru/htmlsite/
::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::

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

 

19 янв 2024

Поделиться:

Ссылка:

Скачать:

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

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 54   
@DanDiablo
@DanDiablo 2 месяца назад
Благодарю! Несколько лет не заходил за шрифтами и сегодня прям потерялся в интерфейсе.
@Residentik
@Residentik 2 месяца назад
Был рад помочь. Надеюсь видео помогло вам разобраться что к чему.
@user-mx5zo7pz8p
@user-mx5zo7pz8p 2 месяца назад
Я очень благодарна вам за ваше знание, которое вы отдаете другим. Спасибо 😊
@Residentik
@Residentik 2 месяца назад
Был рад помочь 🙂👍
@mikhaildolgov
@mikhaildolgov 3 месяца назад
Спасибо за Ваш труд.
@Residentik
@Residentik 3 месяца назад
Был рад помочь, надеюсь данное видео было полезным для вас 🙂
@khayakhaya2953
@khayakhaya2953 3 месяца назад
Крутой канал у вас !!! Всегда максимально практично и чётко…. Спасибо большое
@Residentik
@Residentik 3 месяца назад
Спасибо большое, нам очень приятно, мы рады, что вам нравится наш канал 👍
@nk_77777
@nk_77777 2 месяца назад
Спасибо за видео!)
@Residentik
@Residentik 2 месяца назад
Был рад помочь.
@user-rw8wi3sq9e
@user-rw8wi3sq9e 3 месяца назад
Хороший урок, материал. Молодцы. 👍👍👍👍
@Residentik
@Residentik 3 месяца назад
Был рад помочь, надеюсь данное видео было полезным для вас 🙂
@userok319
@userok319 Месяц назад
Спасибо большое за разъяснение
@Residentik
@Residentik Месяц назад
Был рад помочь 🙂👍
@biscuitjerry8043
@biscuitjerry8043 3 месяца назад
уважение!!
@Residentik
@Residentik 3 месяца назад
Спасибо большое 🙂👍
@user-jj9pc3mn5z
@user-jj9pc3mn5z 3 месяца назад
Спасибо.
@Residentik
@Residentik 3 месяца назад
Был рад помочь, надеюсь данное видео было полезным для вас 🙂
@vladkolesnik8954
@vladkolesnik8954 3 месяца назад
Спасибо
@Residentik
@Residentik 3 месяца назад
Был рад помочь 👍
@SergMcl
@SergMcl 2 месяца назад
Спасибо. Внесли ясность. А то не мог понять, зачем все начертания тянуть, когда нужно всего два. Благо, легким гуглением нашел ваше видео. Variable, значит. Плюс готовые классы для tailwind. Прогресс не стоит на месте.
@Residentik
@Residentik 2 месяца назад
Приветствую вас. Я рад, что моё видео помогло вам разобраться в вопросе с google fonts =)
@nigalis7581
@nigalis7581 3 месяца назад
спасибо
@Residentik
@Residentik 3 месяца назад
Был рад помочь.
@user-hk2hh4zo1y
@user-hk2hh4zo1y 2 месяца назад
Спасибо за разъяснения, понадобились шрифты, чуть голову не сломал. Единственно не понял с переменными шрифтами где их по сути применять и какого их влияние на оптимизацию.
@Residentik
@Residentik 2 месяца назад
Приветствую вас 🙂👏 1) Был рад помочь. 2) Переменные шрифты хранят все вариации свойств шрифта в одном файле. В отличие от статических шрифтов, переменные шрифты предоставляют доступ ко всему диапазону ширины, толщины и других свойств. Преимущества переменных шрифтов: Повышение производительности за счёт уменьшения количества HTTP-запросов к файлам шрифтов и объёма данных, которые необходимо извлечь. Адаптивный дизайн: возможность настройки свойств шрифта в зависимости от размера экрана для улучшения читаемости.
@user-hm4qt7fe4c
@user-hm4qt7fe4c 2 месяца назад
Подскажите добавляя всю линейку с переменной оно подгружается по запросу или же всё сразу это влияет на размер в мб в целом?
@Residentik
@Residentik 2 месяца назад
Приветствую вас. Честно признаюсь, я не проверял данный момент, скорее всего всё сразу. Рекомендую в реальных проектах использовать не - Google Fonts, а подключать шрифты локально, так-как, если по каким-то причинам google fonts не будет работать, то соответственно и у вас шрифты не будут работать, когда вы их подключаете локально и шрифты находятся в вашем проекте, то вы не зависите от каких-либо сервисов, всё находится непосредственно в вашем проекте, в том числе и шрифты.
@user-jj3zm1jx7z
@user-jj3zm1jx7z 3 месяца назад
Ток ток столкнулся с этим ))
@Residentik
@Residentik 3 месяца назад
Я рад, что видео оказалось полезным для 🙂👍
@user-sv5xo3fg2y
@user-sv5xo3fg2y 2 месяца назад
А как скачать шрифт типа Variable в папку и подключить через CSS? Т.е. я понимаю как скачать, но какой код указать в CSS чтобы подключить например 400, 700, 900 шрифты? Раньше все делалось через несколько @font-face для каждого font-weight с указанием url к папке. А в данном случае у нас же один Variable файл (например Montserrat-VariableFont_wght.ttf)?
@Residentik
@Residentik 2 месяца назад
Приветствую вас. Точно также, как и прочие шрифты. При скачивании шрифта у вас загрузятся файлы обычного статичного шрифта + 1 файл шрифта с переменной, в - этой переменной настройки, что вы выбрали, к примеру font-weight:651. То есть нельзя, скачать сразу все возможные переменные в шрифте, только определенные настройки для шрифта, - это один файл, нужно больше ? Выставляете новые настройки скачиваете ещё один файл, при необходимости процедуру следует повторить.
@user-sv5xo3fg2y
@user-sv5xo3fg2y 2 месяца назад
@@Residentik Понял, спасибо!
@Residentik
@Residentik 2 месяца назад
@@user-sv5xo3fg2y Был рад помочь.
@judazzzz
@judazzzz 16 дней назад
Здравствуйте, гугл фонтс можно использовать в коммерческих целях?
@Residentik
@Residentik 16 дней назад
Все шрифты Google Fonts предоставляются на бесплатной основе, более того, используя шрифт с Google Fonts, вы исключаете все проблемы верстальщиков, с подключением незнакомого шрифта на сайт. Сейчас Google Fonts используется в любых инструментах, использование этих шрифтов в коммерческих целях, абсолютно законно.
@judazzzz
@judazzzz 16 дней назад
@@Residentik спасибо💫
@Residentik
@Residentik 15 дней назад
@@judazzzz Был рад ответить на ваш вопрос.
@blackstyle1111
@blackstyle1111 Месяц назад
ла зачем они обновляет каждый раз. каждый раз не удобнее
@Residentik
@Residentik Месяц назад
Что есть то есть. Разработчики внедряют новый функционал, им кажется что они делают логичный и удобный интерфейс 🙃
@katst1608
@katst1608 2 месяца назад
А у меня нет кнопки change style😢
@Residentik
@Residentik 2 месяца назад
Вы не видите кнопку change style по той причине, что вы выбрали шрифт с переменными, выберите статичный шрифт к примеру - Roboto, и вы увидите, что кнопка присутствует. У шрифтов с переменными нет возможности выбирать начертания, подключается сразу вся линейка, то есть все начертания.
@RairNya
@RairNya 3 месяца назад
Есть ли там русские шрифты?
@Residentik
@Residentik 3 месяца назад
Приветствую вас. Если вы имеете в виду Google Fonts, да, есть.
@RairNya
@RairNya 3 месяца назад
@@Residentik странно, когда захожу на страницу Google Fonts там только английские шрифты
@Residentik
@Residentik 3 месяца назад
@@RairNya В фильтре в вкладке - Language выберите - Cyrillic.
@RairNya
@RairNya 3 месяца назад
@@Residentik Спасибо большое)
@Residentik
@Residentik 3 месяца назад
@@RairNya Был рад помочь 👍
@mdrmstyou
@mdrmstyou 3 месяца назад
У меня нет кнопки “get fonts”, чтобы сразу все параметры скопировать 😒
@Residentik
@Residentik 3 месяца назад
Приветствую вас. Возможно у вас до сих пор работает предыдущая версия сайта, покажите скриншотом, что вы видите, чтобы я мог вам помочь.
@mdrmstyou
@mdrmstyou 3 месяца назад
@@Residentik к сожалению, не могу прикрепить тут скриншот, но спасибо за ответ. У меня есть только "Download family" или же выбирать каждый параметр шрифта по отдельности, который хочу добавить, а после уже могу скопировать линк.
@Residentik
@Residentik 3 месяца назад
@@mdrmstyou Приветствую вас 👋 Вы можете загрузить скриншот на google диск и дать на него ссылку, таким образом я смогу увидеть то, что видите вы.
Далее
Google Fonts уже не тот ❌
6:21
Просмотров 8 тыс.
Прошёл minecraft в Google
00:33
Просмотров 270 тыс.
Docker за 20 минут
21:42
Просмотров 41 тыс.