Belajar CSS - Cara Menggunakan Font External dengan CSS (@font-face) - Awonapa

Assalamualaikum Teman-teman, Selamat datang kembali di Blog Awonapa Jr.. Semoga kita selalu diberikan yang terbaik Oleh Allah SWT. Aamiin...

Jika pada tutorial Belajar CSS sebelumnya kita membahas mengenai font-family, maka pada kesempatan ini kita akan membahas mengenai... Cara Menggunakan Font External dengan CSS (@font-face).
Untuk teman-teman yang tertinggal di materi sebelumnya, teman-teman bisa mengunjungi halaman blog Awonapa Berikut ini.

Belajar CSS - Cara Merubah Font Dengan CSS (font-family)

Menggunakan Font External CSS

Berikut ini adalah beberapa Hal yang akan kita bahas teman-teman,,

Pembahasan

1. Mengenal Perintah @font-face

2. Format dan Jenis Font di dalam CSS

3. Menggunakan Font External Di Dalam CSS

Mengenal Perintah @font-face

Jika pada Materi sebelumnya kita menggunakan property font-family, untuk mengatur font di Web kita dengan beberapa font bawaan yang sudah ada di Device kita..

Tapi? Bagaimana jika kita ingin menggunakan font lain yang berbeda dari font yang sudah ada?...

Nah oleh karena itu kita akan menggunakan Font External kedalam CSS kita, yaitu dengan menggunakan property @font-face dan font-family..

Oiya teman-teman, sebelum kita menggunakan font external, kita harus terlebih dahulu mengenal tipe-tipe format font yang di dukung oleh browser.

Format dan Jenis Font CSS

Perlu diketahui, tidak semua orang di Internet ini menggunakan satu browser yang sama, mereka menggunakan berbagai browser yang berbeda beda, mulai dari Internet Explorer, Google Chrome, Firefox, Microsoft Edge, UC Browser, dan lainya. Yang beberapa mungkin sulit untuk menggunakan font external..

Nah berikut ini adalah Jenis Format Font yang bisa digunakan untuk Browser

EOT (Embedded Open Type)

EOT adalah format font yang hanya didukung oleh Internet Explorer, dan relatif jarang digunakan. Untuk dapat mengubah format font menjadi EOT, kita membutuhkan aplikasi khusus seperti yang disediakan pada situs www.fontsquirrel.com ataupun https://everythingfonts.com.

TTF (True Type) and OTF (Open Type)

Format ini biasanya kita temukan di dalam Sistem Operasi kita, sebagian besar memilik ekstensi .ttf atau .otf. Kedua format ini merupakan font yang paling banyak digunakan, dan juga sudah mendukung banyak browser.

SVG (Scalable Vector Graphic)

Format ekstensi .svg adalah bukan format khusus untuk font, tapi melainkan format yang biasa digunakan untuk gambar Vector ( gambar yang tidak berubah/tidak pecah kualitas nya ketika di zoom). Beberapa Browser memang tidak mendukung format ini..

Namun teman teman bisa menggunakan nya, terdapat beberapa referensi yang sudah tersedia di google.com mengenai hal ini. Atau mungkin someday akan kita bahas bersama

WOFF (Web Open Font Format)

Format font WOFF merupakan jenis format paling baru dan didesain secara khusus untuk keperluan web. WOFF pada dasarnya adalah versi kompresi dari format TTF dan OTF. WOFF memiliki ukuran lebih kecil dan akan didownload dengan lebih cepat.

WOFF di dukung oleh web browser seperti: IE 9 dan diatasnya, Firefox, Chrome, Safari, Opera, Blackberry browser, and iOS Safari versi 5 dan diatasnya.

Namun yang menjadi catatan adalah Android. Dengan kata lain, jika anda menggunakan format WOFF, web browser dalam Android dan IE 8 kebawah tidak akan bisa mengaksesnya.

Tutorial Cara Menggunakan Font External CSS

Baik Teman-teman kita sudah memasuki bagian tutorial nya. Ada hal yang harus teman-teman siapkan, yaitu Font External yang akan kita gunakan di CSS nanti nya.

Untuk Mendapatkan Font External teman-teman bisa mendapatkan nya di lokal device ataupun teman-teman bisa download di google.

Jika teman teman sudah mendapatkan font tersebut, silahkan copy dan paste ke dalam folder project latihan teman teman.. Seperti ini.

Jika teman-teman sudah menjadikan di dalam satu folder, maka langsung saja kita mencoba untuk membuat nya.

Berikut ini adalah contoh syntak html dan css yang sudah saya buat..

HTML

<!DOCTYPE html>
<html>
 <head>
  <link rel="stylesheet" type="text/css" href="style.css">
  <title>Latihan Font CSS</title>
 </head>
 <body>
  <div>
   <h1>Belajar Font External Di CSS</h1>
   <p>
    Hai Semua, Halo Teman Teman , Bagaimana Keadaan Teman Teman Semua? Semoga Baik Baik saja yah. Oke pada Kesempatan ini, kita akan memasuki Materi Selanjutnya dari HTML, yaitu CSS. Ingin mengetahui apa itu CSS lebih lengkap? Mari kita jelajahi di Blog Ini!
   </p>
  </div>
 </body>
</html>

CSS

@font-face {
 font-family: Droid;
 src:url(Purisa.ttf);
}
p {
 font-family: Droid;
}

Yang kita hasilkan dari syntak diatas adalah seperti ini

Belajar Font External CSS

Perhatikan syntak CSS

@font-face {
 font-family: Droid;
 src:url(Purisa.ttf);
}
p {
 font-family: Droid;
}

Pada bagian font-family, itu memiliki nama Droid. Nah nama itu bebas teman teman yang berikan nama nya.
Pada bagian src itu teman teman masukan alamat file font yang sudah teman teman letakan tadi, nama nya wajib sama dengan nama file font nya.

Mengatasi Keterbatasan Dukungan Format Font

Seperti yang kita bahas diatas, beberapa browser tidak mendukung format font yang tertera diatas, seperti .ttf dan lainya, oleh karena itu kita mau tidak mau harus menggunakan tambahan CSS, berikut ini adalah syntak nya.

@font-face {
 font-family: Droid;
 src:url(Purisa.ttf);
 src:
  url('Purisa.eot?#iefix') format('embedded-opentype'),
  url('Purisa.woff') format('woff'),
  url('Purisa.ttf') format('truetype'),
  url('Purisa.svg') format('svg');
}
p {
 font-family: Droid;
}

Nah jika teman-teman harus melakukan hal itu, maka teman-teman bisa mengconvert nya di https://everythingfonts.com/ atau juga bisa di http://www.fontsquirrel.com/tools/webfont-generator.

Pembahasan diatas mungkin akan kita bahas lagi pada artikel berikutnya.

Dan di dalam tutorial ini, kita sudah membahas mengenai Hal

- Bagaimana cara menggunakan Font External pada CSS.

- Memahami Syntak pada CSS font-family dan @font-face.

- Mengenal Format dan Jenis Font

- Mengatasi keterbatasan dukungan format font pada browser.

Baik Teman-teman kurang lebih seperti itu materi kita pada kesempatan ini.

Terimakasih sudah berkunjung.

Salam Semangat!!

Awonapa - Website dan Blogging

Belajar CSS - Cara Menggunakan Font External dengan CSS (@font-face)