Как подключить сторонние шрифты в css

Узнаем как подключить шрифты CSS: инструкция

Если вы дизайнер или веб-мастер, то, скорее всего, знаете, как подключить шрифты CSS. Если же вы владелец небольшого блога и решили украсить свой ресурс и сделать его уникальным, тогда эти знания должны помочь вам. Но лучше тогда начать с самого начала, понять, что такое каскадные таблицы стилей, откуда брать шрифты и куда их устанавливать.

Описание

Итак, ответ на то, как подключить шрифт CSS к сайту, обязан начинаться с описания непосредственно формального языка. CSS – это каскадные таблицы стилей. Этот язык используют в качестве описания внешности документа. Функционирует он в паре с языком разметки.

CSS работает над тем, чтобы указывать на визуальные особенности страниц в интернете. Последние должны быть созданы на основе специальных языков разметки HTML или XHTML.

Использование

Для кого же нужен CSS? Подключать шрифты, задавать цвета, располагать блоки и прочее нужно для веб-мастеров, программистов, которые работают над созданием сайта. Главная задача каскадных таблиц стилей в том, чтобы визуально разделить структурирование. То есть если HTML формирует сплошной блок текста, то CSS помогает условно «украсить» этот блок, выделить элементы, назначить параметры.

Разделение предоставляет документу доступность, большую гибкость и возможность управления. Позволяет избавиться от сложных и повторяемых элементов содержимого.

Подключение

Прежде чем понять, как правильно подключать шрифты в CSS, нужно разобраться в том, как же каскадные таблицы стилей синхронизируются с файлом. Правила их реализуются на одноименном языке. Сама таблица стилей обзавелась правилами CSS, которые и использует. Таблицы могут находиться как в визуально редактируемом документе, так и в отдельном файлике с расширением .css. В таком файле обычно расположены только команды и пометки к ним.

Так становится понятно, что таблицы стилей можно подключать несколькими методами. Рассмотрим их дальше.

Методы

Существует четыре варианта, которые помогут подключить шрифты CSS, назначить оттенок, определить блоки и т. д. Как уже говорилось ранее, набор правил может находиться в файле, написанном на языке HTML. Но этот вариант не любят многие дизайнеры. Вызвано это тем, что тогда во всем полотне команд трудно найти описывающие параметры и справлять это все. Намного легче стили назначать в отдельном документе.

Если CSS расположены отдельно, их подключают через тег . Его нужно поместить внутрь и . В этой пометке нужно указать атрибут href, который покажет адрес к файлику с CSS.

Если команды снова-таки собраны отдельным файлом, подключаем их к веб-документу через указание @import. Его нужно писать между пометками

. Сразу после

. А четвертый способ предполагает размещение правил в основе одного из тегов, через атрибут style. Тогда правила будут затрагивать отдельный параметр, который находится в границах определенного текста.

Первые два метода ознаменовали появление внешних таблиц стилей, а вторые – внутренних.

Шрифты

Для чего вообще используют шрифты? Конечно, каждый владелец сайта желает, чтобы его ресурс выглядел не просто красиво, но и уникально. Хочется разместить на страницах особые элементы, которые могли бы выделяться среди всех. Также часто замечаешь заголовки или меню нестандартного написания.

Возникает много вопросов по этому поводу. Возможно, веб-мастера использовали картинку, нарисованную в «Фотошопе». Может быть, такой вариант появился благодаря Flash. Есть вариант, что использовали Javascript. Но как показывает практика, первый вариант неудобный и медленный, второй устаревший, а третий слишком замороченный. Чтобы создать нечто новое и красивое, можно попробовать подключить шрифты CSS.

Свойства

Стоит понимать, что в нашем случае шрифты – это не только определенный стиль, но и набор ряда свойств, которые нужны, чтобы управлять внешним видом текста. Использовать можно несколько вариантов. Назначить определенный шрифт для заголовка, абзаца, цитаты, основного текста, меню и т. д.

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

Семейства

Чтобы была возможность выбирать начертание шрифта, используют семейство font-family. Очень трудно однозначно понять, есть ли на ПК читателя вашего ресурса определенный шрифт, лучше вписать все однотипные варианты. В этом случае веб-обозреватель будет выбирать из них такой, который найдется в системе пользователя.

