Home » How To » Cara Mencocokan Google Font

Cara Mencocokan Google Font

by Hanifah Nurbaeti
by Hanifah Nurbaeti

Website yang memilik beberapa font sepertinya akan terlihat lebih bagus dan menarik, oleh sebab itu kita harus bisa mencocokkan font yang ada pada website agar teihat bagus dan manarik.

Mencocokan Font Web Google Populer

Google Fonts gratis untuk digunakan dan memiliki lebih dari 1000 font untuk dipilih.

Di bawah ini adalah beberapa Font Web Google yang populer dan cocok untuk di pasangkan.

Merriweather dan Open Sans

Contoh

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Merriweather|Open+Sans">
<style>
body {
  font-family: "Open Sans", sans-serif;
  font-size: 16px;
}

h1 {
  font-family: Merriweather, serif;
  font-size: 46px;
}
</style>
</head>
<body>

<h1>Your Lie In April</h1>

<p>Kousei Arima adalah seorang anak yang berbakat dalam bermain piano dan selalu tampil mendominasi dalam berbagai kompetisi, sehingga menjadikannya terkenal di antara para musikus cilik. Setelah ibu sekaligus instrukturnya meninggal dunia, dia mengalami penurunan mental di tengah-tengah sebuah pertunjukan piano di usia 11 tahun. Trauma yang diderita olehnya menyebabkan ia kehilangan kemampuan untuk mendengar suara dentingan piano, meskipun secara fisik pendengarannya baik-baik saja. Dua tahun berlalu, Kousei tidak pernah menyentuh pianonya dan beranggapan dunianya sebagai dunia yang monoton tanpa warna. Dia pun seakan melepas kehidupannya dan hanya berinteraksi dekat dengan kedua sahabatnya, Tsubaki Sawabe dan Ryota Watari. Hingga pada suatu hari, Ia bertemu seseorang yang mengubah hidupnya serta memberikan kembali warna dalam hidupnya, yaitu Kaori Miyazono.</p>

<p>Kaori adalah seorang pemain biola seumuran Kousei yang bersifat ceria dan penuh semangat serta memiliki gaya bermain musik yang bebas dan ekspresif, berlawanan dengan gaya bermain Kousei yang kaku dan terstruktur. Lambat laun, Kaori menuntun Kousei kembali ke dunia musik dan menunjukkan bahwa permainan musik adalah sebuah hal yang perlu diresapi menggunakan perasaan dan imajinasi. Kousei pun secara perlahan menemukan makna baru dalam permainan musiknya dan juga menaruh perasaan suka kepada Kaori, tanpa menyadari ada alasan tersendiri bagi Kaori untuk menuntun Kousei kembali ke dunia musik..</p>

</body>
</html> 

Ubuntu dan Lora

Contoh

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Ubuntu|Lora">
<style>
body {
  font-family: Lora, serif;
  font-size: 16px;  
}

h1 {
  font-family: Ubuntu, sans-serif;
  font-size: 46px;  
}
</style>
</head>
<body>

<h1>Your Lie In April</h1>

<p>Kousei Arima adalah seorang anak yang berbakat dalam bermain piano dan selalu tampil mendominasi dalam berbagai kompetisi, sehingga menjadikannya terkenal di antara para musikus cilik. Setelah ibu sekaligus instrukturnya meninggal dunia, dia mengalami penurunan mental di tengah-tengah sebuah pertunjukan piano di usia 11 tahun. Trauma yang diderita olehnya menyebabkan ia kehilangan kemampuan untuk mendengar suara dentingan piano, meskipun secara fisik pendengarannya baik-baik saja. Dua tahun berlalu, Kousei tidak pernah menyentuh pianonya dan beranggapan dunianya sebagai dunia yang monoton tanpa warna. Dia pun seakan melepas kehidupannya dan hanya berinteraksi dekat dengan kedua sahabatnya, Tsubaki Sawabe dan Ryota Watari. Hingga pada suatu hari, Ia bertemu seseorang yang mengubah hidupnya serta memberikan kembali warna dalam hidupnya, yaitu Kaori Miyazono.</p>

<p>Kaori adalah seorang pemain biola seumuran Kousei yang bersifat ceria dan penuh semangat serta memiliki gaya bermain musik yang bebas dan ekspresif, berlawanan dengan gaya bermain Kousei yang kaku dan terstruktur. Lambat laun, Kaori menuntun Kousei kembali ke dunia musik dan menunjukkan bahwa permainan musik adalah sebuah hal yang perlu diresapi menggunakan perasaan dan imajinasi. Kousei pun secara perlahan menemukan makna baru dalam permainan musiknya dan juga menaruh perasaan suka kepada Kaori, tanpa menyadari ada alasan tersendiri bagi Kaori untuk menuntun Kousei kembali ke dunia musik..</p>
</body>
</html> 

