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?
sumber
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 @import
metode:
@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 @import
di bagian paling atas CSS Anda, sebelum aturan apa pun.
Google Fonts dapat secara otomatis menghasilkan @import
arahan 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.
@import
memuat 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>
.<link>
dan optimalkan pengirimannya.Lebih baik tidak menggunakan @import. Cukup gunakan elemen tautan, seperti yang ditunjukkan di atas, di kepala tata letak Anda.
sumber
Unduh font ttf / file format lain, kemudian cukup tambahkan contoh kode CSS ini:
sumber
Tambahkan kode di bawah ini di File CSS Anda untuk mengimpor Google Web Fonts.
Ganti nilai parameter Open + Sans dengan nama Font Anda.
File CSS Anda akan terlihat seperti:
sumber
sumber
Gunakan tag @import
sumber
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
Misalnya your_theme.css
sumber
font-weight: 400
pertama 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.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.
sumber
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,
Kemudian Anda dapat menggunakan ini secara normal sebagai font-family di seluruh file HTML / CSS Anda.
Sebagai contoh
sumber
Jus melewati tautan
https://developers.google.com/fonts/docs/getting_started
Untuk mengimpornya ke penggunaan stylesheet
sumber
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
sumber