Как загрузить и использовать любой шрифт на сайте?

Я хотел бы знать, если мы можем загрузить любой шрифт на нашем сайте? Где я могу скачать шрифт или шрифт Google и загрузить его в мой файл CSS прямо так:

@font-face { font-family: 'Myriad Pro Regular'; 
font-style: normal;
font-weight: 300; 
src: local('Myriad Pro Regular'), url('MYRIADPRO-REGULAR.woff') format('woff'); }

вместо того, чтобы использовать этот вид кода:

@import url(http://fonts.googleapis.com/css?family=Source+Sans Pro:200italic,200,300italic,300,400italic,400,600italic,600,700italic,700,900italic,900);

благодарю вас

Источник

3 ответа

Решение

Смотрите , не используйте @import.

Prefere LINK tag:

<link rel='stylesheet' href='a.css'>

Скачайте Source Sans Pro webfont и создайте файл CSS по следующим правилам:

@font-face {
    font-family: SourceSansPro;
    src: url('source-sans-pro/SourceSansPro-Regular.otf');
}
@font-face {
    font-family: SourceSansPro;
    src: url('source-sans-pro/SourceSansPro-Bold.otf');
    font-weight: bold;
}
@font-face {
    font-family: SourceSansPro;
    src: url('source-sans-pro/SourceSansPro-Italic.otf');
    font-style: italic;
}
@font-face {
    font-family: SourceSansPro;
    src: url('source-sans-pro/SourceSansPro-BoldItalic.otf');
    font-weight: bold;
    font-style: italic;
}
@font-face {
    font-family: SourceSansPro;
    src: url('source-sans-pro/SourceSansPro-Light.otf');
    font-weight: 300;
}
@font-face {
    font-family: SourceSansPro;
    src: url('source-sans-pro/SourceSansPro-LightItalic.otf');
    font-style: italic;
    font-weight: 300;
}
Источник

Я нашел это видео на YouTube онлайн. Это дает инструкции шаг за шагом.

https://www.youtube.com/watch?v=KPwG67lEFdc

Я перечислил шаги здесь, чтобы http://www.google.com/fonts/ найти понравившийся шрифт, нажать на ссылку быстрого использования. Прокрутите вниз еще раз и скопируйте ссылку, которая выглядит следующим образом. http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>

Затем интегрируйте шрифты в ваш CSS. Google Fonts API сгенерирует необходимый браузерный CSS для использования шрифтов. Все, что вам нужно сделать, это добавить имя шрифта в ваши стили CSS. Например:

семейство шрифтов: "Open Sans", без засечек;

Источник

Правда, как сказал @Jukka, некоторые шрифты не бесплатны, поэтому вам придется искать. Удача в том, что:

Raleway - http://www.fontsquirrel.com/fonts/raleway

и Open Sans - http://www.fontsquirrel.com/fonts/open-sans

являются бесплатными, поэтому вам просто нужно скачать TTF (большая синяя кнопка), внутри zip есть целый набор весов и стилей шрифта.

Тогда у вас есть два варианта:

  • Загрузите.ttf прямо на ваш ftp и позвоните в css, как вы заявили; или же
  • Используйте генератор веб- шрифтов ( http://www.fontsquirrel.com/tools/webfont-generator) для создания других типов (.woof, .eot, .svg) из-за браузеров.

К сведению, Chrome в последних нескольких версиях (< 39) имел проблемы с некоторыми шрифтами, и только расширение.svg исправило ошибку.

Источник
Другие вопросы по тегам