Как правильно подключить шрифт к сайту через CSS

Подписаться 3,7 тыс.

Просмотров 51 тыс.

50% 1

Ссылки на материалы из видео:
Шрифт + файл CSS на Яндекс.Диск: yadi.sk/d/NX76ObIC3LB8Pq
Шаблон из видео целиком на GitHub: github.com/insp1/html-template
Видео о шаблоне: • HTML-шаблон для быстро...
Бесплатные шрифты:
fonts.google.com/
fontstorage.com/
Этот видеоурок по веб-разработке посвящен тому, как подключить нестандартный, свой шрифт на сайт, через CSS. В уроке показано, как подключить шрифт Roboto, но по такой же схеме можно подключить и любой другой шрифт на сайт.
Как создать сайт с нуля, своими руками? Как начать верстать сайт? Как начать программировать? Как заработать на своем сайте? Подпишись на канал и узнаешь много полезного о такой деятельности, как создание сайтов:
/ @aleksei_vavilov

Наука

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

17 июл 2017

Ссылка:

Скачать:

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

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 48

@user-ph4js4lu2y 3 года назад

Ну оооочень понятно обьяснили, жаль только себе....

@user-jr2lv1tx7x 6 лет назад

Весьма грамотный и информативный урок. Именно то, что я искал!

@stasalsakhanov435 4 года назад

Видео ни о чем. Ну скачиваю я шрифты с google fonts. Так скачивается только одно начертание для фотошопа, а остальные форматы где брать? У тебя видео от июля 2017 года, а дата скачивания шрифтов, май 2016 год. Это как понимать?

@online-df6fo 6 лет назад

Все очень здорово и понятно рассказал, спасибо за подробную информацию!

@100_chistyh_straniz 6 лет назад

Не каждому дано и по силам заниматься веб-разработкой и поэтому я завидую белой завистью людям ,которые могут сделать это.Хорошо,когда ты можешь создать себе такой сайт,который тебя устраивает по всем параметрам и заполнять его на своё усмотрение. Лайк.

@andriygudiy 6 лет назад

А на сегодняшний день не все могут заниматься веб разработкой. Точнее не только лишь все. Мало кто может это делать)

@user-pk1ri7dj5u 6 лет назад

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

@misteradmin530 5 лет назад

спасибо огромное

@pnch.1612 6 лет назад

Информация слегка усложненная, но если посидеть и раз-два полностью посмотреть и послушать внимательно, сразу стает все ясно!

@Anna_Lovatto 3 года назад

Спасибо. Ваше видео очень меня выручило

@mikhailsakharov7904 2 года назад

Спасибо!

@gogo-jr3im 2 года назад

Спасибо за видео!

@user-jf2ic3up1k 2 года назад

спасибо за видео!

@Vip-kw9id 5 лет назад

Сколько не смотрел других ребят у Алексея материал по шрифтам самый понятный

@Eduard02834 4 года назад

spasibo bolshoe

@user-sr9mi7po2j 6 лет назад

Да.. Для новичка это темный лес. Что бы в этом разобраться нужно образование. А Вы Алексей молодец! Видно, что владеете темой. Успехов Вам!

@jentwmen Год назад

На самом деле сейчас такое время, когда в этом разбираются и восьмиклассники, тут главное желание и самообучение

@mr.Qbz. Год назад

@@jentwmen гений так 5 лет прошёл

@jentwmen Год назад

@@mr.Qbz. а какая разница через сколько я ответила на комментарий, в интернете это не имеет значения, и 5 лет назад школьники точно также в этом уже разбирались

@mr.Qbz. Год назад

@@jentwmen нет походу сам ты тупой то время веб только развивалась не было учебного программы всё коды писалось в ручную без т9

@jentwmen Год назад

@@mr.Qbz. пишешь бред, ущемился с того, что школьники способны это изучать, а ты нет, или что? Веб развивается с 90х годов и 5 лет не так уж много, тогда уже вышла последняя версия html, и существовало множество учебных материалов, также в Ютубе их можно легко найти, если ты начал интересоваться этим только сейчас, это не значит, что этих знаний не существовало раньше.

@user-wp8ji1jr5z 6 лет назад

я скачал шрифт с гугла и там только файлы .ttf и все в куче, а у вас в каждой попке еще 3 вида файлов и вот где эти дополнительные файлы брать и как разобраться с распределением по отдельным папкам?

@Poriks 5 лет назад

та же проблема. оба сервиса шрифтов, оставленных в описании, отдают только ttf формат. Решил проблему с помощью сервиса www.font2web.com/

@ulbolsynzh 4 года назад

@@Poriks а как вот взять другие форматы?

@iklein3906 4 года назад

Дело было так, сначало выучи html за месяц, выучи html за неделю, выучи html за день, выучи html за час, выучи html за 5 минут, я боюсь спросить , виде есть где " выучи html по сочетании клавиш за 3 секунды?

@sailor_video 6 лет назад

Алексей, ваш текст на экране надо с лупой рассматривать, даже если смотреть в полно-экранном режиме

@vip51000 4 года назад

@font-face { font-family: pt-sans; src: url("Fonturi/pt-sans.woff2") format("woff2"), url("Fonturi/pt-sans.woff") format("woff"); } в чем может быть ошибка ? путь указал правильно

@spiritofanime8531 4 года назад

запятая ! нужно так : src: url("Fonturi/pt-sans.woff2") format("woff2"); src: url("Fonturi/pt-sans.woff") format("woff");

@user-wp8ji1jr5z 6 лет назад

У меня получилось вставить этот шрифт в сайт благо именно он мне и был нужен, но я не понял где ты взял прочие файлы кроме .ttf потому что с fonts.google.com/ даёт архив только с файлами .ttf и еще не очень понятно как их раскладывать по папкам :)) ну с папками и их названиями я еще разберусь со свойством @font-face тоже а вот где взять файлы прочих форматов и особенно меня интересует .ini фаил.. что это вообще и где его брать, вот это непонятно. Этой инфы не хватает в видео.

@ulbolsynzh 4 года назад

вот вот почему у него много несколько формат одного шрифта,откуда взять их

@excelmultik 5 лет назад

Как подключить шрифты через мобильных устройство?

@uktamkhamidov711 4 года назад

у меня не работает((

@andriygudiy 6 лет назад

ПОЧЕМУ ТУТ ТАК МАЛО ЛАЙКОВ!!!

@user-ki1rb8xj5n 5 лет назад

Информация конечно нужная, но не для чайников, коим я являюсь. То есть не пошагово.

@TinTaBraSS777 3 года назад

на втором сайте не гугл что ты написал вообще ничего нельзя скачать )

@Alex-gn6xb 5 лет назад

еще мельче можно? а то видно!

@elemeNtk0 4 года назад

ВИДЕО НЕАКТУАЛЬНО!!!! Забаньте кто-нибудь видео за неактуальность. Уже в 2015 можно было подключать только woff2 и woff, а не вот этот древний метод google-webfonts-helper.herokuapp.com/ Читайте там как подключать...

@TinTaBraSS777 3 года назад

нихренищи непонял )