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

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

[@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/

[@julik177]

и что мы получаем) файл css с прописанными стилями, потом браузер понял что ему надо догрузить шрифты, он их загрузил и выровнял текст, это совет, как делать не стоит создавайте тег link со шрифтом сразу к гугл, грузите стили и определяйте их для нужных вам элементов, пока вы получаете стили, у вас уже шрифт определился

[@over1679]

В первый раз с тобой не согласен. Лучше было бы заменить имя в font-family: "Conv-Rgular/Conv-Medium". И вызывать разные варианты и не надо ничего менять в классе у блока. Разве нет? Проверил, всё работает

[@bega1ym02]

Как сделать так чтобы шрифт изменился при нажатии на кнопку??

[@alex_python6251]

Это прям как шпоры, что-то не понятно - зашел, глянул, победил)))

[@FreelancerLifeStyle]

Отлично! Я рад!

[@tishkafocovv8723]

Великие цитаты мудрецов-,,И в результате мы получим результат"

[@Kos37376]

Дорогие программисты, видео снято 2 года назад. И за это время google fonts успел поменяться. Поэтому если вы подключаете через @import. Надо в css указать дополнительное значение. Вот пример: font-family: 'Fruktur', cursive; А еще в новой версии нельзя выбрать кириллицу или латинскую версию. Все это уже внутри

[@vladprosto7631]

не знаю, всё работает и так как он объяснил )

[@user-LvSerg777]

Где кириллицу выбрать не нашел, а стили выбираются в основном окне вкладки " Select styles" нажатием кнопки "+ Select this style" справа от стиля

[@vladprosto7631]

@@user-LvSerg777 написано же, что встроенно

[@catdaik2010]

спасибо большое тебе спасибоооооо))

[@pavelnovikov3894]

font-style для кого?

[@jill1392]

Хорошо, что я нашёл твой канал, а то заебался уже на сайтах по крупицам вычитывать и собирать из обрывков для себя полезную информацию. У тебя всё чётко, подробно и ясно. Большое спасибо

[@FreelancerLifeStyle]

Пожлуйста!

[@user-kb4le4me2d]

Привет! Смотрю видео в 2022 году, многое из того что в видео очень изменилось и сайт шрифтов, сайт-конвертер отказываются работать. Можно ли обновить информацию об актуальных сервисах? Спасибо за видео

[@shakurovdesign]

в общем ребят, посмотрел я других учителей, это просто ужас, делают ошибки, вырезают тот фрагмент, где они их исправляют, тем самым вводя в заблуждение учеников, а тут всё честно и искренне! просто лучшее, вот и всё, большое спасибо за труды, и самое главное за искренность и человеческую доброту!

[@miZnIce01]

Женя, ценю то, что ты делаешь. Поэтому вот ТАЙМКОДЫ :) 00:00 - Вступление. Зачем подключать шрифты? 00:37 - Подготовка к уроку 01:56 - Способ 1. Подключение с помощью Google Fonts 09:04 - Способ 2. Когда Google Fonts бессилен 19:22 - Домашнее задание. Заключение

[@FreelancerLifeStyle]

Спасибо!

[@ourhera7216]

Женя какой же ты хороший человек! Побольше б таких ❤

[@user-wf4np1ne2c]

Да это же годнота, а я голову ломал, где и как достать недостающих шрифтов, лайк однозначно!)

[@FreelancerLifeStyle]

Спасибо! 👍

[@user-ol4ve5fh2c]

Помогите пожалуйста, гугл фонтс обновили и там теперь всё по другому

[@user-pq9dj2lz9w]

Талант. Ты заслуживаешь как минимум в 20 раз больше просмотров

[@FreelancerLifeStyle]

Спасибо!

[@user-xr7pl9hg7g]

Лайк неглядя. Уверен, всё качественно и доступно для любого чайника и утюга )))

[@FreelancerLifeStyle]

Спасибо! 👍👍👍

[@user-cy5zp5os7k]