У этого семейства есть ряд значений. К примеру, family-name представлен названием семейства шрифтов. Значение generic-family определяет пятерку основных семейств шрифтов.

Семейство font-style отвечает за выбор начертания. Этот стиль так же наследуется, как и предыдущий. Среди значений есть обычное или наклонное начертание и курсив. Стиль font-variant отвечает за малые заглавные буквы. Для насыщенности используют font-weight и т. д. Шрифту можно назначить размер и цвет.

Нестандартное решение

Помимо стандартных шрифтов, можно использовать нестандартные решения. Обычно они более уникальны и, скорее всего, вы не заметите их на сайтах конкурентов. Для этого вам не придется использовать картинки, javascript и flash. Достаточно будет взять правило @font-face. Оно позволяет пользователю загружать внешний файл в документ.

Этот способ дает возможность подключить шрифт CSS OTF и TTF. Это особые форматы, которые неплохо справляются с подобными задачами. Проблемы могут возникнуть только с браузером Internet Explorer. Несмотря на то что он впервые начал использовать сторонние шрифты еще в 1997 году, сейчас он ставит строгие требования.

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

Форматы

Сейчас есть несколько форматов шрифтов, которые нужно знать. В противном случае вы столкнетесь с рядом несоответствий и несовместимостей. Можно подключить шрифт CSS TTF. Этот формат сейчас поддерживается всеми веб-обозревателями. Исключением может стать браузер Internet Explorer версии 8 и ниже, а также Opera Mini 5.0-8.0.

С EOT может работать только IE. Ситуация с WOFF такая же как и с TTF. А вот SVG функционирует в браузерах Chrome до 37 версии, а также Safari, iOS Safari, Android Browser. Как показывает практика, лучше всего использовать TTF. Это наиболее универсальный вариант, который редко вызывает проблемы. Он самый распространенный.

Правило

Итак, чтобы подключить шрифт одного из вышеуказанных форматов, достаточно использовать правило @font-face, о котором мы говорили ранее. Чтобы было понятно, нужно проследовать по определенному алгоритму. У вас есть файл со шрифтом font.ttf. Чтобы его использовать для основного текста, нужно для начала скопировать сам файл в папке, где находятся все файлы сайта.

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

Теперь нужно сделать так, чтобы браузер самостоятельно загрузил наш шрифт. Для этого нужно дать ему указание. Используем директиву @font-face. Команда у нас будет выглядеть следующим образом:

src: url('fonts/ font.ttf');

Команда font-family отвечает за то, чтобы шрифт получил свое имя и после его можно было использовать в написании стиля. Во второй строке имеется указание пути, по которому браузер должен найти стиль и подключить его. Это не универсальный адрес. В зависимости от того, куда вы поместили файл со шрифтом, будет отличаться и этот путь. Так вы узнаете, как подключить шрифт CSS из папки.

Подключения

Если вы не знаете, как подключить несколько шрифтов CSS, на этот счет также есть инструкция. Она позволяет указать сразу несколько файлов. К примеру, их можно подключить с десяток. Для этого нужно использовать уже вышеуказанное правило @font-face. По примеру того, как вы ранее подключали один файл из папки, точно так же с новой строки указываете ссылки на другие варианты шрифта.

Если у вас сайт построен на базе WordPress, подключить стили еще проще. Когда вам нужно заменить начертание заголовка, достаточно просто войти в панель администратора. Там поискать «Настройки темы». В разделе «Типография» будет целый список разнообразных вариантов. Нужно лишь выбрать и сохранить изменение.

Другие варианты

Очень часто для подключения шрифтов используют сервис Google Fonts. Это популярный инструмент для выбора и подключения стилей. Тут находится огромное количество наборов шрифтов. Чтобы подключить их, достаточно перейти на официальный сайт.

Перед вами появится целый список с примерами и возможностью экспериментировать. После того как вы добавите нужный стиль, не забудьте выбрать кириллицу, если ваш ресурс на русском языке. Далее можно будет выбрать размер, начертание либо сразу выбрать несколько вариантов на все случаи жизни.

