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

Друзья я всех вас приветствую. Как вы знаете буквально на днях интерфейс - Google Fonts обновился, в связи с этим я решил записать видео, чтобы показать вам, как в новом интерфейсе выбрать необходимые шрифты и подключить их в свой проект. Также в данном видео я познакомлю вам с переменными в шрифтах - Google Fonts, рассмотрим что они нам дают и для чего нужны.
::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
💻 Бесплатный курс "Создай свой первый сайт на HTML5 и CSS3"
От установки редактора, до публикации в сети.
👉 Получить уроки, конспекты, макет и код из уроков: webcademy.ru/htmlsite/
::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
💻 Хочешь стать Frontend разработчиком и изучить JavaScript + React ?
Советую посмотреть информацию по ссылке ниже:
webcademy.ru/jscourse/
::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
Если есть вопросы, пишите их в комментариях, с радостью на них ответим.
Также будем рады видеть вас в наших сообществах:
::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
Вконтакте: web__skills
Telegram канал: t.me/web_skills
::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::

[@DanDiablo]

Благодарю! Несколько лет не заходил за шрифтами и сегодня прям потерялся в интерфейсе.

[@Web-Skills-2024]

Был рад помочь. Надеюсь видео помогло вам разобраться что к чему.

[@user-mx5zo7pz8p]

Я очень благодарна вам за ваше знание, которое вы отдаете другим. Спасибо 😊

[@Web-Skills-2024]

Был рад помочь 🙂👍

[@SergMcl]

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

[@Web-Skills-2024]

Приветствую вас. Я рад, что моё видео помогло вам разобраться в вопросе с google fonts =)

[@khayakhaya2953]

Крутой канал у вас !!! Всегда максимально практично и чётко…. Спасибо большое

[@Web-Skills-2024]

Спасибо большое, нам очень приятно, мы рады, что вам нравится наш канал 👍

[@mikhaildolgov]

Спасибо за Ваш труд.

[@Web-Skills-2024]

Был рад помочь, надеюсь данное видео было полезным для вас 🙂

[@ARTEMFOREVER]

Очень полезное видео. Спасибо добрый человек! еще раз)

[@Web-Skills-2024]

Спасибо. Был рад помочь 👍

[@user-rw8wi3sq9e]

Хороший урок, материал. Молодцы. 👍👍👍👍

[@Web-Skills-2024]

Был рад помочь, надеюсь данное видео было полезным для вас 🙂

[@userok319]

Спасибо большое за разъяснение

[@Web-Skills-2024]

Был рад помочь 🙂👍

[@nk_77777]

Спасибо за видео!)

[@Web-Skills-2024]

Был рад помочь.

[@user-jj9pc3mn5z]

Спасибо.

[@Web-Skills-2024]

Был рад помочь, надеюсь данное видео было полезным для вас 🙂

[@user-hk2hh4zo1y]

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

[@Web-Skills-2024]

Приветствую вас 🙂👏 1) Был рад помочь. 2) Переменные шрифты хранят все вариации свойств шрифта в одном файле. В отличие от статических шрифтов, переменные шрифты предоставляют доступ ко всему диапазону ширины, толщины и других свойств. Преимущества переменных шрифтов: Повышение производительности за счёт уменьшения количества HTTP-запросов к файлам шрифтов и объёма данных, которые необходимо извлечь. Адаптивный дизайн: возможность настройки свойств шрифта в зависимости от размера экрана для улучшения читаемости.

[@vladkolesnik8954]

Спасибо

[@Web-Skills-2024]

Был рад помочь 👍

[@nigalis7581]

спасибо

[@Web-Skills-2024]

Был рад помочь.

[@user-jj3zm1jx7z]

Ток ток столкнулся с этим ))

[@Web-Skills-2024]

Я рад, что видео оказалось полезным для 🙂👍

[@biscuitjerry8043]

уважение!!

[@Web-Skills-2024]

Спасибо большое 🙂👍

[@user-hm4qt7fe4c]

Подскажите добавляя всю линейку с переменной оно подгружается по запросу или же всё сразу это влияет на размер в мб в целом?

