Как импортировать Google Web Font в файл CSS?


258

Я работаю с CMS, у меня есть доступ только к файлу CSS. Так что я не могу ничего включить в заголовок документа. Мне было интересно, есть ли способ импортировать веб-шрифт из файла CSS?

Ответы:


382

Используйте @importметод:

@import url('https://fonts.googleapis.com/css?family=Open+Sans&display=swap');

Очевидно, «Open Sans» ( Open+Sans) - это импортируемый шрифт. Так что замени его на свой. Если имя шрифта состоит из нескольких слов, URL-кодировать его, добавив +знак между каждым словом, как я сделал.

Убедитесь, что поместили @importв самый верх вашего CSS, прежде чем какие-либо правила.

Google Fonts может автоматически сгенерировать @importдирективу для вас. Как только вы выбрали шрифт, щелкните (+)значок рядом с ним. В левом нижнем углу появится контейнер под названием «1 выбранное семейство». Нажмите на нее, и она расширится. Используйте вкладку «Настройка», чтобы выбрать параметры, а затем переключитесь обратно на «Вставить» и нажмите «@import» под «Вставить шрифт». Скопируйте CSS между <style>тегами в таблицу стилей.


25
Вы должны избегать использования @import, потому что он будет откладывать загрузку включенного ресурса, пока файл не будет извлечен. Смотрите подробный ответ здесь: stackoverflow.com/a/12380004/925560
Ренато Карвалью

5
Перемещение строки @import наверх решило мою жизнь! Спасибо!
Joalcego

2
Почему Google говорит это? Google Insides утверждает, что не делает @import. developers.google.com/speed/pagespeed/insights ?
danger89

2
Это устаревший ответ. @importзагружается последовательно и лучше избегать: varvy.com/pagespeed/avoid-css-import.html В настоящее время используется предпочтительный (и используемый по умолчанию) способ загрузки шрифтов Google <link>.
Чак Ле Батт

2
Вы пожалеете об этом, когда зайдете в SEO и начнете оптимизировать скорость своей страницы с помощью Google PageSpeed. <link>Вместо этого используйте и оптимизируйте доставку.
Бухгалтер م

66
<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Open+Sans:300,400,600,700&amp;lang=en" />

Лучше не использовать @import. Просто используйте элемент ссылки, как показано выше, в голове вашего макета.


19
Можете ли вы объяснить, почему «лучше не использовать»? Я искал этот вопрос, потому что хотел бы знать, какой метод считается лучшим.
Адам Холлоу

2
У меня была проблема с Internet Explorer с @import. Иногда это просто не читается.
Burk

6
Он специально сказал, что не может использовать тег <link> в своем заголовке.
Натан

26
+1 за использование 'link', так как он не будет блокировать параллельную загрузку других внешних файлов. 'import' заблокирует параллельную загрузку других внешних файлов.
Джахмик

2
Используя @import, вы можете сделать шрифт частью стиля CSS вместо разметки HTML, которая семантически более корректна, и вы можете менять шрифты на своем сайте с помощью CSS. Но, как прокомментировал Чак, кажется, что вы получаете небольшой удар скорости. Может быть, часы загрузки, а затем решить, в каждом конкретном случае. Обратите внимание, что для SVG @import - единственный способ, который работает AFAIK.
Менталист

38

Скачайте файлы шрифтов ttf / other format, а затем просто добавьте следующий пример кода CSS:

@font-face { font-family: roboto-regular; 
			 src: url('../font/Roboto-Regular.ttf'); } 
h2{
	font-family: roboto-regular;
}


37

Добавьте код ниже в свой файл CSS, чтобы импортировать веб-шрифты Google.

@import url(https://fonts.googleapis.com/css?family=Open+Sans);

Замените значение параметра Open + Sans на имя вашего шрифта.

Ваш CSS файл должен выглядеть так:

@import url(https://fonts.googleapis.com/css?family=Open+Sans);

body{
   font-family: 'Open Sans',serif;
}

13
  1. Просто зайдите на https://fonts.google.com/.
  2. Добавьте шрифт, нажав +
  3. Перейдите к выбранному шрифту> Вставить> @IMPORT> скопируйте URL и вставьте его в свой файл .css над тегом body.
  4. Это сделано.

9

Используйте тег @import

@import url('http://fonts.googleapis.com/css?family=Kavoon');

8

Наряду с вышеупомянутыми ответами, также рассмотрите этот сайт; https://google-webfonts-helper.herokuapp.com/fonts

Преимущество:

  • позволяет самостоятельно размещать эти шрифты Google для лучшего времени отклика

  • выберите свой шрифт (ы)

  • выберите свой набор символов
  • выберите свой стиль шрифта / вес
  • выберите целевой браузер
  • и вы получите фрагменты CSS (добавьте в свою таблицу стилей CSS), а также zip файлов шрифтов для включения в ваш проект

Например, your_theme.css

@font-face { 
    font-family: 'Open Sans'; 
    font-style: normal;  
    font-weight: 400;
    src: local('Open Sans Regular'), local('OpenSans-Regular'),
             url('css_fonts/open-sans-v15-latin-regular.woff2') format('woff2'), 
             url('css_fonts/open-sans-v15-latin-regular.woff') format('woff'); 
}

body { 
    font-family: 'Open Sans',sans-serif;
}

1
Это также позволяет font-weight: 400сначала загрузить, а затем загрузить остальную часть шрифта, используя тот же код без аргументов. Это позволяет быстрее отображать и, если вам не нужен весь шрифт, уменьшать размер CSS-файлов.
Мото

4

Вы также можете использовать @ font-face для ссылки на URL. http://www.css3.info/preview/web-fonts-with-font-face/

Поддерживает ли CMS iframes? Вы также можете добавить фрейм в верхнюю часть вашего контента. Это, вероятно, будет медленнее - лучше включить его в свой CSS.


3
<link href="https://fonts.googleapis.com/css?family=(any font of your 
choice)" rel="stylesheet" type="text/css">

Чтобы выбрать шрифт вы можете перейти по ссылке: https://fonts.google.com

Напишите название шрифта по вашему выбору с веб-сайта, за исключением скобок.

Например, вы выбрали Lobster в качестве шрифта по вашему выбору,

<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" 
type="text/css">

Затем вы можете использовать это как семейство шрифтов во всем файле HTML / CSS.

Например

<h2 style="Lobster">Please Like This Answer</h2>


1

Мы можем легко сделать это в css3. Мы должны просто использовать оператор @import. Следующее видео легко описывает, как это сделать. так что давай и следи.

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

Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.