Нестандартные шрифты в Blogger для оформления блога. Как установить нестандартный кириллический шрифт в WordPress

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

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

Меры предосторожности для тех, кто не уверен

• Для начала определимся? что речь идет о темах (шаблонах) WordPress. Если тема блога установлена на этот движок, то это статья для Вас.
• Если Вы не уверены в своих силах, лучше сначала поэкспериментировать на тестовом поддомене. Убедившись в своей дееспособности, можно перенести навык на основной сайт. Впрочем, действия, которые требуются для того, чтобы изменить шрифт заголовка сайта , настолько просты, что напортачить там сложно. Лично я все всегда сначала делаю на тестовом. Чуть больше времени, но надежнее.
• В случае, если сайт все-таки сломался, читайте, >>. Но, если все делать аккуратно, никаких катастроф не произойдет.

В разных шаблонах строчка кода может выглядеть по-разному. Чтобы уточнить, как в вашем шаблоне, изучите статью, . Там есть подробное видео, как найти любую строчку кода, — после чего вы сможете вносить практически любые изменения в шаблон своего сайта. Навык освободит вас от необходимости рыться в кодах и развяжет руки.

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

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

А если времени разбираться нет, но хочется быстрее На все про все нам понадобится наш сайт и программа word (для подбора шрифта).

1. Входим в админпанель своего сайта. Далее, в левом сайдбаре находим Консоль — Внешний вид — Редактор .
2. В правой части находим Список стилей (style.css) и открываем его.
3. Заголовок сайта — это header h1 . Находится ближе к началу. Чтобы не искать глазами, можно нажать Ctrl+F — появится строка поиска. Наберите в поиске. У меня эта часть выглядит так:

Верхний квадрат: строка изменения шрифта.

Нижний квадрат: строка изменения размера шрифта.

Позже мы еще поменяем размер и цвет шрифта, если есть такая необходимость.

Как изменить шрифт заголовка сайта

1. Теперь открываем чистый документ Word, копируем на главной странице сайта название и переносим его в вордовский документ, выделяем и начинаем играться с разными шрифтами. Находятся они на верхней панели в левом углу. Почему удобно делать именно в этой программе — потому что сразу видны все изменения шрифта в Вашем названии. Выбирайте шрифт, который будет сочетаться с названием Вашего сайта. Шрифт, который Вам безусловно понравится. Когда выберите, скопируйте в Worde название шрифта.
2. Возвращаемся в админпанель сайта. В строку изменения шрифта (на рис. — верхний синий квадрат) вносим название выбранного шрифта вместо того, что стоит по умолчанию.
3. Внизу страницы нажимаем «Обновить файл».
4. Переходим на сайт и смотрим, хорошо ли встал шрифт в общем контексте. Если нет, возвращаемся в Word и выбираем другой. Все.

Как изменить размер шрифта заголовка сайта

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

Как изменить цвет шрифта заголовка сайта

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

Чтобы подобрать цвет, можно использовать одну из опций темы: Консоль — Внешний вид — Фон . В строке «Цвет фона» можно выбрать цвет, скопировать его буквенно-числовое значение и вставить вместо того, что был (в моем случае #11006а). Изменения сохранить. Переходим на сайт и любуемся.

Итак, чтобы изменить шрифт, цвет и размер , нужно внести изменения всего в 3 строчки редактора. При небольшом навыке занимает очень мало времени.

Красивый, хорошо читаемый заголовок,

сочетающийся с общим духом темы,

сделает Ваш блог более привлекательным и запоминающимся.

Экспериментируйте, выбирайте то, что Вам по душе!

P.S. Когда я вношу даже незначительные изменения в файлы редактора темы, то на всякий случай копирую измененный текст целиком в блокнот — в папку, где хранится zip установленной на моем сайте темы. В том случае, если сайт вдруг сломается и придет необходимость переустанавливать тему, у меня сохранены все измененные на мой вкус файлы. Останется только при переустановке wordpress или темы перенести файлы в соответствующие папки на хостинге.

В следующих статьях, по ходу преобразования моего блога, мы будем так же легко менять цвет фона, шрифты заголовков в рубриках, статьях, цвет ссылок — словом, любых элементов

1. Зайдите в каталог и выберите себе шрифт. Весь каталог шрифтов вы можете найти здесь: google.com/webfonts

Choose the character sets you want:

Latin (latin)
Latin Extended (latin-ext)
Cyrillic (cyrillic)

Выберите "Latin" и "Cyrillic". Остальные варианты советую не выбирать, так как в этом случае страница будет долго грузиться, а иногда шрифт просто не будет работать.

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

3.1 Добавьте "/" в конце кода перед ">", а также если в вашем коде есть этот символ - "&" вместо него поставьте "&".

Установка

1. Зайдите на свой аккаунт в blogger.com.
Далее зайдите в Дизайн ---> Изменить HTML

2. С помощью поиска (Ctrl+F) вам надо будет найти эту строку в вашем шаблоне:

3. После неё добавьте код шрифта и сохраните шаблон.
Использование

Вы можете использовать установленный шрифт в любом месте в вашем блоге. К примеру если вы желаете чтобы "название сайта" имело этот шрифт, тогда вам надо:

1. Зайти в Дизайн ---> Изменить HTML

2. С помощью поиска (Ctrl+F) найти эту строку в вашем шаблоне:
header h1

#header h1 {
line-height:1.2em;
text-transform:uppercase;
letter-spacing:.1em;
}

