Гуглошрифты в дизайне ЖЖ

[yoksel]

По мотивам вопроса от random1911

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

Есть несколько сервисов, предлагающих веб-шрифты, я расскажу только про Google Web Fonts

Comments

[avis_rara_lj]

http://fonts.googleapis.com/css?family=Bad+Script

из этой ссылки скопировала все и вставила. Без изменений

[yoksel]

не вижу в коде font-family с вашим шрифтом. Смотрите 6-й пункт
и проверьте что подключили кириллический шрифт, в конце ссылки должен быть параметр указывающий на это:

...subset=latin,cyrillic

[avis_rara_lj]

вот так выглядит код:

@font-face {
font-family: 'Bad Script';
font-style: normal;
font-weight: 400;
src: local('Bad Script Regular'), local('BadScript-Regular'), url(http://themes.googleusercontent.com/static/fonts/badscript/v2/xvnrV3H3fZsc-fSw6fOJeBsxEYwM7FgeyaSgU71cLG0.woff) format('woff');
}

Что еще нужно? Вставляю в поле Custom CSS, и ничего. Что я не догоняю?

(кириллический, как видите, подключен)

[yoksel]

Цитирую пост:

6. Как использовать шрифт в коде?

Как и любой другой, задав его через font-family.

Строчка с шрифтом:

font-family: 'Kelly Slab';

Она должна находиться внутри стилей для какого-либо блока. Вот так, например, этот шрифт задаётся для всего текста в журнале:

BODY {
font-family: 'Kelly Slab', sans-serif;
}

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

Вы подключили шрифт странице, но не сказали где он должен применяться.

[avis_rara_lj]

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

[yoksel]

> во-первых, в моем стиле изначально поле для кода было пустым

Для стиля из каталога - это нормально : )
При этом следует иметь в виду, что у вас на странице уже есть стили, которые определяют размер и шрифт текста в разных местах страницы. Следовательно, просто указанный для body шрифт может не заработать, потому что перекрывается кодами оформления. Короче, нужны ещё коды, помимо тех, что есть в посте

> Во-вторых, что с "боди", что без "боди" шрифт не работает.

без body (либо других блоков) шрифт по-любому не заработает, потому что никуда не применится : ))

попробуйте вставить подключение шрифта, а ниже вот такое:

H2, H3 {
font-family: 'Bad Script';
}

Шрифт должен примениться к заголовку и подзаголовку журнала и темам записей

[avis_rara_lj]

Вот. Где затык?

[yoksel]

в коде бардак : )

@font-face с открывающей и закрывающей скобками вставляются снаружи всего и перед всем кодом.

после font-family: 'Bad Script'; не должно быть закрывающей фигурной скобки, и именно её не хватает чтобы закрыть @font-face. Без неё не будет работать всё что ниже.

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

@font-face {
font-family: 'Bad Script';
font-style: normal;
font-weight: 400;
src: local('Bad Script Regular'), local('BadScript-Regular'), url(http://themes.googleusercontent.com/static/fonts/badscript/v2/xvnrV3H3fZsc-fSw6fOJeBsxEYwM7FgeyaSgU71cLG0.woff) format('woff');
}
H2, H3 {
font-family: 'Bad Script';
}

попробуйте

[avis_rara_lj]

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

[yoksel]

Добавьте выделенное

H2, H3 {
font-family: 'Bad Script';
font-style: normal;
}

[avis_rara_lj]

Все! Большое спасибо Вам!!!!

[yoksel]

Рада что все получилось : )

[yoksel]

ничего удивительного, у вас совсем другой стиль журнала

[yoksel]

BODY, H1, H2, H3, DIV, A {
font-family: 'Bad Script' !important;
}