Beberapa waktu lalu dapet kerjaan bikin web tapi fonts yang digunakan dalam halaman-halaman webnya bukan fonts standar web / windows, seperti arial, thoma, verdana atau lainnya, si desainer web dikantorku rupanya kehilangan rasa dan gaya klo melulu mebuat desain dengan font-font setandar yang ada, setelah dia cari-cari fonts yang menurutnya sesuai dengan tema web yang ditentukan maka jadilah sebuah desain nan apik dan indah dengan meng customize beberapa fonts.

Nah sekarang giliran saya yang pusing deh, Dia sih enak (web desain) tinggal include fonts di Adobe ilustrator or Photoshop udah bisa langsung ke liatan didesainnya, sekarang yang jadi masalahnya, untuk setiap fonts yang bukan standar web / windows, ga akan tampil jika kita buka di browser, kecuali fonts tersebut udah di instal sebelumnya di komputer client (komputer yang akan mebuka halaman web tersebut).

Mulai deh saya cari cara gimana supaya fonts bukan standar bisa dibuka juga dikomputer yang tidak memiliki fonts tersebut. setalah tanya-tanya paman google, beliau menyarankan agar meng-embedded fonts. ehm… apa itu embedded fonts?

Kalo menurut orang awam seperti saya embedded fonts itu mungkin prosess, mengkonversi fonts setandar dengan font yang diinginkan disisi server,  ehmm klo ada yang punya istilah lain monggo di share… mas.. mba.. supaya kita bisa lebih memahami lagi. Atau kalian bisa googlinglagi tentang embedded fontsini.

Setelah googling cukup intentsakhirnya dapet juga caranya, dan menurut saya cara ini cukup simple dan mudah,

step 1, anda siapakan fonts yang ingin digunakan. jika nantinya halaman web yang ingin memakai fonts pilihan tersebut ingin dibuka juga di browser IE anda harus meng-converter fonts manjadi berextensi *.eot, kenapa harus fonts yang berextensi .eot, karena embedded fonts di IE harus font berextensi .eot, kmu bisa meng-converter secara online di situs ini : http://www.kirsle.net/wizards/ttf2eot.cgi setelah itu perlu diingat font harus juga ikut di upload di dalam webhosting anda..

step 2, buat di css file anda : contoh saya akan menggunakan fonts Bohemia_typewriter

@font-face {
 font-family: MyCustomFont;
 src: url("Bohemian_typewriter.eot") /* EOT file for IE */
}
@font-face {
 font-family: MyCustomFont;
 src: url("Bohemian_typewriter.ttf") /* TTF file for CSS3 browsers */
}

Setelah itu untuk menggunakanya anda bisa letakan di body halaman web anda

body {
 font-family: MyCustomFont, Verdana, Arial, sans-serif;
 font-size: medium;
 color: black
}
span.header {
 font-family: MyCustomFont, Impact, "Arial Black", sans-serif;
 font-weight: bold;
 color: red
}

Hasilnya :

Selesai, mudah kan? anda bisa menggunakan berbagai macam font sesuai dengan yang anda inginkan.

Share on Facebook

Web fonts embedded (menggunakan fonts pilihan untuk web), 10.0 out of 10 based on 1 rating