Как добавить несколько шрифтов в css

Как подключить два шрифта через CSS?

Как подключить два шрифта через CSS? Нужно подключить ArialNarrow Bold и AGAalenBold Roman. И еще вопрос где можно найти эти шрифты?

Отслеживать
задан 29 апр 2014 в 7:40

Скачал оба шрифта с расширением файла ttf. Пытаюсь их конвертировать на сайте fontsquirrel.com/tools/webfont-generator, но выдает ошибку The font is corrupt and can not be converted.

29 апр 2014 в 7:57

3 ответа 3

Сортировка: Сброс на вариант по умолчанию

@font-face < font-family: ArialNarrow Bold; src: url(ArialNarrowBold.ttf); >@font-face < font-family: AGAalenBold Roman; src: url(AGAalenBoldRoman.ttf); >.class1 < font-family: "ArialNarrow Bold"; >.class2

Отслеживать
ответ дан 29 апр 2014 в 7:55
19.9k 5 5 золотых знаков 44 44 серебряных знака 61 61 бронзовый знак

шрифты нужно поискать в интрнете для конвертации можно использовать:

@font-face < font-family: 'шрифт1'; src: url('шрифт1.eot'); src: url('шрифт1.eot?#iefix') format('embedded-opentype'), url('шрифт1.woff') format('woff'), url('шрифт1.ttf') format('truetype'), url('шрифт1.svg#cuprumffuregular') format('svg'); font-weight: normal; font-style: normal; >@font-face

Отслеживать
ответ дан 29 апр 2014 в 7:55
27.6k 5 5 золотых знаков 35 35 серебряных знаков 65 65 бронзовых знаков

29 апр 2014 в 8:00
Попробуйте другим сервисом
29 апр 2014 в 8:19

@font-face < font-family: "Font_name"; src: url("Fontname.woff2") format("woff2"), url("Fontname.woff") format("woff"); font-weight: 400; font-style: normal; >@font-face

Отслеживать
ответ дан 19 июн 2018 в 17:18

шрифты
css

Важное на Мете

Подписаться на ленту

Лента вопроса

Для подписки на ленту скопируйте и вставьте эту ссылку в вашу программу для чтения RSS.

Нажимая «Принять все файлы cookie» вы соглашаетесь, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в отношении файлов cookie.

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

Попалась верстка макета к которому прилагается аж 12 файлов .ttf одного и того же шрифта, но с разным начертанием. Шрифт PFBeauSansPro и куча его вариантов Regular, Bold, Italic, italicBold и т.д.

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

@font-face < font-family: BeauSans; src: url(fonts/PFBeauSansPro-Black.ttf); >/*И повторяем этот кусок кода изменяя гарнитуру и имя файла*/

/*Либо можно использовать такой вариант?*/ @font-face < font-family: BeauSans; src: url(fonts/PFBeauSansPro-Black.ttf); src: url(fonts/PFBeauSansPro-BlackItalic.ttf); src: url(fonts/PFBeauSansPro-BlackItalic.ttf); /*И так далее. */ >

Как будет правильно?

Вопрос задан более трёх лет назад
70453 просмотра

Комментировать
Решения вопроса 2

Веб-разработчик

@font-face < font-family: "PT Serif"; src: url("../fonts/ptserif-normal.eot"); src: local('☺'), url("../fonts/ptserif-normal.eot?#iefix") format("embedded-opentype"), url("../fonts/ptserif-normal.woff") format("woff"), url("../fonts/ptserif-normal.ttf") format("truetype"), url("../fonts/ptserif-normal.svg#PT Serif") format("svg"); font-weight: normal; font-style: normal; >@font-face < font-family: "PT Serif"; src: url("../fonts/ptserif-bold.eot"); src: local('☺'), url("../fonts/ptserif-bold.eot?#iefix") format("embedded-opentype"), url("../fonts/ptserif-bold.woff") format("woff"), url("../fonts/ptserif-bold.ttf") format("truetype"), url("../fonts/ptserif-bold.svg#PT Serif") format("svg"); font-weight: bold; font-style: normal; >@font-face < font-family: "PT Serif"; src: url("../fonts/ptserif-italic.eot"); src: local('☺'), url("../fonts/ptserif-italic.eot?#iefix") format("embedded-opentype"), url("../fonts/ptserif-italic.woff") format("woff"), url("../fonts/ptserif-italic.ttf") format("truetype"), url("../fonts/ptserif-italic.svg#PT Serif") format("svg"); font-weight: normal; font-style: italic; >@font-face < font-family: "PT Serif"; src: url("../fonts/ptserif-bolditalic.eot"); src: local('☺'), url("../fonts/ptserif-bolditalic.eot?#iefix") format("embedded-opentype"), url("../fonts/ptserif-bolditalic.woff") format("woff"), url("../fonts/ptserif-bolditalic.ttf") format("truetype"), url("../fonts/ptserif-bolditalic.svg#PT Serif") format("svg"); font-weight: bold; font-style: italic; >

