Перейти к основному содержанию

Как подключить бесплатные шрифты для сайта

Дорогие начинающие веб-дизайнеры! Мы понимаем, что бесплатных шрифтов много, а Интернет - в актуальной и красивой его части - англоязычен и посему труднодоступен. И подобрать бесплатный красивый шрифт для вашего сайта, скачать или просто подключить его к сайту - это иногда проблема.

Вот, друзья, небольшая подборка на эту тему.

Google Fonts

Подключить понравившийся шрифт можно так:

1. Выберите шрифт. Нажмите Add to Collection или иконку со стрелкой вправо (quick-use), чтобы сгенерировать код и опции для данного шрифта.

2. Скопируйте код и вставьте его в <Head>
Например:

  <head>
    <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Tangerine">
  </head>

3. Этот шрифт теперь доступен в вашем CSS-коде:

      body {
        font-family: 'Tangerine', serif;
        font-size: 48px;
      }

Adobe Edge Web Fonts

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

Font Squirrel

Здесь есть всегда актуальные подборки популярных, горячих и свежих шрифтов для веба и не только + ссылки для скачивания.

Typewolf

Это постоянно обновляемая подборка 30 лучших open source шрифтов. Удобное превью шрифта - заголовок, подзаголовок, меню, текст.

Creative Bloq

Это подборка 30 лучших веб-шрифтов (май 2014).

Awwwards

А вот и десерт. Это лучшая, на мой взгляд, подборка 100 бесплатных веб-шрифтов. По ссылке - версия на март 2014.

- - -

Эту страницу находят по запросам:

  • как лучше подключать шрифты
  • подключение шрифтов css google
  • подключение шрифтов sass
  • подключение шрифтов html
  • подключить шрифт css otf
  • @font-face несколько шрифтов
  • не подключается шрифт css
  • шрифты на сайт

29 октября 2014
Что мы делаем?

Делаем УДОБНЫЕ сайты, логотипы и фирменные стили, продвигаем сайты и обучаем людей.

© 2007-2024 Contorra Family