Bagaimana cara mengimpor Google Web Font dalam file CSS?

Saya bekerja dengan CMS yang hanya memiliki akses ke file CSS. Jadi, saya tidak bisa memasukkan apa pun dalam KEPALA dokumen. Saya bertanya-tanya apakah ada cara untuk mengimpor font web dari dalam file CSS?

Gunakan @importmetode:

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

Jelas, "Open Sans" ( Open+Sans) adalah font yang diimpor. Jadi gantilah dengan milikmu. Jika nama font memiliki beberapa kata, URL-encode dengan menambahkan +tanda di antara setiap kata, seperti yang saya lakukan.

Pastikan untuk menempatkan @importdi bagian paling atas CSS Anda, sebelum aturan apa pun.

Google Fonts dapat secara otomatis menghasilkan @importarahan untuk Anda. Setelah Anda memilih font, klik (+)ikon di sebelahnya. Di sudut kiri bawah, sebuah wadah berjudul "1 Family Selected" akan muncul. Klik itu, dan itu akan berkembang. Gunakan tab "Kustomisasi" untuk memilih opsi, dan kemudian kembali ke "Sematkan" dan klik "@import" di bawah "Sematkan Huruf". Salin CSS di antara <style>tag ke stylesheet Anda.

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

Lebih baik tidak menggunakan @import. Cukup gunakan elemen tautan, seperti yang ditunjukkan di atas, di kepala tata letak Anda.

Unduh font ttf / file format lain, kemudian cukup tambahkan contoh kode CSS ini:

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

Tambahkan kode di bawah ini di File CSS Anda untuk mengimpor Google Web Fonts.

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

Ganti nilai parameter Open + Sans dengan nama Font Anda.

File CSS Anda akan terlihat seperti:

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

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

1. Cukup buka https://fonts.google.com/
2. Tambahkan font dengan mengklik +
3. Buka font yang dipilih> Embed> @IMPORT> salin url dan tempelkan file .css Anda di atas tag tubuh.
4. Selesai.

Gunakan tag @import

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

Bersamaan dengan jawaban di atas, pertimbangkan juga situs ini; https://google-webfonts-helper.herokuapp.com/fonts

Keuntungan:

• memungkinkan Anda meng-host sendiri font-font google untuk waktu respons yang lebih baik

• pilih font Anda

• pilih rangkaian karakter Anda
• pilih gaya font / berat Anda
• pilih browser target Anda
• dan Anda mendapatkan potongan CSS (tambahkan ke stylesheet css Anda) ditambah zip file font untuk dimasukkan dalam proyek Anda

Misalnya 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;
}

Anda juga dapat menggunakan @ font-face untuk menautkan ke URL. http://www.css3.info/preview/web-fonts-with-font-face/

Apakah CMS mendukung iframe? Anda mungkin bisa melempar iframe ke bagian atas konten Anda juga. Ini mungkin akan lebih lambat - lebih baik untuk memasukkannya ke dalam CSS Anda.

<link href="https://fonts.googleapis.com/css?family=(any font of your 
choice)" rel="stylesheet" type="text/css">

Untuk memilih font Anda dapat mengunjungi tautan: https://fonts.google.com

Tulis nama font pilihan Anda dari situs web tidak termasuk tanda kurung.

Misalnya Anda memilih Lobster sebagai font pilihan Anda,

<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" 
type="text/css">

Kemudian Anda dapat menggunakan ini secara normal sebagai font-family di seluruh file HTML / CSS Anda.

Sebagai contoh

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

Jus melewati tautan

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

Untuk mengimpornya ke penggunaan stylesheet

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

Kita dapat dengan mudah melakukannya di css3. Kita harus cukup menggunakan pernyataan impor. Video berikut dengan mudah menjelaskan cara melakukannya. jadi silakan dan awasi.

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