Теска! 2021 начался с обучении верстки вместе с Фралинсером,еще месяц назад не понимал что такое код и как он работает,а сейчас могу сделать несложный макет. Спасибо за ваш труд который дает старт молодым ребятам,которые вышли с коледжов с 0 знаниями. P.S. Привет со Львова)

[@i_h8_water155]

как успехи?

[@alinafitisova3176]

обожаю твои уроки, Жень! спасибо что помогаешь изучать веб-разработку

[@jasonborn4373]

Пересматриваю урок второй раз и не перестаю удивлятся способностям этого человека! Евгений как всегда спасибо низкий поклон!

[@innasheremet2391]

Чудовий навчальний матеріал. Переглядаючи ваші уроки, з'являється ще більша зацікавленість рухатися далі і пробувати щось нове. Дякую)))

[@bjornedvardsson5510]

Кнопки Select This Font, о которой говорит автор на 2:44 уже нет. Просто выбираете шрифт (находите через поиск), листаете ниже выбранный и возле вариаций (regular, italic, bold...) справа есть маленький плюсик. На него нажимаете, и выбранный стиль данного шрифта заносится в ваш список выбора. Дальше уже, как обычно.

[@e__gumerov]

Спасибо)

[@igorgorobets8567]

Пересмотрел много подобных каналов и могу сказать, что подача материала и разъяснение на высоком уровне! Один из топовых каналов по данной тематике. Рекомендую!

[@user-wt2dl4js7g]

Живи вечно и записывай нужный контент. Уважение!

[@FreelancerLifeStyle]

Договорились!

[@AlinaEmv]

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

[@sndk2267]

Спасибо огромное, более развёрнуто, всё в тему, без лишних слов. Счастья вам !!!

[@user-hm7xf9hj6q]

Женя, спасибо, отличный урок! в интернете не находил нормальной инфы как подключать шрифты, а у тебя на уроке все как всегда предельно просто и понятно!

[@konstantino7016]

Вот же добрый человек Женя, берет и дарит людям свои фишки и секретные ссылочки! Спасибо за полезный урок и ценную информацию!

[@realmadrid-ji9bd]

Этот видео для меня будет шпаргалкой,походу еще 5-6 раз пересмотреть буду до тех пор не адаптируюсь!Спасибо вам за такие видосов👍👍👍

[@jasonborn4373]

Урок был очень полезен! Всё как всегда на высоте коротко, ясно, лаконично и главное понятно! Без излишеств и без воды! Спасибо!

[@Salykin-pro]

ГуглФонд изменился и по началу было не понятно, но посмотрев до конца про ГуглФонд в новом стало всё понятно! ОГРОМНОЕ СПАСИБО!!!

[@roman.r.6102]

Ты лучший! Спасибо! не просто за уроки верстки, а за то что учишь быть свободным и независимым!

[@antonermakov4164]

Большое спасибо! Время идёт, полезность уроков не падает, а скорее выделяется среди других! Ещё благодарю!

[@baummm_9315]

Сколько инфы на Ютубе искал, и только ты и Минин объясняете доступно, по полочкам, чтоб не приходилось по сто раз пересматривать. Круто, очень полезные видео. Лайк однозначно

[@RussianVLADISLAV]

Большое спасибо тебе за твои уроки! Объясняешь всё понятно и просто. Иногда не получается повторить с первого раза из-за какой-нибудь неправильно поставленной точки... Но, благодаря этому, учишься "перелопачивать" весь код и вспоминать нюансы, что идёт только в плюс!)

[@user-hi6zy2zk6c]

Жека, это лучшее из лучшего, что я видел по шрифтам!!!!!!! Везде никакой нормальной, подробной и полезной информации по этой теме не найти просто! Я много раз пытался что-то сделать со шрифтами, но т.к. не находил мало-мальски толкового объяснения - нифига не получалось (имеется ввиду не обычный гугл фонтс, а те шрифты, которых там нет)!!! СПАСИБО Тебе огромное)))

[@user-vz5wj9rg3d]

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

[@FreelancerLifeStyle]

Спасибо!

[@progprog796]

Женя благодарю тебя за урок!!!! Желаю мира твоей семье!!!!

