Menggabungkan Beberapa Font Google ke dalam Satu Tautan. Mungkin tutorial ini penting tidak penting dan sudah banyak yang tahu, tapi saya hanya ingin share saja. Mungkin cara ini lebih mudah ketimbang mem-paste-kan @font-face{} ke dalam CSS stylenya. Misal dimulai dari mengambil link-link font-facenya di Google Fonts atau di Edit HTML dalam bentuk link standard semacam ini dan jangan lupa beri tanda / (slash) dibelakang >.
<link href='https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'/>
<link href='https://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'/>
Maka untuk menggabungkannya menjadi dalam satu link, silahkan ikuti langkah-langkah berikut ini.
Langkah 1: Menggunakan tanda | untuk memisahkan beberapa nama font diantaranya. Contohnya seperti berikut ini.
<link href='https://fonts.googleapis.com/css?family=Open+Sans|Oswald' type='text/css'/>
Jika ingin menambahkan font lagi, lakukanlah seperti cara yang diatas.
Setiap satu nama font dalam bentuk link seperti diatas hanya mengandung yang font-style: normal; font-weight: 400; yang berarti fontnya dalam keadaan normal.
Anda boleh saja berhenti sampai disini karena Langkah 2 dan Langkah 3 nya tidak terlalu penting. Anda bisa mengatur sendiri font-style dan font-weight dalam CSSnya.
Langkah 2: Menambahkan beberapa weight di dalamnya. Contohnya seperti berikut ini.
<link href='https://fonts.googleapis.com/css?family=Open+Sans:400,700|Oswald' type='text/css'/>
Jika ingin menambahkan weight lagi, lakukanlah seperti cara yang diatas dan jangan lupa perhatikan tanda : (titik dua)nya. Pilihan angkanya 100 hingga 900 dan ada beberapa angka yang tidak masuk tergantung jenis fontnya.
Setiap penambahan angka font-weight, harus ada angka 400 agar link font tersebut mengandung yang font-style: normal; font-weight: 400;. Jika tidak, setiap penggunaan font-family dengan font/font-face tersebut, maka font-weight tersebut tidak dalam keadaan normal.
Langkah 3: Menambahkan beberapa font style di dalamnya dengan menambahkan kata sebagai berikut. Contoh.
<link href='https://fonts.googleapis.com/css?family=Open+Sans:italic|Oswald:bold|Roboto:bolditalic' type='text/css'/>
/*atau*/
<link href='https://fonts.googleapis.com/css?family=Open+Sans:i|Oswald:b|Roboto:bi' type='text/css'/>
/*atau yang campuran*/
<link href='https://fonts.googleapis.com/css?family=Open+Sans:400,700italic|Oswald:400,400italic,b|Roboto:400,400bi' type='text/css'/>
Keterangan:
- italic atau i
- bold atau b atau font-weight:700
- bolditalic atau bi
Langkah 4: Paste kode tersebut dibawah <head>. Dan jangan lupa Simpan Template.
Masih ada cara lain selain tutorial diatas. Semoga bermanfaat.
