Bagaimana cara mengimpor Google Web Font dalam file CSS?

258

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?

David
sumber

Jawaban:

382

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.

Perancang Modern
sumber
25
Anda harus menghindari penggunaan @import karena akan menunda pemuatan sumber daya yang disertakan hingga file diambil. Lihat jawaban terperinci di sini: stackoverflow.com/a/12380004/925560
Renato Carvalho
5
Memindahkan garis impor ke atas telah menyelesaikan hidup saya! Terima kasih!
joalcego
2
Mengapa google mengatakan ini? Google Insides mengklaim tidak melakukan @import. developers.google.com/speed/pagespeed/insights ?
hazard89
2
Ini adalah jawaban yang sudah ketinggalan zaman. @importmemuat secara berurutan dan sebaiknya dihindari: varvy.com/pagespeed/avoid-css-import.html Cara yang disukai (dan default) untuk memuat font Google akhir-akhir ini adalah menggunakan <link>.
Chuck Le Butt
2
Anda akan menyesal ketika datang ke SEO dan mulai mengoptimalkan kecepatan halaman Anda dengan wawasan Google PageSpeed. Gunakan <link>dan optimalkan pengirimannya.
Akuntan
66
<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.

Burk
sumber
19
Bisakah Anda mengembangkan alasan "Lebih baik tidak digunakan"? Saya mencari pertanyaan ini karena saya ingin tahu metode mana yang dianggap terbaik.
Adam Hollow
2
Saya punya masalah internet explorer dengan @import. Terkadang itu hanya tidak membacanya.
Burk
6
Dia secara khusus mengatakan dia tidak bisa menggunakan tag <link> di header-nya.
Nathan
26
+1 untuk menggunakan 'tautan', karena tidak akan memblokir pemuatan paralel file eksternal lainnya. 'impor' akan memblokir pemuatan paralel file eksternal lainnya.
Jahmic
2
Dengan menggunakan @import Anda dapat membuat bagian font dari gaya CSS alih-alih markup HTML, yang secara semantik terasa lebih benar, dan Anda dapat menukar font di situs Anda melalui CSS. Tapi seperti yang dikatakan Chuck, sepertinya kamu sedikit cepat. Mungkin jam waktu buka, lalu putuskan, kasus per kasus. Perhatikan bahwa untuk SVGs @import adalah satu-satunya cara yang berfungsi AFAIK.
Mentalist
38

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

Fidel
sumber
37

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;
}
Shubham Kumar
sumber
13
  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.
karunesh
sumber
9

Gunakan tag @import

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

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;
}
MarcoZen
sumber
1
Ini juga memungkinkan Anda untuk memuat font-weight: 400pertama dan kemudian memuat sisa font dengan menggunakan kode yang sama tanpa argumen. Ini memungkinkan untuk tampilan yang lebih cepat dan, jika Anda tidak membutuhkan keseluruhan font, file CSS yang lebih kecil.
moto
4

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.

Eric Keyte
sumber
3
<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>
RohanVTK
sumber