Нестандартні шрифти у Blogger для оформлення блогу. Гарний каліграфічний шрифт на Блогспот, Blogger

Доброго часу доби, шановні читачі. Сьогодні я хочу розповісти про один із способів встановлення нестандартного кириличного шрифту на свій сайт. Цей спосібпідходить для будь-якого сайту, в тому числі й для блогів Blogger. Цей спосіб успішно застосовується на багатьох англомовних сайтах, активно використовується в преміум темах WordPress і Joomla.

Т.к. більшість моїх читачів ведуть свої блоги на Blogger та WordPress, я розповім, як встановити нестандартний шрифт саме у такі блоги. При цьому спосіб, описаний для Blogger, підходить абсолютно для будь-якого сайту. А для WordPress є вже готовий плагін. Не раджу прокручувати статтю до відповідних описів, т.к. Для налаштування плагіна вам знадобляться всі знання про цей спосіб.

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

Я вже досить вас зацікавила? Час переходити до деталей.

Отже, спосіб цей називається Cufon. Вигадав його один розробник - Simo Kinnunen. По-перше, він створив спеціальний файл, який потрібно підключити до сайту. По-друге, він створив генератор, який будь-який шрифт перетворює на JavaScript.

Сам спосіб простий до неподобства, і пізніше ви в цьому переконаєтесь. Найскладнішим тут є пошук необхідного шрифту. І я впевнена, що багато хто з вас, хто не є активним користувачем графічних редакторівНаприклад, PhotoShop просто не уявляють, який шрифт потрібно завантажити в генератор і де взяти такий шрифт. Ось про це я вирішила розповісти докладніше.

Не секрет, що на будь-якому комп'ютері встановлено певний набір шрифтів, у тому ж Word та інших програмах. Також ми можемо самостійно встановлювати нові шрифти до себе на комп'ютер, у тому числі будь-яку програму. Для цього нам потрібно лише в будь-якому з пошукових систем набрати фразу скачати кириличні шрифтиі переконатися, що шрифти, які ми знайшли, мають формат.ttf.

Завантаживши шрифт, що сподобався у форматі.ttf можна встановити його до себе на комп'ютер просто відкривши його.

Або через праву кнопку миші вибрати команду Встановити. Після цієї процедури шрифт відобразиться у всіх встановлених на комп'ютері програмах, де це взагалі передбачено. Тобто. ніяких додаткових дій більше робити не потрібно. Описаний спосіб гарантовано діє у Windows 7.

Встановлення абсолютно будь-якого кириличного шрифту на сайт у три кроки

Отже, ми стали володарем гарного нестандартного кириличного шрифту та хочемо встановити його на свій сайт. Які наші дії?

Крок 1

Ідемо на сайт Cufon-cufon.shoqolate.com.
Клацаємо за посиланням у меню – Download. Відкриється сторінка зі скриптом. Просто копіюємо весь код, вставляємо його в блокнот і зберігаємо з розширенням. Для своїх читачів я підготувала готовий файл, можете завантажити його до себе на комп'ютер.

Будьте уважні, на дату написання посту 26 липня 2011 версія скрипта 1.09i. Саме ця версія зараз за посиланням вища.

Завантажуємо скрипт на хостинг. Хто веде свій блог на Blogger, вже повинен знати, куди завантажити сторонній файл (), я для цього користуюся сайтами Google.

Крок 2

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

Але в будь-якому випадку я підготувала кілька скріншотів з основними налаштуваннями, щоб звернути увагу на важливі пункти.

Як бачите для кожного виду шрифту окреме віконце завантаження:

• звичайний шрифт
• жирний шрифт
• звичайний курсив
• жирний курсив

До кінця не зрозуміла чому так, але завантажувала саме туди, де опис максимально характеризував мій шрифт.

Наприклад, на скріншоті відображається завантаження рукописного шрифту. Він похилий і досить вгодований:).

Далі виділено поле з ліцензійною угодою. Ви повинні обов'язково поставити галочку і тим самим підтвердити, що шрифт, що завантажується вами, дозволено використовувати в вебі розробником цього самого шрифту. Тут питання делікатне, на жаль, серед великого різноманіття різних шрифтів в інтернеті ми самі точно не знаємо, який шрифт ми можемо використовувати, а який ні. Тому цей пункт повністю лежить на вашій совісті.

Наступний скріншот.

