Custom CSS: Оформление шрифтами

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

Порядок действий

Откройте Google Fonts. Пролистайте каталог и выберите шрифт, который хотите использовать на своей странице.

Нажмите кнопку "Quick-use" (quick use), и сервис покажет вам следующую страницу с опциями встраивания выбранного шрифта.

1. Стили.
Выберите только те из них, которые вам необходимы. Normal - обычное начертание шрифта, Italic - курсив, Bold - полужирный шрифт. Чем меньше стилей вы выберете, тем меньше встраивание шрифта повлияет на скорость загрузки вашей страницы.

2. Набор символов.
В подавляющем большинстве случаев здесь достаточно выбрать "Cyrillic (cyrillic)" без "Cyrillic Extended". Латинское начертание будет выбрано автоматически.

3. Добавление шрифта.
Переключитесь на вкладку "@import" и скопируйте показанный код в самый верх поля "Custom CSS" на нужной странице.

Пример кода:

4. Интеграция в CSS.
Код из этого поля следует использовать в качестве свойства для определенных объектов в том же поле "Custom CSS".

Примеры:

.charlist .field-ch2 {
font-family: 'PT Sans', sans-serif;
}

В этом примере изменяется шрифт для полного имени персонажа.

.charlist, .charlist fieldset {
font-family: 'PT Sans', sans-serif;
}

В этом примере изменяется шрифт для всего листа персонажа.

.charlist .field-ch2,
.charlist .field-ch3,
.charlist .field-off {
font-family: 'PT Sans', sans-serif;
}

В этом примере изменяется шрифт для полного и игрового имён персонажа, а также для названия игрового мира.

Миграция с предыдущего способа встраивания шрифтов

Если вы ранее использовали шрифты Philosopher, Bad Script, Russo One и Neucha, вы можете найти их в том же каталоге и встроить на свою страницу самостоятельно.

Скопируйте строчку с нужным шрифтом в самый верх поля "Custom CSS".

Оформление заработает сразу же, если вы использовали оформление через font-family. Если вы применяли блоки вида <div class="font-philosopher"></div>, то добавьте в поле "Custom CSS" следующий код в соответствии с вашим шрифтом.

/* Neucha */
.font-neucha, .hand {
font-family:'Neucha', cursive;
font-size:1.2em;
}

/* Philosopher */
.font-philosopher {
font-family:'Philosopher', cursive;
font-size:1.2em;
}

/* Bad Script */
.font-badscript {
font-family:'Bad Script', cursive;
font-size:1.3em;
line-height:1.2;
}

/* Russo One */
.font-russoone {
font-family:'Russo One', cursive;
font-size:2em;
}

После этого шрифт начнет отображаться и для блоков.

Изменения шрифта в рассказах и отыгрышах

Пользователи с премиум-аккаунтом могут изменить шрифт сразу во всех рассказах и отыгрышах, которые были опубликованы ими. Для этого используется поле "CSS на ваших страницах" в настройках профиля. Импортируйте в него шрифт, как рассказано выше.

Пример для шрифта Philosopher:

@import url(http://fonts.googleapis.com/css?family=Philosopher&subset=latin,cyrillic);
.quent .content, .log .content {
font-family:'Philosopher', cursive;
}

Замените ссылку и название шрифта на выбранный вами.

ID: 13584 | admin
Изменено: 19 марта 2018 — 22:36

Комментарии

Воздержитесь от публикации бессмысленных комментариев и ведения разговоров не по теме. Не забывайте, что вы находитесь на ролевом проекте, где больше всего ценятся литературность и грамотность.
4 июля 2013 — 17:55 WerewolfCarrie

А можно ли это использовать в логах? И вообще ЦСС коды в логах?

4 июля 2013 — 18:28 admin

Только премиум.

4 июля 2013 — 21:38 Капитан Гномереган Лурий

А можно использовать ЦСС через style в коде блоков?

4 июля 2013 — 22:06 admin

Style недоступен.

4 июля 2013 — 22:15 Капитан Гномереган Лурий

Пичальбеда.

7 июля 2013 — 13:11 smit

Я не могу понять как поменять шрифт! Вот пример... Для меня это просто какие-то иероглифы! Скажите пожалуйста конкретно куда вставлять этот шрифт - @import url(http://fonts.googleapis.com/css?family=Underdog&subset=latin,cyrillic); ???

.charlist .field-ch2 {
font-family: 'PT Sans', sans-serif;
}

Выделите например место, куда его надо вставить. Или слово в коде, которое нужно заменить на этот самый адрес шрифта. Пожалуйста!

7 июля 2013 — 13:24 Ferrian
7 июля 2013 — 14:41 smit

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

7 июля 2013 — 15:00 Капитан Гномереган Лурий

Потому что у тебя стоят слова
.field-ch2
которые ставят код только для имени. Удали их.

4 декабря 2013 — 13:45 Explosions of life! BabzaBloom

Бред, блин, какой-то. Как изменить шрифт тупо одного маленького отрывка?

4 декабря 2013 — 14:21 admin

Подключаешь шрифт.
Прописываешь в стили что-то вроде .charsheet .myfont { font-family: "Poo"; }.
Помещаешь текст в div с class="myfont".

4 декабря 2013 — 14:49 Explosions of life! BabzaBloom

Ага, спасибо. разобрался. Ща распишу штоле, а то вдруг такой же как я попадется кто.
В стили прописал в самом верху:

@import url(http://fonts.googleapis.com/css?family=Neucha&subset=latin,cyrillic);
.myfont { font-size:1.2em; font-family: neucha }

Вместо "neucha" любой нужный шрифт, размер шрифта соответственно после "font-size:". Сам текст в самом листе прописываем внутри div class="myfont"______/div не забывая сами куски кода окружить острыми скобками.
Единственное что, текст получается весь на отдельных строчках и еще одной пустой строкой сверху отделен.

4 декабря 2013 — 14:51 admin

Чтобы был на одной строке, нужно юзать span вместо div. Div - блочный элемент, а span - инлайновый.

4 декабря 2013 — 14:54 Explosions of life! BabzaBloom

О, не знал такого. Благодарствую.

18 апреля 2015 — 20:09 Ностальгирующий критик iz13bukv

А как сделать так, чтобы текст отбрасывал тень?

24 июня 2015 — 14:06 Twilight dreamer Elunesh

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

24 июня 2015 — 22:22 admin

Стили в этом гайде относятся к темам оформления Classic. Классы элементов для Ultimatum приведены в соответствующей теме, нужно просто заменять их.

31 июля 2018 — 14:56 CSS-сенсей Zildjinn

Есть инфа, что Яндекс-браузер не поддерживает эти ваши гугл-шрифты. Но надо еще проверить больше, возможно. не поддерживает только определенные

31 июля 2018 — 15:58 admin

Крайне маловероятно. Если и есть такой баг, разработчики браузера его будут срочно чинить. На google fonts очень много сайтов работает.