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

Я работаю с CMS, у меня есть доступ только к файлу CSS. Так что я не могу ничего включить в заголовок документа. Мне было интересно, есть ли способ импортировать веб-шрифт из файла 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 / other format, а затем просто добавьте следующий пример кода 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 над тегом body.
4. Это сделано.

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

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

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

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

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

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

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

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

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

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

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

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