Помните, что мой ответ сильно постарел.
Ниже приведены другие, более технически сложные ответы, например:
т.не позволяйте тому факту, что этот принятый в настоящее время ответ создает у вас впечатление, что он по-прежнему самый лучший.
Теперь вы также можете загрузить весь набор шрифтов Google через github на их google / font хранилище.Они также предоставляют ~ 360MB zip-снимок своих шрифтов .
Сначала вы загружаете выбранный вами шрифт в виде упакованного пакета, предоставляя вам набор шрифтов истинного типа.Скопируйте их где-нибудь публично, куда-то, на что вы можете сослаться со своего css.
На странице загрузки веб-шрифтов Google вы найдете ссылку включения, например:
http://fonts.googleapis.com/css?family=Cantarell:400,700,400italic,700italic|Candal
Он ссылается наCSS, определяющий шрифты с помощью набора @font-face
определений.
Откройте его в браузере, чтобы скопировать и вставить их в свой собственный CSS и изменить URL-адреса для включения правильного файла шрифта и типов форматов.
Так вот:
@font-face {
font-family: 'Cantarell';
font-style: normal;
font-weight: 700;
src: local('Cantarell Bold'), local('Cantarell-Bold'), url(http://themes.googleusercontent.com/static/fonts/cantarell/v3/Yir4ZDsCn4g1kWopdg-ehHhCUOGz7vYGh680lGh-uXM.woff) format('woff');
}
становится таким:
/* Your local CSS File */
@font-face {
font-family: 'Cantarell';
font-style: normal;
font-weight: 700;
src: local('Cantarell Bold'), local('Cantarell-Bold'), url(../font/Cantarell-Bold.ttf) format('truetype');
}
Как вы можете видеть, недостатком хостинга шрифтов в вашей собственной системе является то, что вы ограничиваете себяв формате истинного типа, в то время как служба веб-шрифтов Google определяет устройством доступа, какие форматы будут передаваться.
Кроме того, мне пришлось добавить файл .htaccess
в каталог, содержащий шрифты, содержащие типы mime дляво избежание появления ошибок в Chrome Dev Tools.
Для этого решения требуется только истинный тип, но определение больше не повредит, если вы также хотите включить разные шрифты,как font-awesome
.
#.htaccess
AddType application/vnd.ms-fontobject .eot
AddType font/ttf .ttf
AddType font/otf .otf
AddType application/x-font-woff .woff