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

Question

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

187

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

David 03 фев. 2013, в 20:25

Источник

Теги:

css

css3

fonts

google-webfonts

11 ответов

46

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

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

Burk 01 июль 2015, в 23:38

16

Можете ли вы рассказать, почему «лучше не использовать»? Я искал этот вопрос, потому что хотел бы знать, какой метод считается лучшим.
Adam Hollow 13 авг. 2015, в 02:52
2

У меня была проблема с Internet Explorer с @import. Иногда это просто не читается.
Burk 14 авг. 2015, в 12:21
5

Он специально сказал, что не может использовать тег <link> в своем заголовке.
Nathan 17 нояб. 2015, в 02:25
1

У меня были проблемы с @import url и в итоге я нашел это решение. Спасибо
Fabian Bigler 19 нояб. 2015, в 10:06
20

+1 за использование ссылки, так как она не будет блокировать параллельную загрузку других внешних файлов. 'import' заблокирует параллельную загрузку других внешних файлов.
Jahmic 04 фев. 2016, в 07:01
1

2015 и до сих пор есть проблемы с IE !!!!!
user1034912 08 фев. 2017, в 06:42
1

@AdamHollow @import загружается последовательно, и его лучше избегать: varvy.com/pagespeed/avoid-css-import.html
Chuck Le Butt 24 фев. 2017, в 12:50
0

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

Показать ещё 6 комментариев

23

Добавьте код ниже в свой файл 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;
}

Shubham Kumar 13 дек. 2015, в 12:17

18

Загрузите шрифт ttf/другие файлы формата, а затем просто добавьте этот пример кода CSS:

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

Fidel ramadhan 23 апр. 2017, в 15:03

10

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

karunesh 11 окт. 2016, в 08:37

5

Использовать тег @import

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

jmz7v 03 фев. 2013, в 20:41

3

Наряду с вышеупомянутыми ответами, также рассмотрите этот сайт; 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;}

MarcoZen 11 сен. 2018, в 09:38

0

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

3

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

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

Eric Keyte 03 фев. 2013, в 21:41

1

<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>

RohanVTK 07 июль 2018, в 10:43

1

Jus перейдите по ссылке

https://developers.google.com/fonts/docs/getting_started

Чтобы импортировать его в таблицу стилей, используйте

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

subindas pm 12 июнь 2017, в 08:43

1

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

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

Gyan 26 май 2016, в 09:33

Ещё вопросы

Можете ли вы рассказать, почему «лучше не использовать»? Я искал этот вопрос, потому что хотел бы знать, какой метод считается лучшим.
У меня была проблема с Internet Explorer с @import. Иногда это просто не читается.
Он специально сказал, что не может использовать тег <link> в своем заголовке.
У меня были проблемы с @import url и в итоге я нашел это решение. Спасибо
+1 за использование ссылки, так как она не будет блокировать параллельную загрузку других внешних файлов. 'import' заблокирует параллельную загрузку других внешних файлов.
2015 и до сих пор есть проблемы с IE !!!!!
@AdamHollow @import загружается последовательно, и его лучше избегать: varvy.com/pagespeed/avoid-css-import.html
Используя @import, вы можете сделать шрифт частью стиля CSS вместо разметки HTML, которая семантически более правильна, и вы можете менять шрифты на своем сайте с помощью CSS. Но, как прокомментировал Чак, кажется, что вы получаете небольшой удар по скорости. Может быть, часы загрузки, а затем решить, в каждом конкретном случае. Обратите внимание, что для SVG @import - единственный способ, который работает AFAIK.
Это также позволяет вам сначала загрузить font-weight: 400 а затем загрузить остальную часть шрифта, используя тот же код без аргументов. Это позволяет быстрее отображать и, если вам не нужен весь шрифт, уменьшать размер CSS-файлов.

ModernDesigner · Accepted Answer · 2013-02-03T21-30-00.000Z

Используйте метод импорта:

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

Очевидно, что "Open Sans" - это импортируемый шрифт. Но вы можете заменить его своим. Если это однословный шрифт, просто укажите имя шрифта после family=..., если это два слова, сделайте так, как я, и добавьте знак + между каждым словом.

ПРИМЕЧАНИЕ: Поместите @import в первую строку CSS файла very. (Спасибо @Ronny за указание на это).

В Библиотеке Google Webfont, когда вы решите, какие шрифты вы хотите использовать, вы получаете коробку с тремя вкладками. Каждая вкладка представляет собой метод инъекции, HTML, CSS или JavaScript. Вкладка @import должна предоставить вам код, необходимый для файлов css. См. Изображение:

Вы можете использовать google.com/fonts, введите свой шрифт и нажмите кнопку использовать
@ Ронни, почему так должно быть раньше всех других стилевых правил?
Я верю, что это в спецификации. Попробуйте это: jsbin.com/foran/1/edit
Вы должны избегать использования @import, потому что он будет откладывать загрузку включенного ресурса, пока файл не будет извлечен. Подробный ответ смотрите здесь: stackoverflow.com/a/12380004/925560
Перемещение строки @import наверх решило мою жизнь! Спасибо!
Почему Google говорит это? Google Insides утверждает, что не делает @import. developers.google.com/speed/pagespeed/insights ?
Это устаревший ответ. @import загружается последовательно, и его лучше избегать: varvy.com/pagespeed/avoid-css-import.html В настоящее время предпочтительным (и по умолчанию) способом загрузки шрифтов Google является использование <link> .
+100 за «Поместить @import в самую первую строку файла CSS».
Вы пожалеете об этом, когда зайдете в SEO и начнете оптимизировать скорость своей страницы с помощью Google PageSpeed. Используйте <link> и оптимизируйте его доставку.