Abril Fatface dan Poppins

Contoh
Gunakan font “Abril Fatface” untuk headernya dan “Poppins” untuk teks:

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Abril+Fatface|Poppins">
<style>
body {
  font-family: Poppins, sans-serif;
  font-size: 16px;  
}

h1 {
  font-family: 'Abril Fatface', serif;
  font-size: 46px;  
}
</style>
</head>
<body>

<h1>Your Lie In April</h1>

<p>Kousei Arima adalah seorang anak yang berbakat dalam bermain piano dan selalu tampil mendominasi dalam berbagai kompetisi, sehingga menjadikannya terkenal di antara para musikus cilik. Setelah ibu sekaligus instrukturnya meninggal dunia, dia mengalami penurunan mental di tengah-tengah sebuah pertunjukan piano di usia 11 tahun. Trauma yang diderita olehnya menyebabkan ia kehilangan kemampuan untuk mendengar suara dentingan piano, meskipun secara fisik pendengarannya baik-baik saja. Dua tahun berlalu, Kousei tidak pernah menyentuh pianonya dan beranggapan dunianya sebagai dunia yang monoton tanpa warna. Dia pun seakan melepas kehidupannya dan hanya berinteraksi dekat dengan kedua sahabatnya, Tsubaki Sawabe dan Ryota Watari. Hingga pada suatu hari, Ia bertemu seseorang yang mengubah hidupnya serta memberikan kembali warna dalam hidupnya, yaitu Kaori Miyazono.</p>

<p>Kaori adalah seorang pemain biola seumuran Kousei yang bersifat ceria dan penuh semangat serta memiliki gaya bermain musik yang bebas dan ekspresif, berlawanan dengan gaya bermain Kousei yang kaku dan terstruktur. Lambat laun, Kaori menuntun Kousei kembali ke dunia musik dan menunjukkan bahwa permainan musik adalah sebuah hal yang perlu diresapi menggunakan perasaan dan imajinasi. Kousei pun secara perlahan menemukan makna baru dalam permainan musiknya dan juga menaruh perasaan suka kepada Kaori, tanpa menyadari ada alasan tersendiri bagi Kaori untuk menuntun Kousei kembali ke dunia musik..</p>

</body>
</html> 

Cinzel dan Fauna One

Contoh
Gunakan font “Cinzel” untuk headernya dan “Fauna One” untuk teks:

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Cinzel|Fauna+One">
<style>
body {
  font-family: 'Fauna One', serif;
  font-size: 16px;  
}

h1 {
  font-family: Cinzel, serif;
  font-size: 46px;  
}
</style>
</head>
<body>

<h1>Your Lie In April</h1>

<p>Kousei Arima adalah seorang anak yang berbakat dalam bermain piano dan selalu tampil mendominasi dalam berbagai kompetisi, sehingga menjadikannya terkenal di antara para musikus cilik. Setelah ibu sekaligus instrukturnya meninggal dunia, dia mengalami penurunan mental di tengah-tengah sebuah pertunjukan piano di usia 11 tahun. Trauma yang diderita olehnya menyebabkan ia kehilangan kemampuan untuk mendengar suara dentingan piano, meskipun secara fisik pendengarannya baik-baik saja. Dua tahun berlalu, Kousei tidak pernah menyentuh pianonya dan beranggapan dunianya sebagai dunia yang monoton tanpa warna. Dia pun seakan melepas kehidupannya dan hanya berinteraksi dekat dengan kedua sahabatnya, Tsubaki Sawabe dan Ryota Watari. Hingga pada suatu hari, Ia bertemu seseorang yang mengubah hidupnya serta memberikan kembali warna dalam hidupnya, yaitu Kaori Miyazono.</p>

<p>Kaori adalah seorang pemain biola seumuran Kousei yang bersifat ceria dan penuh semangat serta memiliki gaya bermain musik yang bebas dan ekspresif, berlawanan dengan gaya bermain Kousei yang kaku dan terstruktur. Lambat laun, Kaori menuntun Kousei kembali ke dunia musik dan menunjukkan bahwa permainan musik adalah sebuah hal yang perlu diresapi menggunakan perasaan dan imajinasi. Kousei pun secara perlahan menemukan makna baru dalam permainan musiknya dan juga menaruh perasaan suka kepada Kaori, tanpa menyadari ada alasan tersendiri bagi Kaori untuk menuntun Kousei kembali ke dunia musik..</p>

</body>
</html> 

Fjalla One dan Libre Baskerville