2.2 Если в вашем коде "header h1" нет строки font-family тогда добавьте её:
font-family:Marck Script, Georgia, serif;

2.2.1 Вместо "Marck Script" - поставьте название вашего шрифта. Название можно узнать на странице шрифта, в четвёртом пункте.
2.3 Вот и всё. Также можете попробовать добавить шрифт и в другие место в вашем блоге, к примеру в "sidebar", "post-body" или "post h2".

Ирина Кудрявцева

Justus показали один вариант, хочется увидеть и еще возможные шрифты!

https://www.blogger.com/profile/03714046357448661094

Ирина Кудрявцева, к сожалению это единственный из "нестандартных" шрифтов, которые я встретил (на Блогспот). Если, кто то знает другие шрифты, с удовольствием ознакомлюсь!

Si.A.A.

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

Si.A.A., надо подумать! Дайте время до завтра!

https://www.blogger.com/profile/13746790384341325111

Si.A.A.

Уговорили. Но только один день. ;)

https://www.blogger.com/profile/06106872544132460143

Si.A.A., ваша заявка выполнена! В конце поста разместил мануал по установке. Простое решение не получилось, придется "поковыряться" в шаблоне! Кроме того неизвестно, как это отразится на общем дизайне блога?

https://www.blogger.com/profile/13746790384341325111

MagentaWAVE

"к сожалению это единственный из "нестандартных" шрифтов, которые я встретил (на Блогспот). Если, кто то знает другие шрифты, с удовольствием ознакомлюсь! "
Позволю себе наглость спамнуть ссылку,
http://www.magentawave.com/2013/01/connect-and-use-web-fonts.html
Совсем недавно об этих делах воял,

https://www.blogger.com/profile/05069681985675276048

MagentaWAVE, спасибо, размещу вашу ссылку в конце поста, для опытных читателей!

https://www.blogger.com/profile/13746790384341325111

Si.A.A.

Спасибо, но страшновато после предупреждения "как это скажется на дизайне блога".

https://www.blogger.com/profile/06106872544132460143

Si.A.A., я имел ввиду, что помимо текста, шрифт попадет еще кое куда! Куда...? Это будет видно только после инсталляции кода! Не думаю, что будет хуже. В любом случае, вы можете вернуть все обратно!

https://www.blogger.com/profile/13746790384341325111

Marina Kouyarova

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

https://www.blogger.com/profile/05106932572444773407

ОЛЕНА САВИЦКАЯ

Простите пожалуйста-самого чайного чайника-а где находится редактор текста? в упор не вижу...и где HTML шаблона-это там-где-когда нажала на -шаблон-рядом-изменить HTML? но если это там-вообще не вижу про то-о чем вы пишите-.да ну что ж это такоето-ничего не получается у меня..и листья падали падали-а теперь уже второй день не падают..куда они делись то?!

https://www.blogger.com/profile/04422214255958505740

ОЛЕНА САВИЦКАЯ, вот например, набрал Гугл и нашел сразу статью для вас с видео:
http://mlmvsem.blogspot.de/2012/01/blogspot.html