1. У першому полі ми вказуємо, що нам потрібне відображення великих і малих літер, а також цифри та знаки пунктуації.
2. У другому полі галочка стоїть за замовчуванням, я не пробувала її видаляти.
3. У третьому полі обов'язково вибираємо Кирилічний та Російський алфавіт.

Один рядок я виділила синім - тут галочку ставлять ті, хто генерує шрифт для WordPress.
І останні налаштування.

1. У першому віконці я не стала нічого писати, але думаю, поле корисне з тієї точки зору, що вказавши домени, на яких використовуватиметься шрифт, на інших доменах він просто не працюватиме.
2. Я так зрозуміла, у верхньому полі мова йдепро те, який розмір шрифту йтиме за замовчуванням. Можна погодитись з налаштуванням, а можна відмовитися, поставивши галочку. Особисто я спробувала по-різному і мене влаштували обидва варіанти. Думаю, це залежить як від самого шрифту, так і від задуму дизайнера шаблону. Наступний пункт у вікні 2 сам генератор рекомендує відключити за умови, якщо ви збираєтеся використовувати невеликий розмір шрифту. Останню галочку наскільки можна краще поставити, т.к. завдяки цьому налаштуванню згенерований файл виходить меншого розміру, що безсумнівно позначиться на завантаженні шрифту на краще.
3. Та й останнє – угода з умовами використання генератора.

У результаті ми отримуємо ще один файл, який також завантажуємо на хостинг.

Крок 3

Залишилася трохи, вказати у файлах шаблону сайту до закриває тегатакий код:

Як видно з коду, ми використовуємо шрифт до тега заголовка h1. Таким чином, можна вказати будь-який інший тег, щоб у ньому відображався наш кириличний шрифт.

Також можна вказувати не тег, а ідентифікатор:

Але це ще не все. Якщо ви хочете на одному сайті використовувати відразу кілька різних шрифтів, то для всіх нових шрифтів проходимо Крок два і вказуємо їх усі:

Якщо ви не впевнені в правильності написання свого шрифту, відкрийте відповідний згенерований файл з кроку 2 і знайдіть потрібну інформацію.

Те, що виділено блакитним і є назвою шрифту.
Так, на одному з моїх тестових блоґів спочатку було так.

А сталося так:

Як встановити нестандартний кириличний шрифт у WordPress

Для користувачів WordPress все ще набагато простіше. Звичайно, можна пройти весь описаний шлях і шрифт також буде працювати, але є готовий плагін, який називається All-in-One Cufon. Завантажити плагін можна як із сайту розробника, так і безпосередньо в адмінці блогу.

Встановлюємо плагін. Активуємо. Переходимо в налаштування плагіна. У верхівці два попереджувальні повідомлення.

Перше про те, що ви повинні створити папку cufon-fonts у директорії wp-content/plugins/. Для цього підключаємося FTP або йдемо в панель управління хостингом і створюємо в папці plugins нову папку з ім'ям cufon-fonts. Після цього перше повідомлення зникає.

Друге повідомлення каже, що ви повинні помістити в створену папку файл згенерованого шрифту, той самий файл, який ми отримуємо на Кроку 2. Завантажуємо файл і повідомлення зникає, при цьому в налаштуваннях з'являється шрифт, який тепер "бачить" плагін.

Не забуваймо поставити галочку навпроти шрифту, який ви збираєтеся використовувати у шаблоні. Але шрифт поки що не працює. Нижче є поле Cufon Code, у ньому ми повинні вказати, до якого тегу має бути застосовано наш кириличний шрифт. При цьому потрібно вказати голий код без будь-яких інших позначень.

Cufon.replace("h1");

До речі, варто сказати, що якщо ви встановили тему WordPressз уже нестандартним шрифтом, при цьому у нього немає кириличного написання, то вам потрібно:

1. Встановити плагін All-in-One Cufon.
2. Встановити згенерований шрифт.

Вносити Cufon Code у поле нижче не потрібно, як правило, у шаблоні вже прописаний код. Якщо ж ви захочете встановити ще один шрифт, додатково до наявного, то такий запис потрібно буде зробити, так, як я писала в прикладах вище.

Дуже важливе зауваження.
Якщо ви оптимізували заголовки у шаблоні за моїми статтями – і , то ви повинні бути дуже уважними. Якщо ви пам'ятаєте, то на всіх сторінках, за винятком головної, заголовок блогу знаходиться в тезі (У засланні). Вам потрібно присвоїти саме цьому тегу id або class, наприклад:

І тоді ваш код Cufon має бути таким: