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

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

694   11  

11 ответов:

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

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

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

Примечание: место @import на очень первая строка файла CSS. (спасибо @Ronny за указание на это).

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

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

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

42  
2016-03-02 17:40:18

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

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

заменить Открыть+Sans значение параметра с именем шрифта.

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

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

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

есть еще 2 способа импорт веб-шрифтов Google на ваш сайт. Надеюсь, это поможет.

19  
2015-12-13 13:45:29

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

@font-face { font-family: roboto-regular; 
			 src: url('../font/Roboto-Regular.ttf'); } 
h2{
	font-family: roboto-regular;
}
18  
2017-04-23 18:01:38
  1. просто перейдите в https://fonts.google.com/
  2. добавить шрифт, нажав кнопку +
  3. перейдите к выбранному шрифту > Embed > @IMPORT > скопируйте url и вставьте в свой .css-файл над тегом тела.
  4. это делается.
9  
2016-10-11 10:38:48

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

@import url('http://fonts.googleapis.com/css?family=Kavoon');
5  
2013-02-03 22:23:01

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

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

3  
2013-02-03 22:04:09

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

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

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

  • выбрать шрифт(с)

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

например 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;}
2  
2018-09-11 11:16:24

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

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

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

@import url('https://fonts.googleapis.com/css?family=Open+Sans');
1  
2017-06-12 09:46:00

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

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

1  
2017-12-22 17:22:37 
<link href="https://fonts.googleapis.com/css?family=(any font of your 
choice)" rel="stylesheet" type="text/css">

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

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

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

<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  
2018-07-07 13:32:47

Comments

    Ничего не найдено.
Click here to cancel reply.