Skip to main content

4 Format Font untuk Website (Web Fonts)

Format font untuk website — format web fonts — Kemampuan browser yang semakin canggih membuat web designer semakin leluasa dalam berkreasi, termasuk dalam penggunaan font.
Sejak dahulu, secara default kita bisa menggunakan font standar yang sudah ada di sistem komputer seperti Arial atau Verdana untuk mempercantik tampilan tulisan di website.
Font standar yang sudah di setiap komputer tersebut dikenal dengan sebutan Safe Font atau ada juga yang menyebut System Fonts.
Namun saat ini kita bisa menggunakan font lain selain safe font, baik itu font yang dibuat sendiri, font berbayar maupun font gratisan. Fitur Font-Face di CSS3 sangat membantu dalam kemunculan istilah baru yaitu Web Fonts.
Web fonts memiliki beberapa format font yang bisa digunakan, dan biasanya ketika kita membeli atau mendownload sebuah web font maka dalam paket yang diberikan terdapat beberapa file font dengan format yang berbeda-beda.

Berikut ini beberapa format font website terbaik yang perlu Anda ketahui.

Embedded Open Type (EOT)

EOT adalah format font warisan yang dikembangkan oleh Microsoft. Internet Explorer versi lama akan memerlukan EOT untuk merender web font Anda.
EOT juga sering disajikan tanpa kompresi, sehinga ada kemungkinan ukurannya cukup besar.
Jadi apabila Anda tidak memerlukan dukungan browser untuk meladeni para pengguna IE8 kebawah, maka sebaiknya Anda meninggalkannya, atau tidak menggunakan jenis ini.

TrueType (TTF)

TTF adalah format font yang dikembangkan oleh Microsoft dan Apple pada tahun 1980an.
File TTF modern juga disebut TrueType OpenType. TTF dapat berguna untuk memperluas dukungan ke beberapa browser lama, terutama di ponsel. Jika Anda memerlukannya maka bisa disertakan.

Web Open Font Format (WOFF)

WOFF dikembangkan pada tahun 2009 sebagai format pembungkus untuk format font TrueType dan OpenType. Format ini menggunakan font yang dikompress dan didukung oleh hampir semua browser modern yang ada saat ini.

Web Open Font Format 2 (WOFF2)

WOFF2 adalah versi pembaruan dari format WOFF yang asli. Format ini dikembangkan oleh Google, format ini dianggap sebagai format terbaik dibanding format yang lainnya karena menawarkan ukuran file yang lebih kecil dan performa yang lebih baik untuk browser modern yang mendukungnya.
–/-
Apabila Anda terlalu banyak menargetkan pengguna yang menggunakan browser modern, Anda akan lebih aman dengan metode progresif menggunakan @font-face di CSS3 dengan hanya menampilkan format WOFF dan WOFF2.
Hal tersebut akan memberikan kecepatan yang cukup baik karena sudah menerapkan kompresi terbaik dan memungkinkan Anda untuk menangani file lebih sedikit dalam kodingan Anda.
Namun jika orang-orang yang Anda tergetkan lebih banyak menggunakan mesin atau browser tua, maka kami menyarankan Anda untuk menggunakan Safe Font atau System Font demi alasan kinerja dan kecepatan yang lebih baik.
Apabila Anda ingin mendukung semua pengguna, maka Anda bisa menambahkan format EOT dan TTF juga kedalam campuran font Anda. Bahkan font dengan format SVG juga bisa digunakan, namun saat ini format SVG ini juga sudah mulai ditinggalkan karena berbagai kendala, bahkan Google Chrome pun sudah menghapus dukungan untuk format tersebut.
Labels:

Comments

Post a Comment

Popular posts from this blog

Membuat Tombol Scroll ke Atas (back to top) dengan JQuery

Cara membuat tombol scroll ke atas dengan jquery (back to top) – Sebuah website yang begitu panjang kebawah tentu akan menyulitkan penggunanya untuk bisa kembali lagi keatas, karena harus scroll terus dengan menggunakan mouse. Hal tersebut tentu kurang efektif. Untuk mengatasi hal tersebut, banyak orang menggunakan sebuah tombol yang ketika di klik akan membawa kita ke bagian atas halaman website dengan animasi yang menarik. Dibutuhkan jquery untuk membuat hal semacam itu, dan pada tutorial kali ini  Media Kunci  akan mengajarkan Anda cara membuatnya. Mudah kok, script nya juga tidak panjang. 1.  HTML:  Buat sebuah file html dan tuliskan script markup nya seperti berikut ini <div id="wrapper"> <h1>Membuat Tombol Scroll to Top Dengan Jquery</h1> <h5><a href="https://mediakunci.blogspot.com/2019/04/membuat-tombol-scroll-ke-atas-back-to.html">Baca tutorial di Media Kunci</a></h5> Konten yang panjang disini....
Post a Comment
Read more

Insert Data ke Database Tanpa Loading dengan PHP dan jQuery

Insert Data ke Database Tanpa Loading dengan PHP dan jQuery. Tutorial pertama tentang jQuery ini akan saya mulai dari yang sederhana aja dulu yaitu cara Insert Data ke Database Tanpa Loading dengan PHP dan jQuery. Baca juga :  Menampilkan Data dari Database MySQL Tanpa Loading Dengan jQuery Sebelumnya silahkan download dahulu jQuery di website resminya  disini . Selanjutnya buat sebuah database, dalam hal ini saya membuat database dengan nama  terserah . Kemudian dumping Script SQL di bawah ini: CREATE TABLE `siswa` ( `nama` varchar(32) NOT NULL, `kelas` varchar(3) NOT NULL, `jurusan` varchar(20) NOT NULL ) ENGINE=MyISAM DEFAULT CHARSET=utf8; Dari Script SQL di atas anda akan mendapatkan sebuah table dengan nama  siswa  dengan tiga buah field yaitu nama, kelas, jurusan. Jika sudah kita akan membuat Form HTML, dan berikut ini kodenya: <html> <head> <title>Insert Data ke Database Dengan jQuery</title> </head> <body> <form id=&q
Post a Comment
Read more

Belajar PHP (Membuat Halaman Komentar)

Fasilitas komentar pada sebuah website akan menjadikan situs kita rancang menjadi lebih hidup karena dapat mengajak pengunjung untuk berinteraksi secara langsung. Umumnya fasilitas komentar dapat kita jumpai hampir disetiap website, blog atau bahkan forum seperti ini untuk mendapatkan umpan balik baik itu masukan, kritikan, pertanyaan atau bahkan pujian dari pengunjung website. Konsep pembuatan komentar ternyata cukup sederhana, asalkan paham sedikit mengenai PHP dan MYSQL, Insya Allah kamu dapat memahami bagaimana cara kerjanya. Berikut ini saya akan mencoba menulis bagaimana membuat fasilitas halaman komentar sederhana Masuk ke MYSQL buat database dan tabel dalam contoh ini databasenya adalah komentar sedangkan tabelnya adalah data. mysql> use komentar; Database changed mysql> mysql> use komentar; Database changed mysql> create table data( -> id INT NOT NULL  AUTO_INCREMENT PRIMARY KEY, -> nama VARCHAR(50) NOT NULL, -> email VARCHAR(50) NOT NULL, -> isi TEXT
Post a Comment
Read more