Обзор интернета - Lite Веб-мастеру Графика Игры, Спорт Программы Рецепты Время Рождество Библия
Свой сайт Хостинг Облака Домены Ресурсы Формы на сайт Раскрутка
API ASCII CMS CSS CSS3 DDoS GIF HTML HTML5 IP IT robots.txt RSS SEO UI Whois Веб-мастеру Веб-редакторы Построитель сайтов Проверка сайта Продвижение



Используем Google webfonts

Рассылка

  1. hellohappy.org/beautiful-web-type - Beautiful Web Type - Интересные примеры использования шрифтов с Google.
logo Google Шрифты

http://fonts.google.com

Английский язык
надежный сайт

Собственник: Google

Google Шрифты

Сервис по внедрению шрифтов на сайт.
Русской версии нет, но есть русские шрифты (кириллические).

Преимущества

Шрифты находятся на сервере Google, а не у вас на сайте. Что экономит время и увеличивает скорость загрузки.

Что делать?

Внимание, сервис развивается, растет количество шрифтов и возможности. Потому возможны на сайте изменения.
  1. Script: - выбираем Cyrillic или Cyrillic Extended

  2. Вверху в Preview Text: можно ввести свой текст, выставить размер (Size:) и отсортировать шрифты по алфавиту, популярности ... Я выбрал по популярности. Мы ищем самый лучший шрифт из менее популярных. Менее популярный - значит реже его используют и он будет оригинальнее.

  3. Шрифт подбираем для заголовка (Sentence) или текста (Paragraph), в зависимости от того, как хотим использовать. Красивый шрифт для заголовка может быть не читабельным в тексте.

  4. Выбираем шрифт, который нам больше всего подходит Add to Collection и Quick-use.

  5. Берем код, который надо будет разместить в
    <HEAD>
    . Он в 3. Add this code to your website:, это ссылка вроде
    <link href='https://fonts.googleapis.com/css?family=PT+Sans&subset=cyrillic' rel='stylesheet' type='text/css'>
  6. Возвращаемся и жмем внизу на синем поле Review (может придется открыть) и выбираем начертание (жирный, курсив ...), если шрифт это позволяет.

  7. Во вкладке Test Drive гуляем по меню в правой колонке. Там много можно настроить, описывать будет сложнее, вы все сможете визуально видеть и выбрать, подогнать. Внизу основного поля на сером фоне будет код вроде:

     font-family: 'Ubuntu Condensed', sans-serif; 
    font-style: normal; 
    font-weight: 400; font-size: 13px; 
    text-transform: none; 
    text-decoration: none; 
    letter-spacing: 0em; 
    word-spacing: 0em; line-height: 1.4;

    Копируем его и вставляем куда нам надо в CSS.


Google Web Fonts Tutorial (на английском).


Print Friendly and PDF




Интернет ресурсы 400 потрясающих бесплатных сервисов Измеряем скорость интернета Яндекс.Вебмастер Google вебмастеру Статистика посещаемости сайта Мониторинг сайта Защита от DDoS атак
Генераторы
Генератор текстов Генератор CSS спрайтов Генератор иконок CSS3 генераторы CSS3 валидатор Анимированный загрузчик Анимированные кнопки Обложки браузеров
Редакторы
Декодер текста Транслитеры Веб-редакторы онлайн Платформа онлайн веб-программирования
Еще
Скриншоты онлайн Совместный просмотр сайтов Изобразить работу Сломать софт или файл Учимся кодировать HTML Instacode





Подать статью
Рассылка
О нас

Почта

Графика

Шрифты
Логотипы
Брендбуки
Пиктограммы
Геральдика

Популярное

Уровень сайта
Регистрация сайта
Как сделать сайт
1 место на Google
Переводчики Онлайн
Пароль

Топ интернета

Ph4 в социальный сетях, рассылки и контакт

©2005-2018, Веб-студия Ph4 - Каталог интернета пользователю, веб-мастеру и дизайнеру v. 4.3