Oleh karena itu, kini saya buatkan kembali tutorial cara mendapatkan @font-face dari Google Fonts agar sesuai dengan device atau perangkat dan juga sesuai dengan berbagai browser.
Dengan ini maka font yang ada di web atau blog akan tampil sama di semua perangkat dan browser (tidak missing font).
Baiklah, kita mulai tutorialnya. Di sini saya menggunakan browser Chrome, dan alat yang dibutuhkan adalah User Agent Switcher. Silahkan masuk ke sini untuk mendapatkan ekstensi User Agent Switcher for Chrome. Silahkan tambahkan ekstensi tersebut ke browser Chrome Anda.
Setelah ekstensi berhasil ditambahkan, maka akan muncul di kanan atas browser. Sekarang silahkan pergi ke Google Fonts untuk memilih font yang ingin digunakan lalu ambil URL Google Fonts-nya.
Sekarang paste-kan URL Google Fonts tadi di address bar browser Chrome, maka akan tampil @font-face untuk browser Chrome. Untuk browser lainnya, silahkan klik ikon ekstensi User Agent Switcher di sebelah kanan atas browser, lalu pilih browser atau system satu per satu dan copy kode @font-face yang muncul.
Ada beberapa browser atau system yang menggunakan @font-face yang sama, jadi kita tidak perlu menyimpan beberapa @font-face yang sama, cukup satu saja.
Bagaimana, mudah bukan?
Atau Anda bisa tonton video cara mendapatkan @font-face dari Google Fonts agar sesuai dengan device atau perangkat dan juga sesuai dengan berbagai browser yang saya buat berikut ini.