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

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

ОТВЕТЫ

Ответ 1

Используйте метод @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> в таблицу стилей.

Ответ 2

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

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

Ответ 3

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

Ответ 4

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

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

Ответ 5

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

Ответ 6

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

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

Ответ 7

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

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

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

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

  • выберите свой набор символов
  • выберите свой стиль шрифта/вес
  • выберите целевой браузер
  • и вы получите фрагменты 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;}

Ответ 8

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

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

Ответ 10

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

Ответ 11

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

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