Google представил API для кроссбраузерного подключения шрифтов

    Google Font API — API для подключеня нестандартных шрифтов.
    <html>
      <head>
        <link rel="stylesheet" type="text/css" href="_http://fonts.googleapis.com/css?family=Tangerine">
        <style>
          body {
            font-family: 'Tangerine', serif;
            font-size: 48px;
          }
        </style>
      </head>
      <body>
        <h1>Making the Web Beautiful!</h1>
      </body>
    </html>
    Google определяет браузер и выдает валидный для него CSS и шрифт.

    Google Font Directory — набор шрифтов.
    WebFont Loader — JavaScript библиотека для расширенной работы с API.
    Поделиться публикацией
    Похожие публикации
    Реклама помогает поддерживать и развивать наши сервисы

    Подробнее
    Реклама
    Комментарии 100
    • +31
      Сколько сегодня хороших новостей от Google.
      Google молодец!
      • +2
        просто супер, как просто пользоваться, порадовали!
        теперь другой вопрос: как свои шрифты закачать?
      • +2
        Гугл никак не перестает радовать… сначала видео, потом шрифты…
        сегодня отличный день =)
        воистину — корпорация Добра
        • 0
          также радует поддержка кириллицы в шрифтах, жаль, что не во всех
          такой полюбившийся мне Cantarell пока кириллицу не содержит, буду надеяться, что временно
          • +1
            А где там кириллические шрифты?
            • 0
              Droid Sans, например
              • 0
                я тут не вижу кириллицы
                code.google.com/webfonts/family?family=Droid+Sans#set
                • +2
                  зато я вижу ее, сделав себе демо
                  пример:
                  www.deniam.net/_/habr/font.html
                  • 0
                    Понял, спасибо.
                    Видимо там не вся таблица символов.
                    • +1
                      PS
                      Хороший шрифт :)
                      • 0
                        да, неплохой на самом деле
                        буду использовать в проектах, хоть какое-то начало разнообразия
                        к сожалению, не могу проверить работу всего этого в ИЕ6 (у меня его нет), но по правде говоря, не особо и переживаю за тех, кто до сих пор на нем
                        • +1
                          в IE6 страница работает норм
                          kamana.ru/screenshot/20100520-o3f-56kb.jpg
                          • 0
                            это радует
                            спасибо за тест
                            • +1
                              в safari/webkit одни только знаки вопроса.
                              • +1
                                кодировочку по меняйте на кирилическую, ато автоопределение у них хромает немного…
                                • +1
                                  Там что-то не то с кодировкой, безотносительно веб-шрифтов (поставьте вручную win-1251). А вот в Опере какая-то проблема, они не включаются, отображается таймсом.
                        • 0
                          наверное
                          там еще несколько есть с поддержкой кириллицы, я проверял
                          правда, не все выглядят хорошо на мелких пунктах (12-14)
                        • 0
                          в FF не так отображается как ниже на скриншоте из IE6
                          • 0
                            странно и обидно
                            в Хроме и ИЕ работает
                          • 0
                            у меня не работает и в хроме. у вас точно этот шрифт не установлен в системе?
                            • 0
                              да, проверил
                              в системе шрифта нет
                • –1
                  Не плохо. Хорошее решение взамен @font-face. Еще бы свой шрифт закачать можно было.
                  • +7
                    это и есть @font-face… посмотрите подключаемый css
                    • +1
                      Каюсь, глупость сказал. Подумал про sIFR, а написал @font-face.
                    • +1
                      смысл этого API в том, что не надо будет качать один и тот же шрифт каждый раз — достаточно один раз его скачать и он будет в кэше. А свой шрифт можно зачать, как сделать? прочитать FAQ. RTFM!
                    • 0
                      Надо только _ убрать из URL, а то не работает пример. Tangerine выглядит похоже на пропись.
                      • +1
                        У меня IE в приведенном примере игнорирует выставленный размер шрифта %)
                        • +3
                          Жаль в опере не работает
                          • +1
                            Все ок у меня
                            • +3
                              В опере через раз работает, font-face криво реализован
                              • +6
                                Ну а что вы минусуете, к сожалению, это правда, сохранив код из топика на диск и нажимая f5 можно увидеть случайным образом одно из следующих состояний.
                                • +1
                                  Вот вам и опера.
                                  • 0
                                    Хм, win xp, opera 10.53, раз 10 рефрешил — все ок.
                                  • 0
                                    знак подчеркивания, точно не забыли убрать?
                                    • 0
                                      Сейчас вот столкнулся с этой проблемой, в Orchard cms шрифты подключаются через Google API, в опере перестали работать :) Может есть какой-нибудь изящный костыль для отображения?
                                • +8
                                  Предвижу нездоровое буйство шрифтов на домашних страницах «супермегадизайнеров» и их несчастных жертв.
                                  • –2
                                    Кто-то смотрел через Browsershots уже (думаю да, у них лимит на url)? Расскажите насколько лучше чем этот метод?
                                    • –1
                                      это font-face и есть. посмотрите подключаемый css
                                    • +1
                                      че по кириллице?
                                    • НЛО прилетело и опубликовало эту надпись здесь
                                      • +4
                                        Какой вы параноик, ей богу.
                                        Не успеет кто-нибудь реализовать действительно полезную фичу, как находятся люди, увидевшие в этом нечто плохое. И так всегда…
                                        • +4
                                          А я ничего негативного в этом не вижу. Наоборот, считаю, что это «тру-вэй». Интернет рано или поздно унифицирует себя. Мы же пользуемся хостингом сайтов, баз данных, файлов, размещаем сервера в дата-центрах и даже подключаем js-библиотеки с того же гугла и ничего в этом «эдакого» не видим. Чем же шрифты не угодили?
                                          • 0
                                            ну, не знаю, я вот не стараюсь не подключать библиотеки напрямую с гугля, после того, как упавший на короткое время сервис, отдававший мне analytics, убил мне сайт…
                                            • 0
                                              Ну, это единичные случаи, и такое бывает. Думаю вероятность ошибки администраторов хостинга не ниже, а местами и выше, нежели подобный инцидент. У самого были случаи, когда часть сайта была недоступна из за того, что админы при апгрейде чего-то намудрили с CGI.
                                              Я вообще говорил о том, что подобные сервисы — это хорошо, и в потенции на будущее, очень перспективный и практичный подход. Даже исходя из того, что такие монстры как Google и Яndex (на счет последнего не уверен) используют CDN, доступность контента с их серверов выше, плюс большинство провайдеров держат их в приоритетных очередях что сулит более высокую скорость загрузки JS у клиентов, etc.
                                              А вообще — каждый волен выбирать сам как ему удобнее и «симпатишнее» © by Фрекен Бок
                                              • 0
                                                с основным вашим утверждением я никоим образом не спорю, мне тоже нравится тенденция.
                                          • +3
                                            Гугл явно желает видеть легко распознаваемый текст там, где сейчас горе-дизайнеры и горе-верстальщики обходятся надписями-картинками. Похвальное желание :)
                                            • 0
                                              Разрешите вступиться за честь так называемых «горе-верстальщиков», а что же им остается делать, если горе-дизайнеры уже убедили клиентов, что можно использовать нестандартный шрифт? Вот и приходится использовать куфон, что по своей сути и является картинкой.
                                              • –1
                                                Куфон не картинка в том плане, что из кода страницы легко выцепить текст. Можно экспериментировать с @font-face. Идеальный вариант — убить горе-дизайнера :)
                                          • +1
                                            А как свой шрифт то подключить?
                                            • +2
                                              Если вы не способно понять это прочитав FAQ — вам этого не надо.
                                              • +1
                                                А. то есть, если в моей школе не было учителя, англ. языка и пришлось учить нем., то я не нуб убогий, которому ниче не надо, да?
                                                • –4
                                                  человек не знающий ангельского не человеке.txt

                                                  Да и знать его толком не надо, чтобы осилить этот FAQ…
                                                  • 0
                                                    сходите на курсы
                                                    • –3
                                                      Дак может всех на курсы? А? давайте! И Гос. язык сделаем англ. Хуль, не люди что ли. А кто не захочет — расстрел, хуль, не людей не жалко.
                                                      Мне вот с моей работой тока и хочется еще после нее пойти на курсы какие нить. А когда мне понадобится небольшая консультация в JS, то я пойду на курсы JS, да?
                                                      • –1
                                                        Не хотите на курсы — купите книжку. Или вон ЛингвоЛео специально для вас сделали. Английский — язык международного общения, не зная его хотя бы на базовом уровне, вы добровольно запираете себя в информационном гетто.
                                              • 0
                                                Для тех кто сам не может 4 строчки написать. Очень крутая разработка;)
                                                • +8
                                                  Веб-щрифты? Отображение страницы, как её задумал автор? Какого черта?
                                                  image
                                                  • +1
                                                    Ну так сафари, по-моему любые шрифты жирнее чем нужно показывает
                                                    • –7
                                                      Так же как сафари показывает хром и фф.
                                                      • +1
                                                        не выдумывайте
                                                        • НЛО прилетело и опубликовало эту надпись здесь
                                                          • 0
                                                            У меня в ФФ вообще не работает — не применяется Font Face. Даже на последней Альфе
                                                            Win XP SP3
                                                          • –1
                                                            Я сравнил оба варианта с Оперой, они были жирнее. Но я ошибся, да, в сафари все равно жирнее.
                                                        • +3
                                                          Вот в линуксе, ff, chrome, opera:
                                                          • 0
                                                            кстати в опере при загрузке, на секунду надпись была шрифтом поумолчанию, а потом уже стала указанным.
                                                            • 0
                                                              Это нормальное поведение: по спецификации @font-face вначале должен рендериться обычный шрифт, а потом применяться «декорирование». Просто процесс этот обычно происходит достаточно быстро, так что глаз не всегда замечает. Но иногда проскальзывания заметны, и не только в Опере.
                                                              • 0
                                                                В спецификации это не указано. Поэтому все Webkit-движки сначала ничего не показывают, что крайне бесит. Уж лучше прыжок, чем ждать пока загрузится (а загрузится ли вообще?) шрифт на 2 МБ.
                                                        • –1
                                                          Сейчас специально проверил, правда не локально, а просто страницу с гугла, например code.google.com/webfonts/family?family=Reenie+Beanie
                                                          Отображается везде нормально и одиннакого. сафари не жирнит, ие не мельчит.
                                                          Возможно тут дело из-за доктайпа? на странице гугла его нет.
                                                          какой шрифт смотрите?
                                                          • 0
                                                            Код из топика.
                                                            • +1
                                                              • –1
                                                                Вообще, на приведенной вами странице не используется апи, описанный в топике.
                                                                • +3
                                                                  Как много комментариев успели написать :)
                                                                  Я разобрался.
                                                                  Стоило всего-то добавить
                                                                  h1 {font-size: 48px;}
                                                                  и всё стало на свои места.

                                                                  Так как в каждом браузере свое понятие о дефолтном размере шрифта для каждого элемента html, как, впрочем, и для других значений.
                                                                  • +1
                                                                    Только в опере вообще на работатет шрифт. Это очень печально
                                                                    • –1
                                                                      В Opera 10.50 работает всё гут.
                                                                      Правда иногда при очень частом рефреше ставится неправильный шрифт.
                                                                      Хотя в FAQ (http://code.google.com/intl/ru/apis/webfonts/faq.html#Browsers_Supported) про оперу ничего не сказано.
                                                                      • –1
                                                                        Насчет 10.50 не знаю, у меня Opera 10.53 — надпись отображается таймсом
                                                                        • 0
                                                                          ошибся. у меня тоже 10.53.
                                                                          только иногда слетает.
                                                                          • 0
                                                                            у вас Win XP?
                                                                            • 0
                                                                              win7 x64
                                                                              • 0
                                                                                у меня XP, может в этом дело. Хотя гугл с оперой давно не дружит
                                                                    • 0
                                                                      Стоило всего-то добавить
                                                                      Где были мои глаза? :)
                                                                      Но тем не менее: i49.tinypic.com/aw72hc.png
                                                                      • 0
                                                                        И все равно в сафари самый жирный шрифт
                                                                        • 0
                                                                          Не жирный он. Это собственная технология сглаживания шрифтов Apple.
                                                                        • 0
                                                                          Да, жирноват…
                                                                          Даже не спасает font-size:normal;
                                                                          Но для Сафари это, вроде, обычное дело.
                                                                          • 0
                                                                            Это было обычным делом для 3-го сафари. 4-й использует виндовый рендеринг шрифтов. Жирнее выглядели мелкие кегли из-за различий техники сглаживания, на крупных это различие было не так заметно. И в Опере явно тоньше чем в остальных.
                                                                    • 0
                                                                      На странице Гугла нет доктайпа? Не смешите. Там HTML5 DT.
                                                                  • –5
                                                                    Хотелось бы добавления шрифтов = ) opentype/truetype = )
                                                                    Было бы шикарно. Решение взаместо @font-face суперское на самом деле,
                                                                    единственное всё-таки нужно рациональное решение в стандарте, надеюсь
                                                                    в html5 усё будет. А так: Спасибо Google! =)
                                                                    • –2
                                                                      С одной стороны — плохо, потому как найдётся куча дизайнеров, благодаря которым вырви-глаз сайтов станет более чем до фига.

                                                                      С другой стороны — хорошо, так как в вебе можно будет наконец вести правильную работу с текстом, персонализируя текст на уровне книжных технологий.
                                                                      • +3
                                                                        Тема конечно крутая, но я не нашел в библиотеке ни одного шрифта, поддерживающего кириллицу :-|
                                                                      • +2
                                                                        Пробежался по ФАКу. Не нашол ничего про упоминание использования пиратских шрифтов. Будет ли гугл бороться с такими?
                                                                        • 0
                                                                          Ни в одном из IE не сработало. Какая тут кроссбраузерность?
                                                                          • 0
                                                                            Странно, еще раз проверил — на этот раз шрифты подключились.
                                                                          • 0
                                                                            На браузершотс можем посмотреть как выглядят шрифты в разных браузерах…
                                                                            • 0
                                                                              Google совместно с TypeKit разрабатывал это фигню.
                                                                              Зашел я на typekit.com, решил скачать trial.

                                                                              И что же я вижу? Пишет мне typekit (после регистрации): You're using a browser that Typekit doesn't yet fully support. Read more…

                                                                              смотрю Read more: getsatisfaction.com/typekit/topics/typekit_browser_support

                                                                              смотрю версию своего: FF (3.6.3)

                                                                              делаю выводы…
                                                                              • –1
                                                                                сафари в айфне не поддерживает
                                                                                • 0
                                                                                  Для Safari Mobile нужны SVG-шрифты, видимо Google пока ими не озаботился.
                                                                                • 0
                                                                                  ой, боюсь, что благое начинание не будет использовано к месту и ко времени «дезигнерами»
                                                                                  к примеру, уже сейчас стал натыкаться на повсеместное использование text-shadow не там где надо, благодаря которому текст на сайте становится трудно читаемым.

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