[@user-ie7jv4in9j]

Все с толком и расстановкой! Никакой воды! Браво, Жека!!! Годный видос!

[@FreelancerLifeStyle]

Спасибо!

[@iT_Yakuza]

Спасибо, приятная и грамотная подача без лишней воды. Лайк и успехов!

[@bulka3116]

Два года работаю фронтендщиком, забыл блять как шрифты подрубаются...

[@hliebov]

понимаю)

[@sashuk_keshuk9292]

@@hliebov не, не так, надо вот так - пАнИмАю

[@user-zr9ek1kt8p]

aboba

[@sernowodsk5963]

а какая у тебя зарплата и где живёшь,

[@user-mm1ub1yd3n]

не ну ладно там забыл @font-face css команду, но блин из googlefonts в это в школе все знают.

[@valentyndubin5441]

Урок бомба 💣💣💣. Женя, спасибо!). Как всегда годный материал. Это должен знать каждый уважающий себя разработчик🙂.

[@FreelancerLifeStyle]

Спасибо! Стараюсь давать только то что нужно для работы!

[@Rahat_Lukumov]

Спасибо тебе огромное за твои уроки, они очень информативные и легко усваиваются :D

[@XanjaevRodmam]

Ты пожалуй единственный осмысленный (но это не совсем то слово), русский ютубер. Крайне качественный контент, понятно, без лапши, хороший звук и дикция, с примерами и объяснениями не скатывающимися в MDN. Надеюсь будешь продолжать. Буду ждать, даже когда рассказываешь то что уже знаю, подчеркиваю что то новое или устаканиваю уже имеющиеся. Удачи!

[@FreelancerLifeStyle]

Спасибо большое! Такие комментарии заряжают! 👍🤟

[@user-qy4vz2id1j]

Он с Украины.....

[@gennadiymedvedev214]

, спасибо за очередное полезное видео !!! , , все новички , твои , фрилансер , фанаты

[@FreelancerLifeStyle]

Спасибо! 🤘🤘👍

[@MegaArtist21]

Всецело поддерживаю!

[@kirillusmanov3330]

Даже не думал, что подключать шрифты это так просто! Еще раз спасибо за такое грамотное и наглядное разъяснение 🔥

[@user-tt8lz6bt4b]

Большое тебе спасибо! Я делал кучу раз, смотрел другие туториалы и не получалось, глянул тебя и очень рад этому.

[@FreelancerLifeStyle]

Пожалуйста! Я рад!

[@o_antushevich]

Как всегда, прекрасное объяснение! Плюс полезные ссылки, шпаргалки и природное обаяние )

[@user-nb8ex1tq6r]

У тебя дар объяснять максимально подробно, интересно, да еще и о юморе не забывать! Три лайка! :)

[@FreelancerLifeStyle]

Спасибо!

[@user-pk3eu6su6w]

Это возможно мой первый пост на ютуб, лет за 10. Снимаю шляпу), огромное спасибо за уроки! Всех благ и долгих лет!

[@mellis_s]

Спасибо тебе за твою бесценную работу!

[@FreelancerLifeStyle]

Пожалуйста!

[@skyreg11]

Отличный видео урок. Очень хорошо объясняешь, новичкам и не только, подходит такая подача информации. За шпаргалки и ссылки отдельное спасибо. 👍

[@FreelancerLifeStyle]

Пожалуйста!

[@user-be4so3sh2f]

Урок бомба!!! Жека как всегда на высоте!!! А кися на заднем фоне просто апогей ми-ми-мишности!!)))

[@FreelancerLifeStyle]

Спасибо!

[@marinahertz3269]

Звук, подача материала-ВСЕ на высшем. Спасибо за труд!

[@FreelancerLifeStyle]

Пожалуйста!

[@daynew3920]

Всё как всегда понятно и доступно! С Женей всегда кажется всё просто, за психологическую поддержку отдельное спасибо)

[@FreelancerLifeStyle]

Я очень рад!

[@user-tj8or8it6q]