В font-weight можно использовать не ключевые слова, а цифры

100 Ultra Light
200 Thin
300 Light
400 Regular, Normal
500 Roman
600 Medium, SemiBold
700 Bold
800 Heavy, ExtraBold
900 Black

При использовании указывать font-weight и font-style, в зависимости от их комбинаций будет выбран нужный файл шрифта

UPD: Если вам не нужно поддерживать совсем уж древние браузеры IE8 (eot) и Android 4.3 (ttf) то достаточно подключить только woff и woff2.
Svg нужен для Safari версии ниже 5.1

Подробнее смотрите на caniuse.com

@font-face < font-family: 'Web font'; src: url('webfont.woff2') format('woff2'), url('webfont.ttf') format('truetype'), /* Только если нужна поддержка старых Android, иначе закомментировать */ url('webfont.woff') format('woff'); font-weight: normal; font-style: normal; >

CSS: Семейство шрифта

Многим знакома фраза «Поиграйся со шрифтами» — великая мантра, когда внешний вид текста не устраивает. Для того, чтобы указать шрифт, используется правило font-family , позволяющее выбрать один или несколько шрифтов, которые будут использоваться в документе.

 .new-font Шрифты подключаются из тех, которые установлены в вашей системе. По этой причине стоит выбирать «распространённые шрифты», так как у другого пользователя их может не быть. Помимо этого возможно подключать шрифты со сторонних сервисов, таких как Google Fonts, или загружать их непосредственно на ваш сервер, на котором расположен сайт.

Наиболее распространёнными шрифтами являются:

Times New Roman
Arial
Tahoma
Verdana
Courier New

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

При подключении стилей хорошей практикой является добавление универсального семейства шрифта в правило font-family . Таких семейств на данный момент 5:

serif — шрифты с засечками (антиквы). Ярким представителем таких шрифтов является Times New Roman
sans-serif — шрифты без засечек (гротеск). Наиболее знакомыми такими шрифтами являются Arial и Verdana
cursive — курсивные шрифты
fantasy — декоративные шрифты. Это семейство используется реже всего. Дело в том, что декоративные шрифты слишком разные, чтобы они были взаимозаменяемые
monospace — моноширинные шрифты. К ним относятся шрифты, в которых все символы имеют одинаковую ширину. Очень часто их используют программисты в текстовых редакторах

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

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

 .new-font Теперь, если у пользователя в системе нет шрифтов Arial или Futura, будет выбран системный шрифт без засечек.

Задание

Добавьте в редактор параграф с классом verdana-text и установите для него шрифт Verdana. Стили запишите в теге . Не забудьте указать универсальное семейство шрифтов — шрифты без засечек

Читать:

Где хранятся классы битрикс

Упражнение не проходит проверку — что делать? ��

Если вы зашли в тупик, то самое время задать вопрос в «Обсуждениях». Как правильно задать вопрос:

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

В моей среде код работает, а здесь нет ��

Тесты устроены таким образом, что они проверяют решение разными способами и на разных данных. Часто решение работает с одними входными данными, но не работает с другими. Чтобы разобраться с этим моментом, изучите вкладку «Тесты» и внимательно посмотрите на вывод ошибок, в котором есть подсказки.

Мой код отличается от решения учителя ��

Это нормально ��, в программировании одну задачу можно выполнить множеством способов. Если ваш код прошел проверку, то он соответствует условиям задачи.

В редких случаях бывает, что решение подогнано под тесты, но это видно сразу.

Прочитал урок — ничего не понятно ��

Создавать обучающие материалы, понятные для всех без исключения, довольно сложно. Мы очень стараемся, но всегда есть что улучшать. Если вы встретили материал, который вам непонятен, опишите проблему в «Обсуждениях». Идеально, если вы сформулируете непонятные моменты в виде вопросов. Обычно нам нужно несколько дней для внесения правок.

Кстати, вы тоже можете участвовать в улучшении курсов: внизу есть ссылка на исходный код уроков, который можно править прямо из браузера.

Полезное

Семейство шрифтов всегда указывается самым последним

font — family

С помощью font — family можно задать семейство шрифта, которым будет написан текст. Можно прописать конкретный шрифт, например «Arial». А можно задать желаемый тип шрифта: например, с засечками serif или без засечек sans — serif .

Пример