После у вас будет готов код, который необходимо установить в файл CSS. В этом случае также действует правило способов добавления. К примеру, если таблицы стилей представлены отдельным документом, тогда команду отправляем на первую строку. Если же таблицы стилей у вас находятся непосредственно в файле HTML, тогда нужно его добавить в тело тегов

.

Выводы

Добавить себе на сайт новые шрифты несложно. Важно определиться сразу с методами и вариантами. В зависимости от того, на какой системе находится ваш сайт, нужно и продумывать эти действия. Если у вас самописный ресурс, вариантов в этом случае немного. Если же, например, на WordPress, тогда эта операция намного проще, чем может показаться.

Курсы javascript

спс сорнян я на бистрою руку написал з сасс я подключил но вот в чем проблема дизайнер скинул шрифт там много файлов а шрифт то один как мне ево подключить сижу пол дня думаю
https://yadi.sk/d/5dZ0EukXCgBRUw

я понимаю что есть файл , для крусива для болда , но я не могу найти для 400(обичний шрифт )
подключил через (у меня код на sass)
@font-face
font-family: 'Futura'
src: url('/fonts/futura/futura medium condensed bt.ttf')

Последний раз редактировалось misha.korolcov, 23.12.2019 в 17:58 .
23.12.2019, 18:15
Регистрация: 20.12.2009
Сообщений: 1,714
Вам нужно описать все файлы шрифта. укажите «жирность», «наклонность», «растянутость» и пр.
@font-face < font-family: Futura; src: url("/fonts/futura/Futura Book font.ttf"); font-weight: 400; font-style: normal; >@font-face < font-family: Futura; src: url("/fonts/futura/Futura Book Italic font.ttf"); font-weight: 400; font-style: italic; >@font-face < font-family: Futura; src: url("/fonts/futura/Futura-CondensedLight.otf"); font-stretch: condensed; font-weight: 300; font-style: normal; >/* и т. д. все файлы, или только те, которые нужны */ /* пример */ html
Последний раз редактировалось Malleys, 23.12.2019 в 18:30 .
23.12.2019, 18:41
Регистрация: 05.09.2019
Сообщений: 84
спс ви очень помогли
09.01.2020, 19:06
Регистрация: 19.06.2018
Сообщений: 42

со шрифтами может возникнуть проблема. Chrome может не пропустить сторонние шрифты, будут загружаться дефолтные. Поэтому лучше брать google fonts и подключать уже гугловские шрифты. Столкнулся с этой проблемой.

09.01.2020, 22:12
Регистрация: 20.12.2009
Сообщений: 1,714

Так google fonts и есть сторонние шрифты, которые загружаются со стороннего сервера! Проверь!

09.01.2020, 22:19
Регистрация: 19.06.2018
Сообщений: 42
10.01.2020, 05:05
Регистрация: 20.12.2009
Сообщений: 1,714

И вообще это очень, очень, очень плохая идея тянуть ресурсы с чужого сервера (я не говорю про CDN и общественные API, которые как раз таки предназначены для этого) — эти ресурсы могут быть в любое время перемещены, удалены, переименованы, и то, что у тебя что-то перестанет работать, это твоя вина. Никто ничем не будет должен тебе быть обязанным!

Скачай файл к себе на сервер, и никаких проблем с Access-Control-Allow-Origin не будет!

Как правильно подключать шрифты для сайта

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

Недавно я описывал способ подключения шрифтов при помощи сервиса google fonts, но там мы были ограничены тем набором, который предлагает Google, а теперь можно будет использовать любой имеющийся у вас шрифт.

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

Конвертация шрифтов

Подключение шрифтов к сайту, на самом деле, не такое уж и сложное занятие. Но проблема возникает в том, что разным браузерам необходимы разные форматы шрифтов.

Так, одни понимает "woff", другой "ttf", а третьему "eof" подавай. Поэтому, если заказчик серьезный, то он передает на верстку макет и прилагает все форматы шрифтов, но это бывает очень редко. И нам, верстальщикам, зачастую, приходится самим выкручиваться из ситуации.