Спасибо! Тема про шрифты как бы простая, но важная. Можно запутаться в "трёх соснах" ))

[@garikmelqonyan6011]

Thank you very much for this descriptive tutorial, Freelancer. Your tutorials are of great value to those learning basic and advanced stuff.

[@alexandrisakov4735]

Как всегда все понятно, только гугл изменил интерфейс подключения, но принцип тот-же. Спасибо.

[@user-tp6ex6pz4o]

принцип тот же, но скачивает всё семейство, а не отдельно выбранные стили, раньше поудобнее было

[@VitaliiMaevskii]

Материал топ! Отличная подача) Воды 0% Спасибо, Женя!!!

[@sergiobondar2702]

благодаря этому видосу разобрался со шрифтами раз и навсегда, респект автору!

[@maksatalimov4035]

СПАСИБО! С 3 раза получилось подключить шрифты локально. Я оказывается писал путь только у src: url("../fonts/pfdintextcondpro-medium.eot"); а надо было для всех... спасибо за урок)

[@bessonniy9208]

Самый офигительный канал для обучения!

[@ostapbender8023]

Спасибо за очень ценные и качественные уроки!

[@Andrey_Mendel]

Спасибо, Женя, за отличную подачу!! Буду пробовать подключать.

[@nicolaibondarenco3817]

Мощно, однако!) Смотрю взахлёб каждый ролик. Даже отходить от компа неохота. Но нужны перерывы... В 200-граммовый стакан, помещается максимум 200мл жидкости, так и с мозгом!

[@morozoff1996]

Урок пушка, как и все остальные! Не знал про способ подключения через конвертацию, т.к. не так давно начал изучать вёрстку. Но благодаря этому уроку, теперь знаю! :D Буду теперь юзать, спасибо!

[@FreelancerLifeStyle]

Спасибо! Рад что было полезно!

[@tatianatatiana8824]

Спасибо большое за уроки! Счастья и здоровья ! :)))

[@bigthinks2290]

Спасибо за твой труд! Салют из РФ! Очень много узнал из твоих видео!!!

[@FreelancerLifeStyle]

Пожалуйста!

[@kirillhmk]

Как всегда МЕГА Полезно!!! Огромное спасибо, особенно за позитив!!!

[@EDIFIER_minecraft]

пересматриваю как пособие ) Благодарю за твою работу, о сенсей)

[@MariIloveREALmusic]

Ловите от меня обнимашкииииииии!!!!!!!!!!!!!! Безумно благодарна за то, что благодаря Вам и этому видео приостановился процесс появления седины на моих блондинистых волосах. А то я уже не знала как мне эти дизайнерские фришты подключать и куда их впихивать. ;-)

[@selleniya999]

Очень спасибо! Всё получилось. Установила 6 Prepros и заработало. Отдельное спасибо за фишечку Ctrl+h. Мммм!

[@omarovfrontend]

Жека, все грамотно и без лишней воды 👍 превосходно мужик, однозначно лайк.👏Снимай и дальше интересные видео, удачи! 😉✌️

[@user-tr3lc6qm7z]

Жека, это то, что я искала, спасибо за подробное объяснение. Годный контент! =*

[@BLGamesChannel]

Супер! Ждем следующих уроков и стрима!

[@FreelancerLifeStyle]

Спасибо! 👍

[@innakhomovska298]

як завжди, урок на висоті. Все розкладено по поличках. Дуже дякую за додатковий матеріал!

[@user-fb3pz6qt3p]

Благодарим за такой четкий урок!

[@basmong]

Очень хорошее видео. Ctrl + H команда порадовала, полезно было узнать о такой.👍

[@user-margosha1693]

Спасибо огромное за уроки!

[@irinadim]

Евгений, спасибо за урок, все очень чётко и понятно).

[@FreelancerLifeStyle]

Пожалуйста!

[@Ihorzolo]

Комментарий для продвижения. Спасибо за всё, что ты делаешь, это нереально круто!)

[@faluna2957]

Развивайся, учись, живи, а работа - в свободное время. Вот это девиз. Мне нравится.