[@Web-Skills-2024]

Приветствую вас. Честно признаюсь, я не проверял данный момент, скорее всего всё сразу. Рекомендую в реальных проектах использовать не - Google Fonts, а подключать шрифты локально, так-как, если по каким-то причинам google fonts не будет работать, то соответственно и у вас шрифты не будут работать, когда вы их подключаете локально и шрифты находятся в вашем проекте, то вы не зависите от каких-либо сервисов, всё находится непосредственно в вашем проекте, в том числе и шрифты.

[@user-sv5xo3fg2y]

А как скачать шрифт типа Variable в папку и подключить через CSS? Т.е. я понимаю как скачать, но какой код указать в CSS чтобы подключить например 400, 700, 900 шрифты? Раньше все делалось через несколько @font-face для каждого font-weight с указанием url к папке. А в данном случае у нас же один Variable файл (например Montserrat-VariableFont_wght.ttf)?

[@Web-Skills-2024]

Приветствую вас. Точно также, как и прочие шрифты. При скачивании шрифта у вас загрузятся файлы обычного статичного шрифта + 1 файл шрифта с переменной, в - этой переменной настройки, что вы выбрали, к примеру font-weight:651. То есть нельзя, скачать сразу все возможные переменные в шрифте, только определенные настройки для шрифта, - это один файл, нужно больше ? Выставляете новые настройки скачиваете ещё один файл, при необходимости процедуру следует повторить.

[@user-sv5xo3fg2y]

@@Web-Skills-2024 Понял, спасибо!

[@Web-Skills-2024]

@@user-sv5xo3fg2y Был рад помочь.

[@judazzzz]

Здравствуйте, гугл фонтс можно использовать в коммерческих целях?

[@Web-Skills-2024]

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

[@judazzzz]

@@Web-Skills-2024 спасибо💫

[@Web-Skills-2024]

@@judazzzz Был рад ответить на ваш вопрос.

[@blackstyle1111]

ла зачем они обновляет каждый раз. каждый раз не удобнее

[@Web-Skills-2024]

Что есть то есть. Разработчики внедряют новый функционал, им кажется что они делают логичный и удобный интерфейс 🙃

[@katst1608]

А у меня нет кнопки change style😢

[@Web-Skills-2024]

Вы не видите кнопку change style по той причине, что вы выбрали шрифт с переменными, выберите статичный шрифт к примеру - Roboto, и вы увидите, что кнопка присутствует. У шрифтов с переменными нет возможности выбирать начертания, подключается сразу вся линейка, то есть все начертания.

[@RairNya]

Есть ли там русские шрифты?

[@Web-Skills-2024]

Приветствую вас. Если вы имеете в виду Google Fonts, да, есть.

[@RairNya]

@@Web-Skills-2024 странно, когда захожу на страницу Google Fonts там только английские шрифты

[@Web-Skills-2024]

@@RairNya В фильтре в вкладке - Language выберите - Cyrillic.

[@RairNya]

@@Web-Skills-2024 Спасибо большое)

[@Web-Skills-2024]

@@RairNya Был рад помочь 👍

[@mdrmstyou]

У меня нет кнопки “get fonts”, чтобы сразу все параметры скопировать 😒

[@Web-Skills-2024]

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

[@mdrmstyou]

@@Web-Skills-2024 к сожалению, не могу прикрепить тут скриншот, но спасибо за ответ. У меня есть только "Download family" или же выбирать каждый параметр шрифта по отдельности, который хочу добавить, а после уже могу скопировать линк.

[@Web-Skills-2024]

@@mdrmstyou Приветствую вас 👋 Вы можете загрузить скриншот на google диск и дать на него ссылку, таким образом я смогу увидеть то, что видите вы.

[@gregdmitriev2784]

5:10 - а не хрен со всеми ссориться и вести войны ! это из оперы "а нас-то за что?!"

[@Web-Skills-2024]

Приветствую вас. У google fonts версия сайта выполнена только лишь на английском языке, выбора любого другого языка нет вовсе.