https://www.blogger.com/profile/13746790384341325111

Кристина Азарова

Где вы такие теги видели! Если пишите стаью, то пишите,что для стандартных шаблонов, в самописанных там нет такого ничего,и работать не будет.

https://www.blogger.com/profile/05518665193214781905

Кристина Азарова, теги взяты из стандартных шаблонов и они там ЕСТЬ, а вот найти их в новом "Изменить HTML" очень нелегко!

https://www.blogger.com/profile/13746790384341325111

Владимир Телевной

На сайте есть выбор вэб шрифтов, ток как его применять я так и не понял, http://www.google.com/fonts/

Владимир Телевной

Если бы вы как о подсказали. На сайте делается ссылки и скрипты но что и куда вставлять...

https://www.blogger.com/profile/16497829425382739102

Ирина Бусурманова

Хочу каллиграфический почерк, но это для чайника просто УЖАС!

https://www.blogger.com/profile/10826754143079211427

Долгие годы пользователи интернета, а так же создатели сайтов мучились из-за того что могли использовать лишь несколько шрифтов на своих ресурсах.
Сегодня же Google запустил новый сервис “Google web fonts” со слоганом – “Making the Web Beautiful!” (Делая Web красивым). Этот сервис поможет вам использовать различные шрифты из Google директорий в вашем блоге, либо на сайте без всяких регистраций и подписей. Использование шрифтов не имеет никаких ограничений. Сделайте свой блог красивее прямо сейчас. Итак приступаем…

Шаг 1: Сохраните резервную копию шаблона.
Этот шаг практически всегда на первом месте, перед тем как будут вноситься какие-либо изменения в тело шаблона. Для этого зайдите в настройки блога, Вкладка Дизайн/Изменить HTML и нажмите кнопку загрузить весь шаблон .
Шаг 2: Выберите шрифт.
Для этого зайдите Директорию шрифтов от Google и выберите любой понравившийся.

Шаг 3: Получите код шрифта.
В этой статье я буду использовать шрифт “Tangerine”, который понравился мне больше всего. Для того чтобы получить его код, нажмите на название и откроется новое окно ! В нем необходимо нажать на вкладку “ Get the code”


Шаг 4: Добавляем код в тело шаблона
Теперь вам необходимо скопировать предоставляемый код и вставить его в тело шаблона. Вставлять код необходимо сразу после тэга:

/ >

Теперь код добавлен в ваш шаблон.

Шаг 5: Добавляем CSS код в ваш шаблон.

Финальный шаг. Вы должны добавить следующий код там где вы хотите изменить шрифт в теле статьи. Для этого необходимо будет перейти при написании статьи в раздел “Изменить HTML”. Затем для того предложения в котором хотите изменить шрифт вставляем код:

, serif;">Ваш текст

Вместо “Ваш текст” пишет необходимый текст.

Если вы хотите изменить шрифт:

Названия блога;

Названия статьи;

Текста всей статьи;

Текста в боковых панелях.

То вам необходимо добавить Css код и для них. Не переживайте это совсем не сложно.

1.Чтобы изменить шрифт названия статьи найдите в теле шаблона следующий тэг:

Или

.post h3 { font-family: "Your Font Name"; }

font-family: "Название вашего шрифта";

Как поменять шрифт на своем сайте? Как подключить общедоступные шрифты из библиотеки Google Fonts, а что делать, если шрифт эксклюзивный? Если вопросы для вас актуальны, читаем дальше

Форматы шрифтов

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

Помимо принадлежности к конкретным системам они отличаются технологией отрисовки символов и методом сжатия. От последнего зависит объем получаемого файла, что напрямую влияет на время его загрузки, а значит – и на скорость отображения страницы. Это критично только при установке нового шрифта, так как после скачивания содержащий его файл будет храниться в кэше. На данный момент при внедрении конкретного шрифта на сайт необходимо подготовить все эти форматы шрифта: TTF (или OTF), WOFF,EOT и SVG .

Подключение Google Fonts

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

После выбора нужных шрифтов, а их может быть несколько, сервис формирует свернутое окно с режимами «стандарт» и «импорт», каждый из которых имеет два вида кода:

• добавляем спец. строчку к заголовку HTML-документа между тегами + прописываем нужную комбинацию в CSS-файле;
• либо пишем другую строчку между тегами