Meskipun kedua cara akan memberikan Anda hasil yang benar, cara yang lebih tepat adalah dengan menggunakan satu font-family untuk mengelompokkan semua varian bobot dan gaya yang berbeda. Ini adalah cara yang sama Anda menggunakan font sistem (dari 'Arial' ke 'sans-serif') dan, pada kenyataannya, jika Anda menggunakan font Google untuk memuat Raleway Anda akan menggunakan rute keluarga font tunggal.
Mari kita uraikan beberapa alasan mengapa ini adalah metode yang benar.
Ini mengurangi kompleksitas CSS dan, pada akhirnya, ukuran file
Memiliki satu font-family berarti Anda dapat mendefinisikan seluruh elemen yang mengandung dengan font family, dan hanya elemen tertentu dengan bobot / gaya yang berbeda. Ambil yang berikut ini, misalnya:
html {
font-family: Raleway;
}
.bold {
font-weight: 700;
}
.italic {
font-style: italic;
}
.footer {
font-family: Arial;
}
<p>I'm raleway font, <span class="bold">and I'm raleway bold</span></p>
<div class="bold italic">I'm Raleway Bold Italic!</div>
<div class= footer>I'm <span class="bold">Arial Bold,</span> w/ the same class!</div>
Perhatikan betapa bagus dan meyakinkan CSS ini. Kita tidak perlu menentukan "RalewayBold" sebagai font-family untuk .bold, atau "RalewayItalic" untuk .italic kita. Bahkan, kita bahkan tidak perlu menentukan varian tebal & miring, karena kelas kita hanya akan berfungsi. Lebih jauh, jika .bold ada di dalam .footer kita, itu akan menjadi Arial yang tebal dan bukan Raleway, karena ia hanya mewarisi Arial dari wadah footer.
Begitulah cara browser melakukannya.
Di atas pada dasarnya adalah bagaimana stylesheet internal browser mendefinisikan font dengan menggunakan gaya minimal dan sifat cascading yang melekat pada CSS.
Begitulah cara industri melakukannya dan telah melakukannya.
Properti web terbesar, aplikasi dan penerbit semuanya melakukannya dengan cara ini. Google, Facebook, NYT, ESPN, dll. Semua mendefinisikan dan menggunakan font dengan cara ini.
Tidak hanya itu, tetapi antarmuka pengguna sebelum CSS atau bahkan internet menentukan font-family tunggal dan memilih varian berdasarkan spesifikasi berat dan gaya yang berbeda. Muat Microsoft Word, KeyNote, Google Documents, bahkan WordPerfect tua tahun 1990-an dan buka drop-down font; Anda akan melihat font-family name "Arial" terdaftar; bukan "Arial" diikuti oleh "Arial Bold" diikuti oleh "Arial Italic" dll.
Cukup muat dari Google Font.
Jika Anda memuat Raleway dari repositori webfont gratis di Google Fonts, Anda akan melihat Raleway didefinisikan dengan satu nama keluarga:
https://fonts.googleapis.com/css?family=Raleway:400,400italic,500,500italic,700,700italic
@font-face {
font-family: 'Raleway';
font-style: normal;
font-weight: 400;
src: url(https://...Raleway-Regular.woff2) format('woff2');
}
@font-face {
font-family: 'Raleway';
font-style: normal;
font-weight: 700;
src: url(https://...Raleway-Bold.woff2) format('woff2');
}
@font-face {
font-family: 'Raleway';
font-style: italic;
font-weight: 500;
src: url(https://...Raleway-MediumItalic.woff2) format('woff2');
}
@font-face {
font-family: 'italic';
font-style: normal;
font-weight: 700;
src: url(https://...Raleway-BoldItalic.woff2) format('woff2');
}