Google fonts - як з ним працювати

Що спільного між властивістю CSS @ font-face і Google Web Fonts.
@ Font-face дозволяє використовувати свої шрифти (НЕ веб-безпечні шрифти) при відображенні сайту, Google дає нам інструмент для швидкого впровадження. Цей самий Google створив онлайн сховище шрифтів. щоб ми з вами могли їх використовувати в своїх роботах. Найголовніше - всі шрифти абсолютно безкоштовні і на 100% легальні. Profit

Отже, як це все працює?

Google Web Fonts Home page

Вибираємо тип шрифту, який нам потрібен (кирилиця і латиницею думаю будуть актуальні у нас. Або є люди з Камбоджі і Греції?)

Вибираємо тип шрифту

Опишу роботу зі шрифтами, що містять кирилицю, все ж рідна мова. Кириличних шрифтів в сховище Google всього 8, дуже мало. Але я сподіваюся, що роботи в цьому напрямку ведуться. Порадувала Canonical (компанія, що випускає Ubuntu), надавши в вільний доступ фірмовий шрифт з ОС Ubuntu 10.10. Open Sourсe це добре.

Список шрифтів google fonts

Вибираємо потрібні нам параметри відображення, рухаємо повзуночки. Крім стандартних параметрів типу підкреслення і трансформації в верхній і нижній регістр, можна додати тексту тінь, вибравши з 4 найбільш часто зустрічаються видів. За версією Google, природно. Згодом можна і поміняти код, зробити як потрібно, але опція, безумовно, потрібна. Я сподіваюся, додадуть в параметри налаштування тіні з більш широкими можливостями. Поки так, але і на цьому спасибі.

Як бачимо селектор який відповідає за шрифт в css, називається font. Щоб поміняти в css розмір шрифту, треба прописати font-size: 15px і міняти кількість пікселів до потрібного значення. У css жирний шрифт вказується ось таким селектором: font-weight: bold і так далі.

Потрібні накреслення і приклад використання шрифту для елементів сторінки можна вибрати і побачити на закладці "Use this font"

Дуже зручна штука, цей Google Font API. підключити шрифт можна буквально за кілька хвилин, великий вибір шрифтів (для латиницею вибір дійсно вражає) і швидкість завантаження шрифту клієнтом забезпечується серверами Google.

І останнє. Будь шрифт для css з онлайн сховища можна скачати до себе на комп'ютер для використання в системі. І це теж абсолютно безкоштовно. попросять тільки donate (пожертвування), яке може бути і 0 $. Тут вже все на вашій совісті, кожен для себе вирішує - платити чи ні.

Сподіваюся, інформація була корисною і ви дізналися щось нове

Схожі записи

Здравствуйте! Я новачок-аматор. Днями сіл робити проект, в якому беруть участь шрифти PT Sans і PT Sans Bold.Подключіл їх за допомогою вищезгаданого сервісу Гугл. І працює тільки один з них: тобто той, код якого в head написаний нижче, а мені потрібно щоб вони відображалися одночасно і незалежно один від друга.Подскажіте, де я неправий? Спасибо большое.

Відстій. Кириличних шрифтів взагалі мало і все якісь майже однакові. Що виділяються за все пара-трійка. Буржуї вони і в Африці буржуї. Латиниці зате - хоч одним місцем жуй. Хіба не можна українських шрифтів наробити? Начебто не останній мову в неті за популярністю (. Загалом, не сподобалося.

У мене з сьогоднішнього дня Firefox перестав відображати шрифти Google Web Fonts, показує стандартні. Чому так?

Без поняття, що у вас сталося. Тільки що поставив спеціально FF, перевірив - все відмінно відображається, як на рідному сайті Google Web Fonts. так і на цьому блозі

Не люблю Куфон в будь-якому вигляді. Надлишок JS до добра не доводить. Вже краще веб-безпечними шрифтами обійтися, ніж перевантажувати сторінку Яваскрипт.

В Гуглі дуже обмежений вибір шрифтів з підтримкою кирилиці. Спробуйте плагін All-In-One Cufon. Все просто, і в мережі популярно розписано як ним користуватися)

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

В даному випадку Гугл просто дає можливість веб-майстру використовувати своє сховище, тільки і всього

Ну просто пишуть, що мовляв коли шрифту немає у користувача, то браузер пропонує йому закачати його ... Я просто з таким не ставківался. А коли 100 років тому треба було шрифт зробити, я юзал cufon.

Я новачок в роботі зі шрифтами в інтернеті. Можете кинути приклад сайту де мене просять завантажити шрифт. Я не зрозумів гугл позбавляє якось від цього?

Товариші, підкажіть чому при підключенні через API гугл віддає шрифт в форматі .woff, а при скачуванні в .ttf? Як же IE, хоча б 9-й ..

При скачуванні він має на увазі, що ви будете використовувати шрифт в комп'ютері, при розробці дизайну наприклад. WOFF можна створити з TTF, якщо потрібно.

Спасибі за відповідь. Я ось прикидаю по підключенню колекції шрифтів - ймовірність що хтось ще набере колекцію, яку ми використовуємо на нашому сайті вкрай мізерна. Виходить що на попереднє кешування користувачем такий же колекції шрифтів (на іншому сайті) можна не розраховувати. В такому випадку є сенс підключати необхідні шрифти окремо. Чи вірно це? Хоча при підключенні колекції шрифти начебто завантажуються кожен окремо (в результуючому CSS) ... Що Ви думаєте з цього приводу?

В принципі, на бога надійся, але шрифти підключай Я б підключив.

На жаль, іноді змінюється кодування на нечитабельним значки при тривалому бездіяльності браузера. Оновлення кешу часто вирішує проблему. А ось в новій версії FireFox доводиться закривати браузер і знову відкривати, щоб впроваджені гугловський шрифти стали Новомосковскбельнимі. Причому в деякі періоди шрифт ламається навіть при не дуже довгому бездіяльності браузера. Можливо, це пов'язано з навантаженнями в Мережі.

Інші WebFonts, розміщені на своєму сервері, при цьому відображаються нормально, збоїв не було жодного разу. Звичайно, швидкість показу сторінок втрачається, але іноді нею доводиться жертвувати.

Спасибі, такої інформації у мене немає. Проблем з сервісом ніколи не було, треба б потестувати в цьому напрямку ...

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

А з чого ви взяли, що я так вважаю? Якщо ви не побачили меню на звичному місці, може на це є причина? Наприклад, суперечка у вигляді експерименту, який закінчується через тиждень

У мене в шаблоні за замовчуванням були деякі небезпечні шрифти, але реалізація ... 5 js і кирилицю не підтримують, відключив на фіг.У Гугла все більш людяно організовано.

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

Але, можливо, я підключу шрифт Ubuntu. Він мені дуже симпатичний

> У мене звичайна Georgia

лол, це для кого вона звичайна? тільки для користувачів Віндоуз, у мене наприклад цього шрифту немає

Від того, що у вас його немає, він продовжує існувати офіційним веб-безпечним шрифтом

Чудовий сервіс! Гугл я дивлюся взагалі молодець)
А на Вашому блозі, бува, не гугловський шрифти?