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

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

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

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

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

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

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

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

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

Главное преимущество:

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

Другие преимущества:

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

В файле your_css_theme.css добавьте

/* open-sans-regular - latin - modern browsers  */
@font-face {
   font-family: 'Open Sans';
   font-style: normal;
   font-weight: 400;
   src: local(''),
        url('css_fonts/open-sans-v18-latin-regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
        url('css_fonts/open-sans-v18-latin-regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
 }

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

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

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

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

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

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

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