Як імпортувати веб-шрифт Google у файл CSS?

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

Використовуйте @importметод:

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

Очевидно, що "Open Sans" ( Open+Sans) є імпортованим шрифтом. Тож замініть його своїм. Якщо в імені шрифту є кілька слів, кодуйте його URL, додаючи +знак між кожним словом, як і я.

Переконайтеся, що ви розміщуєте @importв самому верху свого CSS перед будь-якими правилами.

Google Шрифти можуть автоматично генерувати @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. Перейдіть до вибраного шрифту> Embed> @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) плюс поштовий файл файлів шрифтів, які потрібно включити у ваш проект

Наприклад, 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 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">

Потім ви можете використовувати це зазвичай як сімейство шрифтів у всьому файлі 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