.font-serif
|
font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
"Segoe UI Symbol", "Noto Color Emoji";
|
.font-mono
|
font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
|
.font-poppins
|
font-family: "Poppins", sans-serif;
|
.font-inter
|
font-family: "Inter", sans-serif;
|
.font-nunito
|
font-family: "Nunito", sans-serif;
|
.font-montserrat
|
font-family: "montserrat", sans-serif;
|
.font-amiri
|
font-family: "Amiri", sans-serif;
|
Class font family di atas (selain
.font-serif, dan .font-mono) adalah class tambahan jika kamu menggunakan layanan font online seperti Google Fonts, misal menggunakan font Poppins,
Monserrat, Nunito, Inter, atau font populer lainnya dari sana, maka kamu bisa menggunakan class tambahan tersebut.
Dengan daftar class font yang ada di atas, kami mungkin butuh masukan darimu terkait font-font yang populer di dunia web desain. Jadi jika kamu punya masukan, kamu bisa mengirimkan issue ke Github kami.
Oke, berikut ini adalah contoh penggunaan class font family:
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Deserunt, a?
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Deserunt, a?
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Deserunt, a?
<p class="font-serif">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Deserunt, a?</p>
<p class="font-mono">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Deserunt, a?</p>
<p class="font-inter">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Deserunt, a?</p>Contoh dengan font Poppins (Google Fonts):
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Deserunt, a?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Font Family - BshadeUI</title>
<!-- Melakukan import font Poppins dari Google Font -->
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
rel="stylesheet"
href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap"
/>
<!-- BshadeUI CSS -->
<link rel="stylesheet" href="BshadeUI.css">
</head>
<body>
<p class="font-poppins">
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Deserunt, a?
</p>
</body>
</html>Bagaimana, cukup mudah bukan?