Тёмный

Подключение шрифтов. Google Fonts. CSS font-face. Как подключить шрифты // Фрилансер по жизни 

Фрілансер по життю
Подписаться 315 тыс.
Просмотров 349 тыс.
50% 1

Подключение шрифтов. 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
«Фрилансер по жизни». Живи, а работай в свободное время! ©

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

 

11 сен 2019

Поделиться:

Ссылка:

Скачать:

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

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 682   
@FreelancerLifeStyle
@FreelancerLifeStyle 4 года назад
Ценю твой ЛАЙК и КОММЕНТ! Получить доступ к плюшкам + поддержать канал: 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/
@julik177
@julik177 3 года назад
и что мы получаем) файл css с прописанными стилями, потом браузер понял что ему надо догрузить шрифты, он их загрузил и выровнял текст, это совет, как делать не стоит создавайте тег link со шрифтом сразу к гугл, грузите стили и определяйте их для нужных вам элементов, пока вы получаете стили, у вас уже шрифт определился
@over1679
@over1679 3 года назад
В первый раз с тобой не согласен. Лучше было бы заменить имя в font-family: "Conv-Rgular/Conv-Medium". И вызывать разные варианты и не надо ничего менять в классе у блока. Разве нет? Проверил, всё работает
@bega1ym02
@bega1ym02 3 года назад
Как сделать так чтобы шрифт изменился при нажатии на кнопку??
@alex_python6251
@alex_python6251 4 года назад
Это прям как шпоры, что-то не понятно - зашел, глянул, победил)))
@FreelancerLifeStyle
@FreelancerLifeStyle 4 года назад
Отлично! Я рад!
@tishkafocovv8723
@tishkafocovv8723 2 года назад
Великие цитаты мудрецов-,,И в результате мы получим результат"
@jill1392
@jill1392 3 года назад
Хорошо, что я нашёл твой канал, а то заебался уже на сайтах по крупицам вычитывать и собирать из обрывков для себя полезную информацию. У тебя всё чётко, подробно и ясно. Большое спасибо
@FreelancerLifeStyle
@FreelancerLifeStyle 3 года назад
Пожлуйста!
@Kos37376
@Kos37376 2 года назад
Дорогие программисты, видео снято 2 года назад. И за это время google fonts успел поменяться. Поэтому если вы подключаете через @import. Надо в css указать дополнительное значение. Вот пример: font-family: 'Fruktur', cursive; А еще в новой версии нельзя выбрать кириллицу или латинскую версию. Все это уже внутри
@vladprosto7631
@vladprosto7631 2 года назад
не знаю, всё работает и так как он объяснил )
@user-LvSerg777
@user-LvSerg777 2 года назад
Где кириллицу выбрать не нашел, а стили выбираются в основном окне вкладки " Select styles" нажатием кнопки "+ Select this style" справа от стиля
@vladprosto7631
@vladprosto7631 2 года назад
@@user-LvSerg777 написано же, что встроенно
@catdaik2010
@catdaik2010 2 года назад
спасибо большое тебе спасибоооооо))
@pavelnovikov3894
@pavelnovikov3894 2 года назад
font-style для кого?
@user-kb4le4me2d
@user-kb4le4me2d 2 года назад
Привет! Смотрю видео в 2022 году, многое из того что в видео очень изменилось и сайт шрифтов, сайт-конвертер отказываются работать. Можно ли обновить информацию об актуальных сервисах? Спасибо за видео
@user-pq9dj2lz9w
@user-pq9dj2lz9w 3 года назад
Талант. Ты заслуживаешь как минимум в 20 раз больше просмотров
@FreelancerLifeStyle
@FreelancerLifeStyle 3 года назад
Спасибо!
@miZnIce01
@miZnIce01 3 года назад
Женя, ценю то, что ты делаешь. Поэтому вот ТАЙМКОДЫ :) 00:00 - Вступление. Зачем подключать шрифты? 00:37 - Подготовка к уроку 01:56 - Способ 1. Подключение с помощью Google Fonts 09:04 - Способ 2. Когда Google Fonts бессилен 19:22 - Домашнее задание. Заключение
@FreelancerLifeStyle
@FreelancerLifeStyle 3 года назад
Спасибо!
@user-wf4np1ne2c
@user-wf4np1ne2c 4 года назад
Да это же годнота, а я голову ломал, где и как достать недостающих шрифтов, лайк однозначно!)
@FreelancerLifeStyle
@FreelancerLifeStyle 4 года назад
Спасибо! 👍
@user-ol4ve5fh2c
@user-ol4ve5fh2c 3 года назад
Помогите пожалуйста, гугл фонтс обновили и там теперь всё по другому
@user-xr7pl9hg7g
@user-xr7pl9hg7g 4 года назад
Лайк неглядя. Уверен, всё качественно и доступно для любого чайника и утюга )))
@FreelancerLifeStyle
@FreelancerLifeStyle 4 года назад
Спасибо! 👍👍👍
@user-wt2dl4js7g
@user-wt2dl4js7g 3 года назад
Живи вечно и записывай нужный контент. Уважение!
@FreelancerLifeStyle
@FreelancerLifeStyle 3 года назад
Договорились!
@jasonborn4373
@jasonborn4373 Год назад
Пересматриваю урок второй раз и не перестаю удивлятся способностям этого человека! Евгений как всегда спасибо низкий поклон!
@alinafitisova3176
@alinafitisova3176 4 года назад
обожаю твои уроки, Жень! спасибо что помогаешь изучать веб-разработку
@konstantino7016
@konstantino7016 3 года назад
Вот же добрый человек Женя, берет и дарит людям свои фишки и секретные ссылочки! Спасибо за полезный урок и ценную информацию!
@AlinaEmv
@AlinaEmv 2 года назад
Спасибо за подробный урок=)) Слушать одно удовольствие, без лишней информации и воды, очень мало таких спикеров. Обучение с вами затягивает)
@progprog796
@progprog796 3 года назад
Женя благодарю тебя за урок!!!! Желаю мира твоей семье!!!!
@gennadiymedvedev214
@gennadiymedvedev214 4 года назад
, спасибо за очередное полезное видео !!! , , все новички , твои , фрилансер , фанаты
@FreelancerLifeStyle
@FreelancerLifeStyle 4 года назад
Спасибо! 🤘🤘👍
@MegaArtist21
@MegaArtist21 3 года назад
Всецело поддерживаю!
@igorgorobets8567
@igorgorobets8567 4 года назад
Пересмотрел много подобных каналов и могу сказать, что подача материала и разъяснение на высоком уровне! Один из топовых каналов по данной тематике. Рекомендую!
@bjornedvardsson5510
@bjornedvardsson5510 Год назад
Кнопки Select This Font, о которой говорит автор на 2:44 уже нет. Просто выбираете шрифт (находите через поиск), листаете ниже выбранный и возле вариаций (regular, italic, bold...) справа есть маленький плюсик. На него нажимаете, и выбранный стиль данного шрифта заносится в ваш список выбора. Дальше уже, как обычно.
@e__gumerov
@e__gumerov Год назад
Спасибо)
@ourhera7216
@ourhera7216 2 месяца назад
Женя какой же ты хороший человек! Побольше б таких ❤
@antonermakov4164
@antonermakov4164 3 года назад
Большое спасибо! Время идёт, полезность уроков не падает, а скорее выделяется среди других! Ещё благодарю!
@user-hm7xf9hj6q
@user-hm7xf9hj6q 3 года назад
Женя, спасибо, отличный урок! в интернете не находил нормальной инфы как подключать шрифты, а у тебя на уроке все как всегда предельно просто и понятно!
@iT_Yakuza
@iT_Yakuza 3 года назад
Спасибо, приятная и грамотная подача без лишней воды. Лайк и успехов!
@baummm_9315
@baummm_9315 3 года назад
Сколько инфы на Ютубе искал, и только ты и Минин объясняете доступно, по полочкам, чтоб не приходилось по сто раз пересматривать. Круто, очень полезные видео. Лайк однозначно
@jasonborn4373
@jasonborn4373 Год назад
Урок был очень полезен! Всё как всегда на высоте коротко, ясно, лаконично и главное понятно! Без излишеств и без воды! Спасибо!
@user-cy5zp5os7k
@user-cy5zp5os7k 3 года назад
Теска! 2021 начался с обучении верстки вместе с Фралинсером,еще месяц назад не понимал что такое код и как он работает,а сейчас могу сделать несложный макет. Спасибо за ваш труд который дает старт молодым ребятам,которые вышли с коледжов с 0 знаниями. P.S. Привет со Львова)
@i_h8_water155
@i_h8_water155 Год назад
как успехи?
@o_antushevich
@o_antushevich 2 года назад
Как всегда, прекрасное объяснение! Плюс полезные ссылки, шпаргалки и природное обаяние )
@roman.r.6102
@roman.r.6102 2 года назад
Ты лучший! Спасибо! не просто за уроки верстки, а за то что учишь быть свободным и независимым!
@Rahat_Lukumov
@Rahat_Lukumov 3 года назад
Спасибо тебе огромное за твои уроки, они очень информативные и легко усваиваются :D
@ostapbender8023
@ostapbender8023 Год назад
Спасибо за очень ценные и качественные уроки!
@RussianVLADISLAV
@RussianVLADISLAV Год назад
Большое спасибо тебе за твои уроки! Объясняешь всё понятно и просто. Иногда не получается повторить с первого раза из-за какой-нибудь неправильно поставленной точки... Но, благодаря этому, учишься "перелопачивать" весь код и вспоминать нюансы, что идёт только в плюс!)
@EDIFIER_minecraft
@EDIFIER_minecraft 2 года назад
пересматриваю как пособие ) Благодарю за твою работу, о сенсей)
@bessonniy9208
@bessonniy9208 3 года назад
Самый офигительный канал для обучения!
@garikmelqonyan6011
@garikmelqonyan6011 Год назад
Thank you very much for this descriptive tutorial, Freelancer. Your tutorials are of great value to those learning basic and advanced stuff.
@user-fb3pz6qt3p
@user-fb3pz6qt3p 2 года назад
Благодарим за такой четкий урок!
@sndk2267
@sndk2267 2 месяца назад
Спасибо огромное, более развёрнуто, всё в тему, без лишних слов. Счастья вам !!!
@user-pk3eu6su6w
@user-pk3eu6su6w 3 года назад
Это возможно мой первый пост на ютуб, лет за 10. Снимаю шляпу), огромное спасибо за уроки! Всех благ и долгих лет!
@VitaliiMaevskii
@VitaliiMaevskii 3 года назад
Материал топ! Отличная подача) Воды 0% Спасибо, Женя!!!
@tatianatatiana8824
@tatianatatiana8824 3 года назад
Спасибо большое за уроки! Счастья и здоровья ! :)))
@realmadrid-ji9bd
@realmadrid-ji9bd 3 года назад
Этот видео для меня будет шпаргалкой,походу еще 5-6 раз пересмотреть буду до тех пор не адаптируюсь!Спасибо вам за такие видосов👍👍👍
@Salykin-pro
@Salykin-pro 3 года назад
ГуглФонд изменился и по началу было не понятно, но посмотрев до конца про ГуглФонд в новом стало всё понятно! ОГРОМНОЕ СПАСИБО!!!
@kirillhmk
@kirillhmk Год назад
Как всегда МЕГА Полезно!!! Огромное спасибо, особенно за позитив!!!
@user-margosha1693
@user-margosha1693 Год назад
Спасибо огромное за уроки!
@innasheremet2391
@innasheremet2391 Год назад
Чудовий навчальний матеріал. Переглядаючи ваші уроки, з'являється ще більша зацікавленість рухатися далі і пробувати щось нове. Дякую)))
@kirillusmanov3330
@kirillusmanov3330 9 месяцев назад
Даже не думал, что подключать шрифты это так просто! Еще раз спасибо за такое грамотное и наглядное разъяснение 🔥
@Andrey_Mendel
@Andrey_Mendel 2 года назад
Спасибо, Женя, за отличную подачу!! Буду пробовать подключать.
@user-hi6zy2zk6c
@user-hi6zy2zk6c 3 года назад
Жека, это лучшее из лучшего, что я видел по шрифтам!!!!!!! Везде никакой нормальной, подробной и полезной информации по этой теме не найти просто! Я много раз пытался что-то сделать со шрифтами, но т.к. не находил мало-мальски толкового объяснения - нифига не получалось (имеется ввиду не обычный гугл фонтс, а те шрифты, которых там нет)!!! СПАСИБО Тебе огромное)))
@yuriismakota9574
@yuriismakota9574 3 года назад
Обучаемся, развиваемся, благодаря тебе!!!
@sergiobondar2702
@sergiobondar2702 3 года назад
благодаря этому видосу разобрался со шрифтами раз и навсегда, респект автору!
@user-vz5wj9rg3d
@user-vz5wj9rg3d 4 года назад
Евгений, спасибо за простую динамичную подачу. без всяких ну, бе, ме. хочется слушать и мотивируешь учится.
@FreelancerLifeStyle
@FreelancerLifeStyle 4 года назад
Спасибо!
@user-tr3lc6qm7z
@user-tr3lc6qm7z 3 года назад
Жека, это то, что я искала, спасибо за подробное объяснение. Годный контент! =*
@user-be4so3sh2f
@user-be4so3sh2f 4 года назад
Урок бомба!!! Жека как всегда на высоте!!! А кися на заднем фоне просто апогей ми-ми-мишности!!)))
@FreelancerLifeStyle
@FreelancerLifeStyle 4 года назад
Спасибо!
@user-nb8ex1tq6r
@user-nb8ex1tq6r 4 года назад
У тебя дар объяснять максимально подробно, интересно, да еще и о юморе не забывать! Три лайка! :)
@FreelancerLifeStyle
@FreelancerLifeStyle 4 года назад
Спасибо!
@shakurovdesign
@shakurovdesign 3 года назад
в общем ребят, посмотрел я других учителей, это просто ужас, делают ошибки, вырезают тот фрагмент, где они их исправляют, тем самым вводя в заблуждение учеников, а тут всё честно и искренне! просто лучшее, вот и всё, большое спасибо за труды, и самое главное за искренность и человеческую доброту!
@amily-sky
@amily-sky 2 года назад
Спасибо за хорошие уроки!
@user-el1nc5yb1l
@user-el1nc5yb1l 3 года назад
Спасибо тебе за твою работу!
@mellis_s
@mellis_s 4 года назад
Спасибо тебе за твою бесценную работу!
@FreelancerLifeStyle
@FreelancerLifeStyle 4 года назад
Пожалуйста!
@lyalyalyalya591
@lyalyalyalya591 4 года назад
Как всегда познавательно! спасибо за уроки
@Ihorzolo
@Ihorzolo 3 года назад
Комментарий для продвижения. Спасибо за всё, что ты делаешь, это нереально круто!)
@innakhomovska298
@innakhomovska298 3 года назад
як завжди, урок на висоті. Все розкладено по поличках. Дуже дякую за додатковий матеріал!
@user-te1ut5ev8w
@user-te1ut5ev8w 3 года назад
Здравствуйте! Благодарю за видео!
@user-fg8pq3kk5l
@user-fg8pq3kk5l 2 года назад
Спасибо большое, Женя!
@user-km8kb3xj1p
@user-km8kb3xj1p 2 года назад
Большое спасибо, отличный урок!🔥
@user-wk4fi8vm9g
@user-wk4fi8vm9g 4 года назад
Ну а я круглосуточно рад твоим видео😊👍
@user-tt8lz6bt4b
@user-tt8lz6bt4b 4 года назад
Большое тебе спасибо! Я делал кучу раз, смотрел другие туториалы и не получалось, глянул тебя и очень рад этому.
@FreelancerLifeStyle
@FreelancerLifeStyle 4 года назад
Пожалуйста! Я рад!
@user-rn9cw1xs1x
@user-rn9cw1xs1x 3 года назад
Супер! Спасибо большое! Очень подробно, со всеми нюансами!
@sovasonyasouls
@sovasonyasouls 2 года назад
Спасибо, все понятно и доступно!
@XanjaevRodmam
@XanjaevRodmam 4 года назад
Ты пожалуй единственный осмысленный (но это не совсем то слово), русский ютубер. Крайне качественный контент, понятно, без лапши, хороший звук и дикция, с примерами и объяснениями не скатывающимися в MDN. Надеюсь будешь продолжать. Буду ждать, даже когда рассказываешь то что уже знаю, подчеркиваю что то новое или устаканиваю уже имеющиеся. Удачи!
@FreelancerLifeStyle
@FreelancerLifeStyle 4 года назад
Спасибо большое! Такие комментарии заряжают! 👍🤟
@user-qy4vz2id1j
@user-qy4vz2id1j 4 года назад
Он с Украины.....
@user-kx9dd1sh9k
@user-kx9dd1sh9k Год назад
Благодарю за информацию 🙏
@basmong
@basmong Год назад
Очень хорошее видео. Ctrl + H команда порадовала, полезно было узнать о такой.👍
@omarovfrontend
@omarovfrontend 4 года назад
Жека, все грамотно и без лишней воды 👍 превосходно мужик, однозначно лайк.👏Снимай и дальше интересные видео, удачи! 😉✌️
@matthewbellamy4008
@matthewbellamy4008 5 месяцев назад
Спасибо большое, все понятно и очень полезно
@skyreg11
@skyreg11 4 года назад
Отличный видео урок. Очень хорошо объясняешь, новичкам и не только, подходит такая подача информации. За шпаргалки и ссылки отдельное спасибо. 👍
@FreelancerLifeStyle
@FreelancerLifeStyle 4 года назад
Пожалуйста!
@selleniya999
@selleniya999 3 года назад
Очень спасибо! Всё получилось. Установила 6 Prepros и заработало. Отдельное спасибо за фишечку Ctrl+h. Мммм!
@rim777rim9
@rim777rim9 3 года назад
спасибо за уроки!
@BLGamesChannel
@BLGamesChannel 4 года назад
Супер! Ждем следующих уроков и стрима!
@FreelancerLifeStyle
@FreelancerLifeStyle 4 года назад
Спасибо! 👍
@valentyndubin5441
@valentyndubin5441 4 года назад
Урок бомба 💣💣💣. Женя, спасибо!). Как всегда годный материал. Это должен знать каждый уважающий себя разработчик🙂.
@FreelancerLifeStyle
@FreelancerLifeStyle 4 года назад
Спасибо! Стараюсь давать только то что нужно для работы!
@MaximVernigorov
@MaximVernigorov 3 года назад
Большое тебе спасибо Евгений !!!
@user-zp9yx4lw8k
@user-zp9yx4lw8k Год назад
Чудесное видео. Благодарность!
@user-tj8or8it6q
@user-tj8or8it6q 2 года назад
Спасибо! Тема про шрифты как бы простая, но важная. Можно запутаться в "трёх соснах" ))
@user-vl3fc1pv3c
@user-vl3fc1pv3c 2 года назад
Дуже Дякую за ще один Чудовий Урок.... Респект Величезний!!! Good Work!!! You Are Fantastic!!!
@marsmars274
@marsmars274 2 года назад
Спасибо вам большое за объяснение, мне получилось подключить шрифт к сайту.
@MariIloveREALmusic
@MariIloveREALmusic 3 года назад
Ловите от меня обнимашкииииииии!!!!!!!!!!!!!! Безумно благодарна за то, что благодаря Вам и этому видео приостановился процесс появления седины на моих блондинистых волосах. А то я уже не знала как мне эти дизайнерские фришты подключать и куда их впихивать. ;-)
@dmytroboytchenko5768
@dmytroboytchenko5768 4 года назад
Все очень доступно и понятно . Большое спасибо !!!
@FreelancerLifeStyle
@FreelancerLifeStyle 4 года назад
Супер, я рад!
@shinshilkamoon4635
@shinshilkamoon4635 3 года назад
Самое лучшее объяснение! Спасибо большое!
@FreelancerLifeStyle
@FreelancerLifeStyle 3 года назад
Пожалуйста!
@user-nb3rx2cg4j
@user-nb3rx2cg4j 4 года назад
Ну вот теперь и этот материал пригодился. СПАСИБО за Ваш труд.
@FreelancerLifeStyle
@FreelancerLifeStyle 4 года назад
Пожалуйста!
@user-tk7qv9rv2c
@user-tk7qv9rv2c 2 года назад
Супер, особенно конспекты и шпаргалки)
@user-ie7jv4in9j
@user-ie7jv4in9j 4 года назад
Все с толком и расстановкой! Никакой воды! Браво, Жека!!! Годный видос!
@FreelancerLifeStyle
@FreelancerLifeStyle 4 года назад
Спасибо!
@oleg-on9584
@oleg-on9584 4 года назад
Спасибо Евгений! очень полезная информация)))
@alexandrs.1706
@alexandrs.1706 2 года назад
Спасибо за урок!
@sergeypedko3883
@sergeypedko3883 4 года назад
Огромнейшее СПАСИБО! Просто о сложном!
@FreelancerLifeStyle
@FreelancerLifeStyle 4 года назад
Пожалуйста!
@user-co5lf6jk4b
@user-co5lf6jk4b 3 года назад
Спасибо Евгений, все по полочкам-папочкам :))))
@ArseniyBendyukov
@ArseniyBendyukov 3 года назад
Огромное спасибо! Все работает!
@morozoff1996
@morozoff1996 4 года назад
Урок пушка, как и все остальные! Не знал про способ подключения через конвертацию, т.к. не так давно начал изучать вёрстку. Но благодаря этому уроку, теперь знаю! :D Буду теперь юзать, спасибо!
@FreelancerLifeStyle
@FreelancerLifeStyle 4 года назад
Спасибо! Рад что было полезно!
@grand6511
@grand6511 Год назад
Як завжди крутяцкий матеріал ! Гарно дякую !!!
@uamaker
@uamaker 3 года назад
Спасибо большое, очень помогло в работе!
@user-frond-end_dev
@user-frond-end_dev 2 года назад
шикарно! полезно! информативно! ждем следующих видео
@user-dz7jp9lq7x
@user-dz7jp9lq7x Год назад
благодарю за качественный контент!
@maksatalimov4035
@maksatalimov4035 3 года назад
СПАСИБО! С 3 раза получилось подключить шрифты локально. Я оказывается писал путь только у src: url("../fonts/pfdintextcondpro-medium.eot"); а надо было для всех... спасибо за урок)
@marinahertz3269
@marinahertz3269 4 года назад
Звук, подача материала-ВСЕ на высшем. Спасибо за труд!
@FreelancerLifeStyle
@FreelancerLifeStyle 4 года назад
Пожалуйста!
Далее
Google Fonts уже не тот ❌
6:21
Просмотров 8 тыс.