CILACAP.INFO – Google Fonts tidak berjalan di laman Mobile Responsive dan cara mengatasi error [a]import css di PHP dengan cepat tanpa pusing pada website.
Diketahui, bahwa google fonts dalam suatu website memang sangat berguna bahkan, sehingga pembaca pun merasa nyaman dengan style tulisan. Sebab facebook, google dan semua platform media juga menggunakannya.
Pasalnya siapa saja yang merasa memiliki bakat atau kemampuan dalam style menulis saja ngga cukup jika malah teks di suatu website bikin pusing. Oleh sebab itu jika memiliki tulisan bagus tapi lamannya tidak bagus, yang jelek bukan sang penulis akan tetapi websitenya.
Beberapa kasus di dalam website salah satunya yakni tidak berjalannya fonts google, penyabab dan faktor yang mempengaruhi pun bisa terjadi karena ada yang kurang, misalnya kurang menambahkan {font-family: “Roboto”}
Ada juga yang berjalan di desktop, namun tidak pada smarthphone, padahal dalam tema ada panggilan untuk menggunakan google fonts, bisa jadi karena dalam css pada versi mobile, contohnya penggunakan [at]media (min-width: 780px) body{font-family: “Roboto”}} yang otomatis hanya browser ukuran 780 ke atas yang menggunakan google fonts.
Kemungkinan lainnya juga bisa terjadi karena salah satu javascript memerintahkan untuk menghapus style/javascript yang otomatis html google fonts ikut terhapus.
Selain itu, masalah lainnya yakni ketika menggunakan embed yang ada pada google fonts, justru dalam file editor php di cpanel terdapat pesan error yang artinya tidak diperbolehkan menggunakan [a]import.
Adapun cara mengatasinya cukup mudah, tinggal ganti [a]import dengan,
[at]font-face {
font-family: “Roboto”;
src: url(“https://fonts.googleapis.com/css2?family=Roboto”);
font-display: swap;
}
Yang tidak di loading dimana, judul atau teks konten (isi), jika dalam isi maka tinggal lihat kode sebelum isi, kalau di WordPress biasanya .entry-content-single, maka tinggal tambahkan,
.entry-content-single{font-family: “Roboto”}
Jika pada tema sudah ada penggunaan google fonts, maka tidak perlu menambahkan embed di header.php, namun jika tidak ada maka anda bisa menambahkannya dengan,
<link rel=”preconnect” href=”https://fonts.gstatic.com”>
<link href=”https://fonts.googleapis.com/css2? family=Roboto,wght[at]1,500&display=swap” rel=”stylesheet”>
Mudah bukan, semoga berhasil.
Komentar