Подключение шрифтов. Google Fonts. CSS font-face. Как подключить шрифты // Фрилансер по жизни
ฝัง
- เผยแพร่เมื่อ 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". И вызывать разные варианты и не надо ничего менять в классе у блока. Разве нет? Проверил, всё работает
Как сделать так чтобы шрифт изменился при нажатии на кнопку??
Это прям как шпоры, что-то не понятно - зашел, глянул, победил)))
Отлично! Я рад!
Великие цитаты мудрецов-,,И в результате мы получим результат"
Привет! Смотрю видео в 2022 году, многое из того что в видео очень изменилось и сайт шрифтов, сайт-конвертер отказываются работать. Можно ли обновить информацию об актуальных сервисах? Спасибо за видео
Дорогие программисты, видео снято 2 года назад. И за это время google fonts успел поменяться. Поэтому если вы подключаете через @import. Надо в css указать дополнительное значение. Вот пример:
font-family: 'Fruktur', cursive;
А еще в новой версии нельзя выбрать кириллицу или латинскую версию. Все это уже внутри
не знаю, всё работает и так как он объяснил )
Где кириллицу выбрать не нашел, а стили выбираются в основном окне вкладки " Select styles" нажатием кнопки "+ Select this style" справа от стиля
@@user-LvSerg777 написано же, что встроенно
спасибо большое тебе спасибоооооо))
font-style для кого?
Хорошо, что я нашёл твой канал, а то заебался уже на сайтах по крупицам вычитывать и собирать из обрывков для себя полезную информацию. У тебя всё чётко, подробно и ясно. Большое спасибо
Пожлуйста!
Женя, ценю то, что ты делаешь. Поэтому вот ТАЙМКОДЫ :)
00:00 - Вступление. Зачем подключать шрифты?
00:37 - Подготовка к уроку
01:56 - Способ 1. Подключение с помощью Google Fonts
09:04 - Способ 2. Когда Google Fonts бессилен
19:22 - Домашнее задание. Заключение
Спасибо!
Живи вечно и записывай нужный контент. Уважение!
Договорились!
Теска! 2021 начался с обучении верстки вместе с Фралинсером,еще месяц назад не понимал что такое код и как он работает,а сейчас могу сделать несложный макет.
Спасибо за ваш труд который дает старт молодым ребятам,которые вышли с коледжов с 0 знаниями.
P.S. Привет со Львова)
как успехи?
Кнопки Select This Font, о которой говорит автор на 2:44 уже нет. Просто выбираете шрифт (находите через поиск), листаете ниже выбранный и возле вариаций (regular, italic, bold...) справа есть маленький плюсик. На него нажимаете, и выбранный стиль данного шрифта заносится в ваш список выбора. Дальше уже, как обычно.
Спасибо)
Да это же годнота, а я голову ломал, где и как достать недостающих шрифтов, лайк однозначно!)
Спасибо! 👍
Помогите пожалуйста, гугл фонтс обновили и там теперь всё по другому
обожаю твои уроки, Жень! спасибо что помогаешь изучать веб-разработку
Большое спасибо! Время идёт, полезность уроков не падает, а скорее выделяется среди других! Ещё благодарю!
Спасибо за подробный урок=)) Слушать одно удовольствие, без лишней информации и воды, очень мало таких спикеров. Обучение с вами затягивает)
Пересматриваю урок второй раз и не перестаю удивлятся способностям этого человека! Евгений как всегда спасибо низкий поклон!
Лайк неглядя. Уверен, всё качественно и доступно для любого чайника и утюга )))
Спасибо! 👍👍👍
Талант. Ты заслуживаешь как минимум в 20 раз больше просмотров
Спасибо!
Женя, спасибо, отличный урок! в интернете не находил нормальной инфы как подключать шрифты, а у тебя на уроке все как всегда предельно просто и понятно!
Вот же добрый человек Женя, берет и дарит людям свои фишки и секретные ссылочки! Спасибо за полезный урок и ценную информацию!
Сколько инфы на Ютубе искал, и только ты и Минин объясняете доступно, по полочкам, чтоб не приходилось по сто раз пересматривать. Круто, очень полезные видео. Лайк однозначно
Женя благодарю тебя за урок!!!! Желаю мира твоей семье!!!!
Пересмотрел много подобных каналов и могу сказать, что подача материала и разъяснение на высоком уровне! Один из топовых каналов по данной тематике. Рекомендую!
Чудовий навчальний матеріал. Переглядаючи ваші уроки, з'являється ще більша зацікавленість рухатися далі і пробувати щось нове. Дякую)))
Ты лучший! Спасибо! не просто за уроки верстки, а за то что учишь быть свободным и независимым!
Урок был очень полезен! Всё как всегда на высоте коротко, ясно, лаконично и главное понятно! Без излишеств и без воды! Спасибо!
в общем ребят, посмотрел я других учителей, это просто ужас, делают ошибки, вырезают тот фрагмент, где они их исправляют, тем самым вводя в заблуждение учеников, а тут всё честно и искренне! просто лучшее, вот и всё, большое спасибо за труды, и самое главное за искренность и человеческую доброту!
Спасибо огромное, более развёрнуто, всё в тему, без лишних слов. Счастья вам !!!
Два года работаю фронтендщиком, забыл блять как шрифты подрубаются...
понимаю)
@@hliebov не, не так, надо вот так - пАнИмАю
aboba
а какая у тебя зарплата и где живёшь,
не ну ладно там забыл @font-face css команду, но блин из googlefonts в это в школе все знают.
Большое спасибо тебе за твои уроки! Объясняешь всё понятно и просто. Иногда не получается повторить с первого раза из-за какой-нибудь неправильно поставленной точки... Но, благодаря этому, учишься "перелопачивать" весь код и вспоминать нюансы, что идёт только в плюс!)
Евгений, спасибо за простую динамичную подачу. без всяких ну, бе, ме. хочется слушать и мотивируешь учится.
Спасибо!
Спасибо, приятная и грамотная подача без лишней воды. Лайк и успехов!
Женя какой же ты хороший человек! Побольше б таких ❤
Даже не думал, что подключать шрифты это так просто! Еще раз спасибо за такое грамотное и наглядное разъяснение 🔥
Это возможно мой первый пост на ютуб, лет за 10. Снимаю шляпу), огромное спасибо за уроки!
Всех благ и долгих лет!
ГуглФонд изменился и по началу было не понятно, но посмотрев до конца про ГуглФонд в новом стало всё понятно! ОГРОМНОЕ СПАСИБО!!!
, спасибо за очередное полезное видео !!! , , все новички , твои , фрилансер , фанаты
Спасибо! 🤘🤘👍
Всецело поддерживаю!
Спасибо за очень ценные и качественные уроки!
Как всегда, прекрасное объяснение! Плюс полезные ссылки, шпаргалки и природное обаяние )
Жека, это лучшее из лучшего, что я видел по шрифтам!!!!!!! Везде никакой нормальной, подробной и полезной информации по этой теме не найти просто! Я много раз пытался что-то сделать со шрифтами, но т.к. не находил мало-мальски толкового объяснения - нифига не получалось (имеется ввиду не обычный гугл фонтс, а те шрифты, которых там нет)!!! СПАСИБО Тебе огромное)))
як завжди, урок на висоті. Все розкладено по поличках. Дуже дякую за додатковий матеріал!
Этот видео для меня будет шпаргалкой,походу еще 5-6 раз пересмотреть буду до тех пор не адаптируюсь!Спасибо вам за такие видосов👍👍👍
Спасибо тебе огромное за твои уроки, они очень информативные и легко усваиваются :D
Самый офигительный канал для обучения!
Звук, подача материала-ВСЕ на высшем. Спасибо за труд!
Пожалуйста!
пересматриваю как пособие ) Благодарю за твою работу, о сенсей)
Материал топ! Отличная подача) Воды 0% Спасибо, Женя!!!
Всё как всегда понятно и доступно! С Женей всегда кажется всё просто, за психологическую поддержку отдельное спасибо)
Я очень рад!
Все с толком и расстановкой! Никакой воды! Браво, Жека!!! Годный видос!
Спасибо!
Спасибо большое за уроки! Счастья и здоровья ! :)))
Thank you very much for this descriptive tutorial, Freelancer.
Your tutorials are of great value to those learning basic and advanced stuff.
Супер! Ждем следующих уроков и стрима!
Спасибо! 👍
благодаря этому видосу разобрался со шрифтами раз и навсегда, респект автору!
Благодарим за такой четкий урок!
Большое тебе спасибо! Я делал кучу раз, смотрел другие туториалы и не получалось, глянул тебя и очень рад этому.
Пожалуйста! Я рад!
У тебя дар объяснять максимально подробно, интересно, да еще и о юморе не забывать! Три лайка! :)
Спасибо!
Как всегда МЕГА Полезно!!!
Огромное спасибо, особенно за позитив!!!
Спасибо, Женя, за отличную подачу!! Буду пробовать подключать.
Урок бомба!!! Жека как всегда на высоте!!! А кися на заднем фоне просто апогей ми-ми-мишности!!)))
Спасибо!
Ты пожалуй единственный осмысленный (но это не совсем то слово), русский ютубер. Крайне качественный контент, понятно, без лапши, хороший звук и дикция, с примерами и объяснениями не скатывающимися в MDN. Надеюсь будешь продолжать. Буду ждать, даже когда рассказываешь то что уже знаю, подчеркиваю что то новое или устаканиваю уже имеющиеся. Удачи!
Спасибо большое! Такие комментарии заряжают! 👍🤟
Он с Украины.....
Спасибо тебе за твою бесценную работу!
Пожалуйста!
Отличный видео урок. Очень хорошо объясняешь, новичкам и не только, подходит такая подача информации. За шпаргалки и ссылки отдельное спасибо. 👍
Пожалуйста!
Урок бомба 💣💣💣. Женя, спасибо!). Как всегда годный материал. Это должен знать каждый уважающий себя разработчик🙂.
Спасибо! Стараюсь давать только то что нужно для работы!
Спасибо огромное за уроки!
Спасибо! Тема про шрифты как бы простая, но важная. Можно запутаться в "трёх соснах" ))
Ловите от меня обнимашкииииииии!!!!!!!!!!!!!! Безумно благодарна за то, что благодаря Вам и этому видео приостановился процесс появления седины на моих блондинистых волосах. А то я уже не знала как мне эти дизайнерские фришты подключать и куда их впихивать. ;-)
Супер! Спасибо большое! Очень подробно, со всеми нюансами!
Очень спасибо! Всё получилось. Установила 6 Prepros и заработало. Отдельное спасибо за фишечку Ctrl+h. Мммм!
Как всегда познавательно! спасибо за уроки
Дуже Дякую за ще один Чудовий Урок.... Респект Величезний!!!
Good Work!!! You Are Fantastic!!!
Жека, это то, что я искала, спасибо за подробное объяснение. Годный контент! =*
Комментарий для продвижения. Спасибо за всё, что ты делаешь, это нереально круто!)
Обучаемся, развиваемся, благодаря тебе!!!
Жека, все грамотно и без лишней воды 👍 превосходно мужик, однозначно лайк.👏Снимай и дальше интересные видео, удачи! 😉✌️
Очень хорошее видео. Ctrl + H команда порадовала, полезно было узнать о такой.👍
Ну а я круглосуточно рад твоим видео😊👍
Большое спасибо, отличный урок!🔥
Как всегда все понятно, только гугл изменил интерфейс подключения, но принцип тот-же. Спасибо.
принцип тот же, но скачивает всё семейство, а не отдельно выбранные стили, раньше поудобнее было
Спасибо Евгений! очень полезная информация)))
СПАСИБО! С 3 раза получилось подключить шрифты локально. Я оказывается писал путь только у src: url("../fonts/pfdintextcondpro-medium.eot"); а надо было для всех... спасибо за урок)
Урок пушка, как и все остальные! Не знал про способ подключения через конвертацию, т.к. не так давно начал изучать вёрстку. Но благодаря этому уроку, теперь знаю! :D Буду теперь юзать, спасибо!
Спасибо! Рад что было полезно!
Как я рада что мои преподы не объясняют более доступно, а то так бы не узнала о таком прекрасном человеке и познавательном канале, с таким годным контентом. Где человек горит неимоверной энергией и зажигает других╰(*°▽°*)╯
Очень круто! Особенно юмор мне очень нравится))
Спасибо вам большое за объяснение, мне получилось подключить шрифт к сайту.
Ну вот теперь и этот материал пригодился. СПАСИБО за Ваш труд.
Пожалуйста!
Евгений, спасибо за урок, все очень чётко и понятно).
Пожалуйста!
Дякую. Як завжди все добре пояснив, з прикладами. Для себе підчерпнув багато нового.
Все очень доступно и понятно . Большое спасибо !!!
Супер, я рад!
Жек, я на фрилансе третий месяц. Работаю в сфере верстки и дизайна. Так вот, хотел бы что бы ты выпустил небольшой ролик о ценах на услуги верстки. А то мне как новичку не понятно пока как оценивать работу, выполняю верстку лэндингов по 1500-2000р. Конечно с кучей косяков в коде, но внешне похожий на макет или вообще по собственному дизайну и это тоже за те же 1500-2500р. Расскажи о ценах на, думаю многим будет полезна эта инфа)
Расскажу! Правда это все очень относительно, но я что-то придумаю!
А как Вы вышли на фриланс? Где взяли первый заказ?
Да, мне тоже было бы интересно.
@
KazulyaX за какое количество времени примерно ты можешь сверстать простенький лендинг? Мне просто интересно.
@@user-qe2pb9fg5j ну смотря что значит простенький...как видишь я писал это почти год назад, ну если простенький в моем понимание, то несколько часов.
шикарно! полезно! информативно! ждем следующих видео
Полезный урок. Спасибо Жень!
Пожалуйста!
Самое лучшее объяснение! Спасибо большое!
Пожалуйста!
Мощно, однако!) Смотрю взахлёб каждый ролик. Даже отходить от компа неохота. Но нужны перерывы... В 200-граммовый стакан, помещается максимум 200мл жидкости, так и с мозгом!
Спасибо за хорошие уроки!
Спасибо большое, все понятно и очень полезно
Все очень понятно и досконально расписал. Спасибо за старания)
Спасибо, рад что полезно! 👍
Спасибо за твой труд! Салют из РФ! Очень много узнал из твоих видео!!!
Пожалуйста!
Спасибо большое, Женя!
Огромнейшее СПАСИБО! Просто о сложном!
Пожалуйста!
Отличный урок ,как всегда!
Спасибо за старание , очень интересно рассказываешь, и по делу.
Пожалуйста! Я рад что полезно!