В начале своей работы в интернете для меня это было существенной проблемой, и я искал все форматы одного и того же шрифта вручную, но потом наткнулся на сервисы, конвертирующие из одного формата, во все необходимые для Web(а). Например:

• onlinefontconverter.com,
• fontsquirrel.com,
• font2web.com

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

Первым делом, давайте назовем его осмысленно, ведь после скачивания он назывался "12236". Я переименую его в lazer, так будет удобнее с ним работать.

Теперь, давайте перейдем на сайт "onlinefontconverter" и выбираем необходимые форматы.

Затем жмем "select font(s)" и выбираем шрифт, которые хотим сконвертировать в указанные форматы. После загрузки жмем "Done", затем "Save your font" и "Download attachment".

Начнется скачивание архива.

Иногда, может возникнуть ошибка. В таком случае просто повторите процедуру.

Распакуйте архив и переместите шрифты в свой проект. Обычно, это папка "fonts".

Как видите, не все форматы получили такое же имя, которое мы задали немного ранее. Давайте переименуем.

Теперь займемся подключением к сайту. Откройте CSS-файл, который подключен к проекту и в самом начале подключите шрифты следующим образом.

Для более удобного копирования, вот код:

@font-face < font-family: 'lazer'; src: url('../fonts/lazer.eot'); src: url('../fonts/lazer.woff2') format('woff2'), url('../fonts/lazer.eot?#iefix') format('embedded-opentype'), url('../fonts/lazer.woff') format('woff'), url('../fonts/lazer.ttf') format('truetype'), url('../fonts/lazer.svg#lazer') format('svg'); font-weight: normal; font-style: normal; >

В "font-family" придумали удобное для подключения имя. В моем случае я так и оставил "lazer", теперь в любом месте, где понадобится использование этого шрифта, нужно просто указать его имя.

Если по какой-то причине шрифт не применился, то в первую очередь проверьте пути подключения. В 99% случаев проблема именно в этом.

На этом - все. Вот так просто подключить свои шрифты при помощи CSS. Но будьте внимательны, иногда они могут очень много весить, и тогда сайт будет грузиться намного дольше. Внимательно следите за этим показателем.

Добавление собственных шрифтов

AMP-страницы не могут включать внешние таблицы стилей, за исключением внешних шрифтов. Вы можете встроить внешние шрифты на свою страницу двумя способами:

1. Через : только для разрешенных поставщиков шрифтов.
2. Через @font-face (без ограничений, разрешены все шрифты)

1. Использование

Используйте (обычно в теге head страницы), например так:

link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Tangerine"> 

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

• Typography.com: https://cloud.typography.com
• Fonts.com: https://fast.fonts.net
• Google Fonts: https://fonts.googleapis.com
• Typekit: https://use.typekit.net
• Font Awesome: https://maxcdn.bootstrapcdn.com, https://use.fontawesome.com.

2. Использование @font-face

В качестве альтернативы вы можете использовать @font-face в своей таблице стилей AMP:

style amp-custom> @font-face  font-family: "Bitstream Vera Serif Bold"; src: url("https://somedomain.org/VeraSeBd.ttf"); > body  font-family: "Bitstream Vera Serif Bold", serif; > style> 

ПРИМЕЧАНИЕ. Шрифты, добавленные посредством @font-face , должны загружаться по схеме HTTP или HTTPS.

Written by @pbakaus

Конечно же, этот сайт сделан с помощью AMP!

Подписывайтесь на нас

Обзор

Документы

Сообщество

OpenJS Foundation

События

Брендовые материалы AMP

• Terms of Use
• Политика конфиденциальности
• Cookie Policy

© OpenJS Foundation and AMP Project contributors. All rights reserved. The OpenJS Foundation has registered trademarks and uses trademarks. For a list of trademarks of the OpenJS Foundation, please see our Trademark Policy and Trademark List. Trademarks and logos not indicated on the list of OpenJS Foundation trademarks are trademarks™ or registered® trademarks of their respective holders. Use of them does not imply any affiliation with or endorsement by them.

The services available at cdn.ampproject.org are provided by Google and the respective privacy policy applies.

We use cookies to understand how you use our site and to improve your experience. By continuing to use our site, you accept our use of cookies and privacy policy.