Подключение шрифтов. Google Fonts. CSS font-face. Как подключить шрифты // Фрилансер по жизни
HTML-код
- Опубликовано: 11 сен 2019
- Подключение шрифтов. Google Fonts. CSS font-face. В этом выпуске научимся конвертировать и правильно подключать шрифты разными способами!
Как подключить шрифты через font-face и как подключить шрифты google fonts
Поддержать канал: / freelancerlifestyle
Instagram: / freelancer.lifestyle
Facebook: / freelancerlifestyle
Telegram канал: t.me/freelancer_lifestyle или teleg.run/freelancer_lifestyle
Архив с файлами урока ищи в телеграм канале t.me/freelancer_lifestyle (teleg.run/freelancer_lifestyle)
Или качай по ссылке: fls.guru/files/tutorials/addf...
Google Fonts: fonts.google.com/
Каталог шрифтов: nomail.com.ua/
Конвертер шрифтов: www.font2web.com/
Меня зовут Женя Андриканич, я IT - специалист, занимаюсь разработкой сайтов. На этом канале, я регулярно и в максимально доступном формате буду делиться с тобой своим опытом, наработками, секретами и лайфхаками!
Ссылка на канал: / freelancerlifestyle
«Фрилансер по жизни». Живи, а работай в свободное время! ©
Ценю твой ЛАЙК и КОММЕНТ!
Получить доступ к плюшкам + поддержать канал: www.patreon.com/freelancerlifestyle
Поддержать канал (донаты): www.donationalerts.com/r/freelancerlifestyle
Telegram канал: t.me/freelancer_lifestyle или teleg.run/freelancer_lifestyle
Instagram: instagram.com/freelancer.lifestyle/
Facebook: facebook.com/freelancerlifestyle/
и что мы получаем) файл css с прописанными стилями, потом браузер понял что ему надо догрузить шрифты, он их загрузил и выровнял текст, это совет, как делать не стоит
создавайте тег link со шрифтом сразу к гугл, грузите стили и определяйте их для нужных вам элементов, пока вы получаете стили, у вас уже шрифт определился
В первый раз с тобой не согласен. Лучше было бы заменить имя в font-family: "Conv-Rgular/Conv-Medium". И вызывать разные варианты и не надо ничего менять в классе у блока. Разве нет? Проверил, всё работает
Как сделать так чтобы шрифт изменился при нажатии на кнопку??
Это прям как шпоры, что-то не понятно - зашел, глянул, победил)))
Отлично! Я рад!
Великие цитаты мудрецов-,,И в результате мы получим результат"
Дорогие программисты, видео снято 2 года назад. И за это время google fonts успел поменяться. Поэтому если вы подключаете через @import. Надо в css указать дополнительное значение. Вот пример:
font-family: 'Fruktur', cursive;
А еще в новой версии нельзя выбрать кириллицу или латинскую версию. Все это уже внутри
не знаю, всё работает и так как он объяснил )
Где кириллицу выбрать не нашел, а стили выбираются в основном окне вкладки " Select styles" нажатием кнопки "+ Select this style" справа от стиля
@@user-LvSerg777 написано же, что встроенно
спасибо большое тебе спасибоооооо))
font-style для кого?
Привет! Смотрю видео в 2022 году, многое из того что в видео очень изменилось и сайт шрифтов, сайт-конвертер отказываются работать. Можно ли обновить информацию об актуальных сервисах? Спасибо за видео
Хорошо, что я нашёл твой канал, а то заебался уже на сайтах по крупицам вычитывать и собирать из обрывков для себя полезную информацию. У тебя всё чётко, подробно и ясно. Большое спасибо
Пожлуйста!
обожаю твои уроки, Жень! спасибо что помогаешь изучать веб-разработку
Спасибо за подробный урок=)) Слушать одно удовольствие, без лишней информации и воды, очень мало таких спикеров. Обучение с вами затягивает)
Женя, спасибо, отличный урок! в интернете не находил нормальной инфы как подключать шрифты, а у тебя на уроке все как всегда предельно просто и понятно!
Большое спасибо! Время идёт, полезность уроков не падает, а скорее выделяется среди других! Ещё благодарю!
Кнопки Select This Font, о которой говорит автор на 2:44 уже нет. Просто выбираете шрифт (находите через поиск), листаете ниже выбранный и возле вариаций (regular, italic, bold...) справа есть маленький плюсик. На него нажимаете, и выбранный стиль данного шрифта заносится в ваш список выбора. Дальше уже, как обычно.
Спасибо)
Ты лучший! Спасибо! не просто за уроки верстки, а за то что учишь быть свободным и независимым!
Урок был очень полезен! Всё как всегда на высоте коротко, ясно, лаконично и главное понятно! Без излишеств и без воды! Спасибо!
Вот же добрый человек Женя, берет и дарит людям свои фишки и секретные ссылочки! Спасибо за полезный урок и ценную информацию!
Женя, ценю то, что ты делаешь. Поэтому вот ТАЙМКОДЫ :)
00:00 - Вступление. Зачем подключать шрифты?
00:37 - Подготовка к уроку
01:56 - Способ 1. Подключение с помощью Google Fonts
09:04 - Способ 2. Когда Google Fonts бессилен
19:22 - Домашнее задание. Заключение
Спасибо!
Женя благодарю тебя за урок!!!! Желаю мира твоей семье!!!!
Пересматриваю урок второй раз и не перестаю удивлятся способностям этого человека! Евгений как всегда спасибо низкий поклон!
Спасибо, приятная и грамотная подача без лишней воды. Лайк и успехов!
Сколько инфы на Ютубе искал, и только ты и Минин объясняете доступно, по полочкам, чтоб не приходилось по сто раз пересматривать. Круто, очень полезные видео. Лайк однозначно
Спасибо огромное, более развёрнуто, всё в тему, без лишних слов. Счастья вам !!!
Большое спасибо тебе за твои уроки! Объясняешь всё понятно и просто. Иногда не получается повторить с первого раза из-за какой-нибудь неправильно поставленной точки... Но, благодаря этому, учишься "перелопачивать" весь код и вспоминать нюансы, что идёт только в плюс!)
Как всегда, прекрасное объяснение! Плюс полезные ссылки, шпаргалки и природное обаяние )
Спасибо за очень ценные и качественные уроки!
Спасибо тебе огромное за твои уроки, они очень информативные и легко усваиваются :D
Евгений, спасибо за простую динамичную подачу. без всяких ну, бе, ме. хочется слушать и мотивируешь учится.
Спасибо!
Thank you very much for this descriptive tutorial, Freelancer.
Your tutorials are of great value to those learning basic and advanced stuff.
Пересмотрел много подобных каналов и могу сказать, что подача материала и разъяснение на высоком уровне! Один из топовых каналов по данной тематике. Рекомендую!
Спасибо тебе за твою бесценную работу!
Пожалуйста!
Даже не думал, что подключать шрифты это так просто! Еще раз спасибо за такое грамотное и наглядное разъяснение 🔥
Самый офигительный канал для обучения!
пересматриваю как пособие ) Благодарю за твою работу, о сенсей)
Да это же годнота, а я голову ломал, где и как достать недостающих шрифтов, лайк однозначно!)
Спасибо! 👍
Помогите пожалуйста, гугл фонтс обновили и там теперь всё по другому
ГуглФонд изменился и по началу было не понятно, но посмотрев до конца про ГуглФонд в новом стало всё понятно! ОГРОМНОЕ СПАСИБО!!!
Спасибо огромное за уроки!
Благодарим за такой четкий урок!
Материал топ! Отличная подача) Воды 0% Спасибо, Женя!!!
Жека, это лучшее из лучшего, что я видел по шрифтам!!!!!!! Везде никакой нормальной, подробной и полезной информации по этой теме не найти просто! Я много раз пытался что-то сделать со шрифтами, но т.к. не находил мало-мальски толкового объяснения - нифига не получалось (имеется ввиду не обычный гугл фонтс, а те шрифты, которых там нет)!!! СПАСИБО Тебе огромное)))
Это возможно мой первый пост на ютуб, лет за 10. Снимаю шляпу), огромное спасибо за уроки!
Всех благ и долгих лет!
Чудовий навчальний матеріал. Переглядаючи ваші уроки, з'являється ще більша зацікавленість рухатися далі і пробувати щось нове. Дякую)))
Спасибо большое за уроки! Счастья и здоровья ! :)))
Спасибо, Женя, за отличную подачу!! Буду пробовать подключать.
Как всегда МЕГА Полезно!!!
Огромное спасибо, особенно за позитив!!!
Обучаемся, развиваемся, благодаря тебе!!!
благодаря этому видосу разобрался со шрифтами раз и навсегда, респект автору!
Этот видео для меня будет шпаргалкой,походу еще 5-6 раз пересмотреть буду до тех пор не адаптируюсь!Спасибо вам за такие видосов👍👍👍
Женя какой же ты хороший человек! Побольше б таких ❤
Большое тебе спасибо! Я делал кучу раз, смотрел другие туториалы и не получалось, глянул тебя и очень рад этому.
Пожалуйста! Я рад!
Спасибо тебе за твою работу!
Живи вечно и записывай нужный контент. Уважение!
Договорились!
Большое спасибо, отличный урок!🔥
Здравствуйте! Благодарю за видео!
Урок бомба 💣💣💣. Женя, спасибо!). Как всегда годный материал. Это должен знать каждый уважающий себя разработчик🙂.
Спасибо! Стараюсь давать только то что нужно для работы!
Спасибо за хорошие уроки!
Спасибо большое, Женя!
Звук, подача материала-ВСЕ на высшем. Спасибо за труд!
Пожалуйста!
Отличный видео урок. Очень хорошо объясняешь, новичкам и не только, подходит такая подача информации. За шпаргалки и ссылки отдельное спасибо. 👍
Пожалуйста!
Спасибо большое, все понятно и очень полезно
Как всегда познавательно! спасибо за уроки
Супер! Ждем следующих уроков и стрима!
Спасибо! 👍
Очень спасибо! Всё получилось. Установила 6 Prepros и заработало. Отдельное спасибо за фишечку Ctrl+h. Мммм!
Все с толком и расстановкой! Никакой воды! Браво, Жека!!! Годный видос!
Спасибо!
Благодарю за информацию 🙏
Спасибо вам большое за объяснение, мне получилось подключить шрифт к сайту.
спасибо за уроки!
як завжди, урок на висоті. Все розкладено по поличках. Дуже дякую за додатковий матеріал!
Все очень доступно и понятно . Большое спасибо !!!
Супер, я рад!
Чудесное видео. Благодарность!
Супер! Спасибо большое! Очень подробно, со всеми нюансами!
Лайк неглядя. Уверен, всё качественно и доступно для любого чайника и утюга )))
Спасибо! 👍👍👍
Очень хорошее видео. Ctrl + H команда порадовала, полезно было узнать о такой.👍
Спасибо, все понятно и доступно!
У тебя дар объяснять максимально подробно, интересно, да еще и о юморе не забывать! Три лайка! :)
Спасибо!
Самое лучшее объяснение! Спасибо большое!
Пожалуйста!
Теска! 2021 начался с обучении верстки вместе с Фралинсером,еще месяц назад не понимал что такое код и как он работает,а сейчас могу сделать несложный макет.
Спасибо за ваш труд который дает старт молодым ребятам,которые вышли с коледжов с 0 знаниями.
P.S. Привет со Львова)
как успехи?
Всё как всегда понятно и доступно! С Женей всегда кажется всё просто, за психологическую поддержку отдельное спасибо)
Я очень рад!
Ну вот теперь и этот материал пригодился. СПАСИБО за Ваш труд.
Пожалуйста!
Жека, это то, что я искала, спасибо за подробное объяснение. Годный контент! =*
Большое тебе спасибо Евгений !!!
Спасибо! Тема про шрифты как бы простая, но важная. Можно запутаться в "трёх соснах" ))
Жека, все грамотно и без лишней воды 👍 превосходно мужик, однозначно лайк.👏Снимай и дальше интересные видео, удачи! 😉✌️
Огромнейшее СПАСИБО! Просто о сложном!
Пожалуйста!
Комментарий для продвижения. Спасибо за всё, что ты делаешь, это нереально круто!)
, спасибо за очередное полезное видео !!! , , все новички , твои , фрилансер , фанаты
Спасибо! 🤘🤘👍
Всецело поддерживаю!
Спасибо за урок!
Спасибо за старание , очень интересно рассказываешь, и по делу.
Пожалуйста! Я рад что полезно!
Ну а я круглосуточно рад твоим видео😊👍
Спасибо Евгений! очень полезная информация)))
в общем ребят, посмотрел я других учителей, это просто ужас, делают ошибки, вырезают тот фрагмент, где они их исправляют, тем самым вводя в заблуждение учеников, а тут всё честно и искренне! просто лучшее, вот и всё, большое спасибо за труды, и самое главное за искренность и человеческую доброту!
Супер, особенно конспекты и шпаргалки)
Талант. Ты заслуживаешь как минимум в 20 раз больше просмотров
Спасибо!
Все очень понятно и досконально расписал. Спасибо за старания)
Спасибо, рад что полезно! 👍
благодарю за качественный контент!
Спасибо. Инфа доступна, быстро и без лишней воды. 100500 лайков.
Спасибо!
Огромное спасибо! Все работает!
Евгений, спасибо за урок, все очень чётко и понятно).
Пожалуйста!
Спасибо большое, очень помогло в работе!
Два года работаю фронтендщиком, забыл блять как шрифты подрубаются...
понимаю)
@@hliebov не, не так, надо вот так - пАнИмАю
aboba
а какая у тебя зарплата и где живёшь,
не ну ладно там забыл @font-face css команду, но блин из googlefonts в это в школе все знают.
шикарно! полезно! информативно! ждем следующих видео
БлагоДарю!
Отличный урок ,как всегда!