Contoh
Gunakan font “Fjalla One” untuk headernya dan “Libre Baskerville” untuk teks:

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Fjalla+One|Libre+Baskerville">
<style>
body {
  font-family: 'Libre Baskerville', serif;
  font-size: 16px;  
}

h1 {
  font-family: 'Fjalla One', sans-serif;
  font-size: 46px;  
}
</style>
</head>
<body>

<h1>Your Lie In April</h1>

<p>Kousei Arima adalah seorang anak yang berbakat dalam bermain piano dan selalu tampil mendominasi dalam berbagai kompetisi, sehingga menjadikannya terkenal di antara para musikus cilik. Setelah ibu sekaligus instrukturnya meninggal dunia, dia mengalami penurunan mental di tengah-tengah sebuah pertunjukan piano di usia 11 tahun. Trauma yang diderita olehnya menyebabkan ia kehilangan kemampuan untuk mendengar suara dentingan piano, meskipun secara fisik pendengarannya baik-baik saja. Dua tahun berlalu, Kousei tidak pernah menyentuh pianonya dan beranggapan dunianya sebagai dunia yang monoton tanpa warna. Dia pun seakan melepas kehidupannya dan hanya berinteraksi dekat dengan kedua sahabatnya, Tsubaki Sawabe dan Ryota Watari. Hingga pada suatu hari, Ia bertemu seseorang yang mengubah hidupnya serta memberikan kembali warna dalam hidupnya, yaitu Kaori Miyazono.</p>

<p>Kaori adalah seorang pemain biola seumuran Kousei yang bersifat ceria dan penuh semangat serta memiliki gaya bermain musik yang bebas dan ekspresif, berlawanan dengan gaya bermain Kousei yang kaku dan terstruktur. Lambat laun, Kaori menuntun Kousei kembali ke dunia musik dan menunjukkan bahwa permainan musik adalah sebuah hal yang perlu diresapi menggunakan perasaan dan imajinasi. Kousei pun secara perlahan menemukan makna baru dalam permainan musiknya dan juga menaruh perasaan suka kepada Kaori, tanpa menyadari ada alasan tersendiri bagi Kaori untuk menuntun Kousei kembali ke dunia musik..</p>

</body>
</html> 

Space Mono dan Muli

Contoh
Gunakan font “Space Mono” untuk headernya dan “Muli” untuk teks:

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Space+Mono|Muli">
<style>
body {
  font-family: Muli, sans-serif;
  font-size: 16px;
}

h1 {
  font-family: "Space Mono", monospace;
  font-size: 46px;
}
</style>
</head>
<body>

<h1>Your Lie In April</h1>

<p>Kousei Arima adalah seorang anak yang berbakat dalam bermain piano dan selalu tampil mendominasi dalam berbagai kompetisi, sehingga menjadikannya terkenal di antara para musikus cilik. Setelah ibu sekaligus instrukturnya meninggal dunia, dia mengalami penurunan mental di tengah-tengah sebuah pertunjukan piano di usia 11 tahun. Trauma yang diderita olehnya menyebabkan ia kehilangan kemampuan untuk mendengar suara dentingan piano, meskipun secara fisik pendengarannya baik-baik saja. Dua tahun berlalu, Kousei tidak pernah menyentuh pianonya dan beranggapan dunianya sebagai dunia yang monoton tanpa warna. Dia pun seakan melepas kehidupannya dan hanya berinteraksi dekat dengan kedua sahabatnya, Tsubaki Sawabe dan Ryota Watari. Hingga pada suatu hari, Ia bertemu seseorang yang mengubah hidupnya serta memberikan kembali warna dalam hidupnya, yaitu Kaori Miyazono.</p>

<p>Kaori adalah seorang pemain biola seumuran Kousei yang bersifat ceria dan penuh semangat serta memiliki gaya bermain musik yang bebas dan ekspresif, berlawanan dengan gaya bermain Kousei yang kaku dan terstruktur. Lambat laun, Kaori menuntun Kousei kembali ke dunia musik dan menunjukkan bahwa permainan musik adalah sebuah hal yang perlu diresapi menggunakan perasaan dan imajinasi. Kousei pun secara perlahan menemukan makna baru dalam permainan musiknya dan juga menaruh perasaan suka kepada Kaori, tanpa menyadari ada alasan tersendiri bagi Kaori untuk menuntun Kousei kembali ke dunia musik..</p>

</body>
</html> 

Spectral dan Rubik

Contoh
Gunakan font “Spectral” untuk headernya dan “Rubik” untuk teks:

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Spectral|Rubik">
<style>
body {
  font-family: Rubik, sans-serif;
  font-size: 16px;
}