Скопировать ссылку «Пример» Скопировано

Допустим, мы хотим, чтобы текст был набран шрифтом PT Sans. Если такой шрифт не установлен у пользователя, то пускай откроется в Arial. Если и такого нет, то пусть будет стандартный шрифт без засечек:

 body  font-family: "PT Sans", "Arial", sans-serif;> body  font-family: "PT Sans", "Arial", sans-serif; >

Как понять

Скопировать ссылку «Как понять» Скопировано

«PT Sans», «Arial», «Times New Roman» — это примеры семейств шрифтов. С помощью font — family можно задать любой шрифт для любого текстового элемента на странице.

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

Как пишется

Скопировать ссылку «Как пишется» Скопировано

Обычно в font — family задают сразу несколько шрифтов, перечисляя их через запятую. На первом месте ставят самый редкий шрифт из тех, что хотят использовать для этого элемента. Затем — похожий, но более распространённый шрифт. В самом конце — желаемый тип шрифта. Браузер проходит по списку слева направо и использует первый найденный на компьютере шрифт.

Значения

Скопировать ссылку «Значения» Скопировано

Имя шрифта — шрифт, который будет использоваться на странице. Например, Times или Helvetica.
Семейство шрифтов — прописывается последним на случай, если ни одного из шрифтов нет на компьютере пользователя:
- serif — шрифт с засечками, например, «Times».
- sans — serif — шрифт без засечек, например, «Arial».
- monospace — моноширинные шрифты с одинаковой шириной каждого символа. Похожи на текст, набранный на печатной машинке. Например, шрифт «Courier».
- cursive — курсивный шрифт или italic.
- fantasy — декоративный шрифт.
- system — ui — использует стандартный шрифт на устройстве пользователя.
Ещё пример

Скопировать ссылку «Ещё пример» Скопировано

Зададим разные шрифты для заголовков и для основного текста:
```
 Этот заголовок написан шрифтом Roboto без засечекА параграф — шрифтом Roboto Slab с засечками.  Для второго заголовка установлено семейство sans-serif Семейство шрифтов этого параграфа указано как serif — это шрифт с засечками, установленный в системе по умолчанию.  h1>Этот заголовок написан шрифтом Roboto без засечекh1> p>А параграф — шрифтом Roboto Slab с засечками.p> div class="generic"> h2>Для второго заголовка установлено семейство sans-serifh2> p>Семейство шрифтов этого параграфа указано как serif — это шрифт с засечками, установленный в системе по умолчанию.p> div>      
```
```
 h1  font-family: Roboto, Geneva, Arial, Helvetica, sans-serif;> p  font-family: "Roboto Slab", Georgia, "Times New Roman", Times, serif;> .generic h2  font-family: sans-serif;> .generic p  font-family: serif;> h1  font-family: Roboto, Geneva, Arial, Helvetica, sans-serif; > p  font-family: "Roboto Slab", Georgia, "Times New Roman", Times, serif; > .generic h2  font-family: sans-serif; > .generic p  font-family: serif; >      
```
Подсказки

Скопировать ссылку «Подсказки» Скопировано

�� Мы советуем использовать не больше трёх разных семейств шрифтов на одной странице. Например, один для заголовков, другой для обычного текста и третий для подписей.

�� Не забывай добавлять желаемый тип шрифта ( serif , sans — serif или другой), так как нет гарантий, что нужный вам шрифт найдётся на компьютере пользователя.

На практике

Скопировать ссылку «На практике» Скопировано

Алёна Батицкая советует

Скопировать ссылку «Алёна Батицкая советует» Скопировано

�� Если в макете используется один из нестандартных шрифтов, то вам потребуется подключить его в свою вёрстку при помощи свойства @font — face .

�� Всегда указывай несколько вариантов шрифтов в следующем порядке:
- Кастомный шрифт;
- Стандартный системный шрифт;
- Семейство шрифтов.
Это нужно на случай, если кастомный шрифт по какой-то причине не загрузился на устройстве пользователя. Если не указывать альтернативу (так называемый фолбэк), то при незагрузке кастомного шрифта дизайн страницы скорее всего полностью сломается. Если указать альтернативный системный шрифт, максимально близкий к кастомному по внешнему виду, то дизайн останется прежним ��

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

Как подключить два шрифта через CSS?

3 ответа 3

Похожие

Подписаться на ленту

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

CSS: Семейство шрифта

Задание

Полезное

font — family

Пример

Как понять

Как пишется

Значения

Ещё пример

Этот заголовок написан шрифтом Roboto без засечек

Для второго заголовка установлено семейство sans-serif

Подсказки

На практике

Алёна Батицкая советует

Похожие записи