[@hestonli6602]

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

[@FreelancerLifeStyle]

Пожалуйста! Я рад что полезно!

[@user-rn9cw1xs1x]

Супер! Спасибо большое! Очень подробно, со всеми нюансами!

[@lyalyalyalya591]

Как всегда познавательно! спасибо за уроки

[@fAndrey99sFeofanov99]

Большое спасибо тебе Женя, я считал что правилу нужно было подключать шрифты через класс по неправильному примеру *class="textstyle"* а в ксс *textstyle@font-face.* посмотрев видео....даже не знаю какие слова подобрать, НО урок полезен был для меня.

[@user-bg2pn4yz9l]

Полезный урок. Спасибо Жень!

[@FreelancerLifeStyle]

Пожалуйста!

[@user-nb3rx2cg4j]

Ну вот теперь и этот материал пригодился. СПАСИБО за Ваш труд.

[@FreelancerLifeStyle]

Пожалуйста!

[@user-oe4wh4we7i]

Спасибо. Инфа доступна, быстро и без лишней воды. 100500 лайков.

[@FreelancerLifeStyle]

Спасибо!

[@AnthonyKrut]

просто, понятно, интересно! лучше любых курсов и туториалов. спасибо! +1 подписка на ютуб и телеграмм

[@FreelancerLifeStyle]

Спасибо!

[@Sergeypolo122]

Все очень понятно и досконально расписал. Спасибо за старания)

[@FreelancerLifeStyle]

Спасибо, рад что полезно! 👍

[@oleg-on9584]

Спасибо Евгений! очень полезная информация)))

[@marsmars274]

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

[@olyashulpina2777]

В результате мы получим результат, хахаххах. Ну а если серьезно, спасибо большое за БЕСПЛАТНЫЙ и понятный курс по верстке.

[@user-km8kb3xj1p]

Большое спасибо, отличный урок!🔥

[@BLGamesChannel]

Жек, я на фрилансе третий месяц. Работаю в сфере верстки и дизайна. Так вот, хотел бы что бы ты выпустил небольшой ролик о ценах на услуги верстки. А то мне как новичку не понятно пока как оценивать работу, выполняю верстку лэндингов по 1500-2000р. Конечно с кучей косяков в коде, но внешне похожий на макет или вообще по собственному дизайну и это тоже за те же 1500-2500р. Расскажи о ценах на, думаю многим будет полезна эта инфа)

[@FreelancerLifeStyle]

Расскажу! Правда это все очень относительно, но я что-то придумаю!

[@dreamer___moon_]

А как Вы вышли на фриланс? Где взяли первый заказ?

[@johnnyrocketkite4738]

Да, мне тоже было бы интересно.

[@user-qe2pb9fg5j]

@ KazulyaX за какое количество времени примерно ты можешь сверстать простенький лендинг? Мне просто интересно.

[@BLGamesChannel]

@@user-qe2pb9fg5j ну смотря что значит простенький...как видишь я писал это почти год назад, ну если простенький в моем понимание, то несколько часов.

[@marinaermilova7912]

Привет, все еще смотрю вас и все еще круто. Спасибо большое.

[@FreelancerLifeStyle]

Супер! Я рад!

[@shinshilkamoon4635]

Самое лучшее объяснение! Спасибо большое!

[@FreelancerLifeStyle]

Пожалуйста!

[@dmytroboytchenko5768]

Все очень доступно и понятно . Большое спасибо !!!

[@FreelancerLifeStyle]

Супер, я рад!

[@user-vl3fc1pv3c]

Дуже Дякую за ще один Чудовий Урок.... Респект Величезний!!! Good Work!!! You Are Fantastic!!!

[@yuriismakota9574]

Обучаемся, развиваемся, благодаря тебе!!!

[@user-fg8pq3kk5l]

Спасибо большое, Женя!

[@user-dl1jf8vo2q]

как всегда отличный урок!!!

[@amily-sky]

Спасибо за хорошие уроки!

[@user-frond-end_dev]

шикарно! полезно! информативно! ждем следующих видео