Emang nya Google font itu apa ?
Google font adalah suatu software yang dapat memudahkan kita kerja, dengan pilihan jenis font yang diberikan oleh google kita bisa menikmatinya dengan sangat gembira.
Ok sekarang kita terlebih dahulu lihat example font face pada sebuah website, yang biasa nya itu dilakukan tepat pada element body. Nah jika ingin spesipik bisa juga.
Ok sekarang kita terlebih dahulu lihat example font face pada sebuah website, yang biasa nya itu dilakukan tepat pada element body. Nah jika ingin spesipik bisa juga.
body {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 14px;
}
Ini adalah contoh yang biasa dilakukan oleh developer, tapi bagaimana cara jika kamu ingin memilih open sans font, atau source sans pro, atau mungkin yang lain. seperti contoh kamu ingin membuat font pada element h1.
h1 {
font-family: Arial;
font-size: 2.2em;
}
Nah itu mungkin juga font sangat biasa, yang sangat tidak cocok digunakan untuk spesipik font. Nah kita andai kan dulu website kita mengarah kepada music metal cord, pastinya font kita juga yang rocker.
h1 {
font-family: 'New Rocker', cursive;
font-size: 2.2em;
}
Itu tidak akan berjalan dengan lancar seperti nama font yang tertera terkecuali font tersebut ada di OS kamu, ok jika ada di kamu, font tersebut akan jalan seperti yang kamu inginkan, pertanyaan nya apakah semua PC di luar sana mempunyai font tersebut, permasalahan tidak 100%, karna setiap PC apa ia ada font itu, solusi ada banyak, bisa kamu download dari sebuah website, lalu pathnya kamu buat di folder tempat dimana project kamu, nah tapi cara itu dulu dilakukan, semenjak ada google fonts, maka masalah itu tersudahi semua.
Dengan hanya menggunakan https://www.google.com/fonts kamu bisa dengan cepat mendapatkan font tersebut tanpa khawatir itu tidak berjalan di PC yang lain, nah permasalahannya ada, tapi tidak begitu banyak, jika internet connection teman kita diluar kecepatannya 0.3Mbps mungkin font itu tidak akan terload. Tetapi tenang, walaupun itu tidak berjalan, maka browser tersebut akan otomatis meletekkan font default nya ke content website kita.
Langsung aja kita ke markupnya.
Nah ada 3 cara melakukan hal itu
- Standar
- @import
- Javascript
Yang mana yang akan kita impelementasikan semuanya.
Jika kamu sudah berada pada website https://www.google.com/fonts kamu bisa ketikkan "new rocker" pada side kiri atas tepat di tex
Setelah itu tekan quick use pada kanan tepat di samping button "Add collections", kamu lihat ada 2 icon, maka pilih icon yang dikiri. Jika kamu hover kan most kamu ke icon tersebut, maka akan timbul title "quick use" pada title anchor tersebut.
Ok setelah kamu click icon tersebut, maka akan ada timbul options pemilihan style font, mau tebal atau tidak, mungkin jika font new rockers hanya 1 pilihan nya tapi jika kamu memakai font contohnya "Open sans", pastinya pilihan lebih dari 3 dan bahkan 5. jika sudah maka kamu bisa scroll kebawah dan lihat ada pilihan standard, import(css) atau pun javascript, jika kamu tidak mengetahuinya, kita akan coba sekarang.
Pastikan kamu sudah mempunyai index file. javascript file, dan css file, untuk saat ini kita anggap dulu javascript dan cssnya tidak ada, jadi kitanya working di index file. Pastikan anda tekan standard pada website google fonts, dan bisa anda lihat kita di beri markup seperti.
<link href='https://fonts.googleapis.com/css?family=New+Rocker' rel='stylesheet'type='text/css'>
Nah itu kita bisa langsung paste di bawah title markup index file kita.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link href='https://fonts.googleapis.com/css?family=New+Rocker' rel='stylesheet'type='text/css'>
</head>
<body>
<h1>This is a paragraph</h1>
</body>
</html>
Nah lihat saya sudah membuat contoh pada h1 dengan sedikit text, dan juga sudah menginclude font nya tepat dibawah title, tapi pertanyaan nya kenapa font masih tetap pada default font browser jika kamu lihat di browser. Jelas tidak berubah karna kita butuh untuk membuat style nya, maka tambah kan style tag tepat diantara head tag. Sebelumnya kamu bisa scroll kebawah dan pastinya kamu dapat lihat source code yang diberi berupa property dan value font tersebut.
<style>
font-family: 'New Rocker', cursive;
font-size: 2em;
</style>
Jadi complete, Nah jadi complete markup kita kira kira seperti ini.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link href='https://fonts.googleapis.com/css?family=New+Rocker' rel='stylesheet'type='text/css'>
<style>
font-family: 'New Rocker', cursive;
font-size: 2em;
</style>
</head>
<body>
<h1>This is a paragraph</h1>
</body>
</html>
Nah kamu bisa lihat outputnya dan pastikan kamu mempunya internet connection disini, jika sudah kita bisa gerak ke cara bagaimana mengimplementasikan nya tanpa markup, artinya kita pakai import di file css,
Dan kamu bisa buat 1 file css kamu, buat aja style.css atau apalah. Pada index file, pastikan kamu sudah menghapus semua nya menjadi standard dengan hanya pakai h1 saja. Melainkan kita akan membuat kembali link href pada file css kita, agar css kita terbaca oleh index file.
Dan kamu bisa buat 1 file css kamu, buat aja style.css atau apalah. Pada index file, pastikan kamu sudah menghapus semua nya menjadi standard dengan hanya pakai h1 saja. Melainkan kita akan membuat kembali link href pada file css kita, agar css kita terbaca oleh index file.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>This is a paragraph</h1>
</body>
</html>
Nah jika sudah kamu bisa ke css file, dan tepat di website google font tadi kamu bisa lihat di samping nav standard kamu bisa lihat import click itu, atau kamu bisa lihat markup dibawah.
@import url(https://fonts.googleapis.com/css?family=New+Rocker);
h1 {
font-family: 'New Rocker', cursive;
font-size: 2.5em;
}
Mudah sekali bukan, dengan sebentar kamu bisa menggunakan font face yang cantik, tapi saran saya gunakan lah font tersebut sesuai dengan tema website kamu, hampir 98% website didunia menggukan google font, jadi kenapa kamu gak mau ikutan :)
Nah sekarang kita bergerak ke penggunaan javascript, bagaimana cara kerjanya, oleh sebab itu, sebelumnya kita hapus dulu line import di file css. Jadi yang tinggal hanya tag h1.
h1 {
font-family: 'New Rocker', cursive;
font-size: 2.5em;
}
Nah sekarang kita buat file js 1, dan lihat markup dibawah.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>This is paragraph!</h1>
<script src="global.js"></script>
</body>
</html>
Nah pada javascript file kamu bisa pastekan code dibawah, ini pastinya di dapat dari google font website juga. jika kamu click javascript pada navigation little tersebut.
WebFontConfig = {
google: { families: [ 'New+Rocker::latin' ] }
};
(function() {
var wf = document.createElement('script');
wf.src = ('https:' == document.location.protocol ? 'https' : 'http') +
'://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
wf.type = 'text/javascript';
wf.async = 'true';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(wf, s);
})();
Done, sekarang kamu telah mengetahui semua cara untuk memasukkan fonts dari google tersebut, tinggal kamu yang memilih mau pakai cara standard, import, atau pun javacript, itu tergantung dari kamu, jika saya dan bahkan developer yang lainnya biasanya menggunakan import. Ok, mungkin cuma itu topics pembahasan kita hari ini, kurang dan lebih saya mohon maaf, saya Irsyad Panjaitan. See you next time!
![Cara Internet Gratis Android Dengan Troid VPN [ Lengkap ]](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDmahiUfLm3n8UGKDmSlT-RbXMS6QZt69nns0Glu7OysGF0EQME0yzWQ5brvthttI0a1TMxEhvEn0bqHpzoBhUdnUYmUVKdAHBCjk4sKmKDUKyc9on9yaEN7-eCQPRjL88SJv7qriKy716/s72-c/troidvpn.jpg)
Post A Comment
No comments :