h1 {
  font-family: Spectral, serif;
  font-size: 46px;
}
</style>
</head>
<body>

<h1>Your Lie In April</h1>

<p>Kousei Arima adalah seorang anak yang berbakat dalam bermain piano dan selalu tampil mendominasi dalam berbagai kompetisi, sehingga menjadikannya terkenal di antara para musikus cilik. Setelah ibu sekaligus instrukturnya meninggal dunia, dia mengalami penurunan mental di tengah-tengah sebuah pertunjukan piano di usia 11 tahun. Trauma yang diderita olehnya menyebabkan ia kehilangan kemampuan untuk mendengar suara dentingan piano, meskipun secara fisik pendengarannya baik-baik saja. Dua tahun berlalu, Kousei tidak pernah menyentuh pianonya dan beranggapan dunianya sebagai dunia yang monoton tanpa warna. Dia pun seakan melepas kehidupannya dan hanya berinteraksi dekat dengan kedua sahabatnya, Tsubaki Sawabe dan Ryota Watari. Hingga pada suatu hari, Ia bertemu seseorang yang mengubah hidupnya serta memberikan kembali warna dalam hidupnya, yaitu Kaori Miyazono.</p>

<p>Kaori adalah seorang pemain biola seumuran Kousei yang bersifat ceria dan penuh semangat serta memiliki gaya bermain musik yang bebas dan ekspresif, berlawanan dengan gaya bermain Kousei yang kaku dan terstruktur. Lambat laun, Kaori menuntun Kousei kembali ke dunia musik dan menunjukkan bahwa permainan musik adalah sebuah hal yang perlu diresapi menggunakan perasaan dan imajinasi. Kousei pun secara perlahan menemukan makna baru dalam permainan musiknya dan juga menaruh perasaan suka kepada Kaori, tanpa menyadari ada alasan tersendiri bagi Kaori untuk menuntun Kousei kembali ke dunia musik..</p>

</body>
</html> 

Oswald dan Noto Sans

Contoh
Gunakan font “Oswald” untuk headernya dan “Noto Sans” untuk teks:

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Oswald|Noto+Sans">
<style>
body {
  font-family: "Noto Sans", sans-serif;
  font-size: 16px;
}

h1 {
  font-family: Oswald, sans-serif;
  font-size: 46px;
}
</style>
</head>
<body>

<h1>Your Lie In April</h1>

<p>Kousei Arima adalah seorang anak yang berbakat dalam bermain piano dan selalu tampil mendominasi dalam berbagai kompetisi, sehingga menjadikannya terkenal di antara para musikus cilik. Setelah ibu sekaligus instrukturnya meninggal dunia, dia mengalami penurunan mental di tengah-tengah sebuah pertunjukan piano di usia 11 tahun. Trauma yang diderita olehnya menyebabkan ia kehilangan kemampuan untuk mendengar suara dentingan piano, meskipun secara fisik pendengarannya baik-baik saja. Dua tahun berlalu, Kousei tidak pernah menyentuh pianonya dan beranggapan dunianya sebagai dunia yang monoton tanpa warna. Dia pun seakan melepas kehidupannya dan hanya berinteraksi dekat dengan kedua sahabatnya, Tsubaki Sawabe dan Ryota Watari. Hingga pada suatu hari, Ia bertemu seseorang yang mengubah hidupnya serta memberikan kembali warna dalam hidupnya, yaitu Kaori Miyazono.</p>

<p>Kaori adalah seorang pemain biola seumuran Kousei yang bersifat ceria dan penuh semangat serta memiliki gaya bermain musik yang bebas dan ekspresif, berlawanan dengan gaya bermain Kousei yang kaku dan terstruktur. Lambat laun, Kaori menuntun Kousei kembali ke dunia musik dan menunjukkan bahwa permainan musik adalah sebuah hal yang perlu diresapi menggunakan perasaan dan imajinasi. Kousei pun secara perlahan menemukan makna baru dalam permainan musiknya dan juga menaruh perasaan suka kepada Kaori, tanpa menyadari ada alasan tersendiri bagi Kaori untuk menuntun Kousei kembali ke dunia musik..</p>

</body>
</html> 

Nah itu beberapa kecocokan yang menurut saya cocok dipasangkan pada sebuah website. Jika kamu ingin menggunakan satu font saja pada blog ataupun website mu itu juga tidak apa-apa. Ketersediaan font gratis saat ini sudah banyak, Google sudah memiliki 1000 lebih font gratis yang tersedia, jika dicari lagi dari yang lain pasti akan ada font-font yang lainnya yang gratis dan bisa kita gunakan. Semoga bermanfaat untuk semuanya!

You may also like