Google Fonts. Как подключить шрифты в 2024 году ? Переменные в шрифтах - Google Fonts.
HTML-код
- Опубликовано: 1 окт 2024
- Друзья я всех вас приветствую. Как вы знаете буквально на днях интерфейс - Google Fonts обновился, в связи с этим я решил записать видео, чтобы показать вам, как в новом интерфейсе выбрать необходимые шрифты и подключить их в свой проект. Также в данном видео я познакомлю вам с переменными в шрифтах - Google Fonts, рассмотрим что они нам дают и для чего нужны.
::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
💻 Бесплатный курс "Создай свой первый сайт на HTML5 и CSS3"
От установки редактора, до публикации в сети.
👉 Получить уроки, конспекты, макет и код из уроков: webcademy.ru/ht...
::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
💻 Хочешь стать Frontend разработчиком и изучить JavaScript + React ?
Советую посмотреть информацию по ссылке ниже:
webcademy.ru/j...
::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
Если есть вопросы, пишите их в комментариях, с радостью на них ответим.
Также будем рады видеть вас в наших сообществах:
::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
Вконтакте: web__sk...
Telegram канал: t.me/web_skills
::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
![[2024] Подключение шрифтов. Google Fonts. CSS font-face. Как подключить шрифты. УчимВместе](http://i.ytimg.com/vi/-fdpoOOLRGk/mqdefault.jpg)
ла зачем они обновляет каждый раз. каждый раз не удобнее
Что есть то есть. Разработчики внедряют новый функционал, им кажется что они делают логичный и удобный интерфейс 🙃
Благодарю! Несколько лет не заходил за шрифтами и сегодня прям потерялся в интерфейсе.
Был рад помочь. Надеюсь видео помогло вам разобраться что к чему.
Здравствуйте, гугл фонтс можно использовать в коммерческих целях?
Все шрифты Google Fonts предоставляются на бесплатной основе, более того, используя шрифт с Google Fonts, вы исключаете все проблемы верстальщиков, с подключением незнакомого шрифта на сайт. Сейчас Google Fonts используется в любых инструментах, использование этих шрифтов в коммерческих целях, абсолютно законно.
@@Web-Skills-2024 спасибо💫
@@waterbenderrrr Был рад ответить на ваш вопрос.
Спасибо. Внесли ясность. А то не мог понять, зачем все начертания тянуть, когда нужно всего два. Благо, легким гуглением нашел ваше видео. Variable, значит. Плюс готовые классы для tailwind. Прогресс не стоит на месте.
Приветствую вас. Я рад, что моё видео помогло вам разобраться в вопросе с google fonts =)
Большое спасибо за видео. Лайк и подписка
Был рад помочь.
Спасибо а то конкретно выгорел
Был рад помочь.
Я очень благодарна вам за ваше знание, которое вы отдаете другим. Спасибо 😊
Был рад помочь 🙂👍
Спасибо!!!
Был рад помочь.
Крутой канал у вас !!! Всегда максимально практично и чётко…. Спасибо большое
Спасибо большое, нам очень приятно, мы рады, что вам нравится наш канал 👍
Спасибо за разъяснения, понадобились шрифты, чуть голову не сломал. Единственно не понял с переменными шрифтами где их по сути применять и какого их влияние на оптимизацию.
Приветствую вас 🙂👏
1) Был рад помочь.
2) Переменные шрифты хранят все вариации свойств шрифта в одном файле. В отличие от статических шрифтов, переменные шрифты предоставляют доступ ко всему диапазону ширины, толщины и других свойств.
Преимущества переменных шрифтов:
Повышение производительности за счёт уменьшения количества HTTP-запросов к файлам шрифтов и объёма данных, которые необходимо извлечь.
Адаптивный дизайн: возможность настройки свойств шрифта в зависимости от размера экрана для улучшения читаемости.
Спасибо за видео!)
Был рад помочь.
Очень полезное видео. Спасибо добрый человек! еще раз)
Спасибо. Был рад помочь 👍
А как скачать шрифт типа Variable в папку и подключить через CSS? Т.е. я понимаю как скачать, но какой код указать в CSS чтобы подключить например 400, 700, 900 шрифты? Раньше все делалось через несколько @font-face для каждого font-weight с указанием url к папке. А в данном случае у нас же один Variable файл (например Montserrat-VariableFont_wght.ttf)?
Приветствую вас.
Точно также, как и прочие шрифты.
При скачивании шрифта у вас загрузятся файлы обычного статичного шрифта + 1 файл шрифта с переменной, в - этой переменной настройки, что вы выбрали, к примеру font-weight:651. То есть нельзя, скачать сразу все возможные переменные в шрифте, только определенные настройки для шрифта, - это один файл, нужно больше ? Выставляете новые настройки скачиваете ещё один файл, при необходимости процедуру следует повторить.
@@Web-Skills-2024 Понял, спасибо!
@@ВладимирПетров-т7ч Был рад помочь.
Хороший урок, материал. Молодцы. 👍👍👍👍
Был рад помочь, надеюсь данное видео было полезным для вас 🙂
Спасибо! Коротко и по делу!
Спасибо большое. Я рад, что моё видео понравилось вам.
уважение!!
Спасибо большое 🙂👍
Спасибо большое за разъяснение
Был рад помочь 🙂👍
Спасибо за Ваш труд.
Был рад помочь, надеюсь данное видео было полезным для вас 🙂
Спасибо.
Был рад помочь, надеюсь данное видео было полезным для вас 🙂
Подскажите
добавляя всю линейку с переменной
оно подгружается по запросу или же всё сразу
это влияет на размер в мб в целом?
Приветствую вас. Честно признаюсь, я не проверял данный момент, скорее всего всё сразу.
Рекомендую в реальных проектах использовать не - Google Fonts, а подключать шрифты локально, так-как, если по каким-то причинам google fonts не будет работать, то соответственно и у вас шрифты не будут работать, когда вы их подключаете локально и шрифты находятся в вашем проекте, то вы не зависите от каких-либо сервисов, всё находится непосредственно в вашем проекте, в том числе и шрифты.
спасибо
Был рад помочь.
А у меня нет кнопки change style😢
Вы не видите кнопку change style по той причине, что вы выбрали шрифт с переменными, выберите статичный шрифт к примеру - Roboto, и вы увидите, что кнопка присутствует.
У шрифтов с переменными нет возможности выбирать начертания, подключается сразу вся линейка, то есть все начертания.
Спасибо
Был рад помочь 👍
Есть ли там русские шрифты?
Приветствую вас. Если вы имеете в виду Google Fonts, да, есть.
@@Web-Skills-2024 странно, когда захожу на страницу Google Fonts там только английские шрифты
@@RairNya В фильтре в вкладке - Language выберите - Cyrillic.
@@Web-Skills-2024 Спасибо большое)
@@RairNya Был рад помочь 👍
У меня нет кнопки “get fonts”, чтобы сразу все параметры скопировать 😒
Приветствую вас. Возможно у вас до сих пор работает предыдущая версия сайта, покажите скриншотом, что вы видите, чтобы я мог вам помочь.
@@Web-Skills-2024 к сожалению, не могу прикрепить тут скриншот, но спасибо за ответ. У меня есть только "Download family" или же выбирать каждый параметр шрифта по отдельности, который хочу добавить, а после уже могу скопировать линк.
@@nasolodaaaa Приветствую вас 👋 Вы можете загрузить скриншот на google диск и дать на него ссылку, таким образом я смогу увидеть то, что видите вы.
5:10 - а не хрен со всеми ссориться и вести войны ! это из оперы "а нас-то за что?!"
Приветствую вас. У google fonts версия сайта выполнена только лишь на английском языке, выбора любого другого языка нет вовсе.