Generator @font-face Mempermudah Custom Font

Semenjak berkembangnya CSS 3, anda tidak perlu lagi melakukan custom font dengan javascript maupun flash. Anda dapat menggunakan embed font atau @font-face, sebagai alternatif baru yang lebih baik untuk bermain 'typography'.

Ada jasa yang dapat kita gunakan untuk memudahkan membuat @font-face, yaitu dengan @font-face Generator. Anda pun dapat memilih Free Fonts yang akan anda gunakan di fontsquirrel.com si penyedia jasa generator tersebut. Dengan generator @font-face ini kita tidak susah lagi mengkonver font dalam bentuk 'eot' untuk IE atau 'svg' untuk Chrome. Dan juga mendapatkan scriptnya yang bisa langsung kita tanam di CSS.

Tahapan Custom Font dengan @font-face

1. Pilih Font yang Anda Sukai

Pilihlah jenis font yang anda sukai di penyedia free font, termasuk di fontsquirrel.com. Yang perlu diperhatikan disini adalah yakinkan bahwa font tersebut dapat digunakan secara legal untuk sebuah web.

2. Generate Font

Masuk ke @font-face Generator. Kemudian:

• Add font.
• Contreng Agreement.
• Base Font Format, tidak perlu dirubah.
• Alt Font Formats, contreng semuanya EOT, SVG dan WOOF.
• Options dan Subsetting, tidak perlu dirubah, tapi anda bisa juga mengaturnya.
• Terakhir, download.

Seperti gambar berikut :



Extract hasil file download tersebut.

3. Membuat Folder Fonts
Buatlah folder "fonts", dan masukan semua font hasil download tersebut kedalam folder fonts.
Font tersebut ada empat buah yang memiliki akhiran:

• .eot
• .svg
• .ttf atau .otf
• .woff

Kemudian upload folder "fonts" tersebut. Misal anda pengguna Wordpress, upload folder tersebut kedalam [../wp-content/theme/NamaTheme/], hasilnya seperti demikian [../wp-content/theme/NamaTheme/fonts].

4. Memanggil Font Lewat CSS
Buka file css yang bernama stylesheet.css, hasil dari generator font yang telah anda download dengan notepad.

Copy code tersebut, misal seperti:

@font-face {
 font-family: 'GoudyBookletter1911Regular';
 src: url('GoudyBookletter1911.eot');
 src: local('Goudy Bookletter 1911 Regular'), local('GoudyBookletter1911'), url('GoudyBookletter1911.woff') format('woff'), url('GoudyBookletter1911.otf') format('opentype'), url('GoudyBookletter1911.svg#GoudyBookletter1911') format('svg');
}

Paste code tersebut kedalam file css anda, dan rubah menjadi:

@font-face {
 font-family: 'GoudyBookletter1911Regular';
 src: url('fonts/GoudyBookletter1911.eot');
 src: local('Goudy Bookletter 1911 Regular'), local('GoudyBookletter1911'), url('fonts/GoudyBookletter1911.woff') format('woff'), url('fonts/GoudyBookletter1911.otf') format('opentype'), url('fonts/GoudyBookletter1911.svg#GoudyBookletter1911') format('svg');
}

Jadi tambahkan fonts/ disetiap url untuk memanggil font yang berada di "folder fonts".

Nah sekarang, misal anda ingin menggunakan custom font tersebut di h1, maka panggil nama font tersebut, seperti berikut:

h1{
   font-family: 'GoudyBookletter1911Regular', serif;
}

Hasil dari penggunaan 'Generator @font-face' ini dapat anda lihat di Id Tutorial pada judul postingan.

Penutup

Sip demikian keseluruhan tahapan 'Custom Font' dengan '@font-face' CSS tersebut. Kembangkan lah font tersebut sehingga 'Typography' pada weblog anda semakin baik.

Untuk penggunaan @font-face di blogger.com anda dapat mempelajari di @font-face CSS di Blogger Template.

Read More

@font-face CSS di Blogger Template

Akhirnya dapat juga cara alternatif menggunakan '@font-face CSS' ('Font Embedding') di 'blogger template' melalui jasa gratis yang disediakan oleh kernest.com. Dengan menggunakan jasa gratis ini, tidak perlu lagi pusing menyimpan file 'Font' yang akan kita gunakan. Untuk masalah jenis font, disediakan cukup beragam (cukup pusing memilihnya) baik itu yang gratis/free maupun yang berbayar/commercial.

@font-face, tidak seperti sIFR dan Cufon yang menggunakan javascript, @font-face ini hanya berupa 'Embed Code CSS', jadi katakan selamat tinggal untuk javascript :). Anda dapat melihat demo diblog ini dan di Blogger Display pada judul blog (h1).

Selain itu kelebihan penggunaan @font-face ini, karena bukan berupa image seperti cufon, maka text font tersebut dapat di translate.

Penerapan @font-face di 'blogger template'

Untuk penerapan @font-face ini sangat mudah:

1. Registrasi,

2. Mencari font yang anda ingin gunakan (- Find More Fonts...), anda klik font tersebut,

3. Masukkan alamat blog/web anda di kolom sebelah kanan (anda bisa memasukkan beberapa alamat), setelah anda klik add, kemudian anda diminta klik alamat blog/web anda dibagian atas.



4. Selanjutnya anda akan masuk ke halaman berikut:



Pada tahapan pertama di gambar, copy 'Embed Code' tersebut kemudian paste di atas </head> pada template anda, seperti berikut:

<link href="http://kernest.com/http-bloggerdisplay-blogspot-com.css" media="screen" rel="stylesheet" type="text/css" />

</head>

Setelah itu pada tahapan kedua digambar tersebut, lihat font-family yang anda dapat, gunakan font-family tersebut, seperti contoh yang ada, sebagai contoh saya menerapakan pada bagian heading, maka perintah CSS nya adalah:

h1,h2,h3,h4 {font-family:'Days';}

Anda juga dapat menggunakan beberapa jenis font.

5. Save tamplate anda (jika anda preview, anda tidak akan melihat perubahan jenis font tersebut).

Sip demikian tahapan penggunaan @font-face CSS tersebut di Blogger Template. Sedikit tambahan bahwa penggunaan @font-face CSS masih belum didukung untuk 'browser Google Chrome'.

---
Lebih lengkap mengenai penyedia jasa gratis 'Font Embedding':
Web Typography: Font Embedding Services

Read More

Sekilas CSS @font-face

Dukungan jenis font yang dapat digunakan dalam sebuah situs (blog/web) sangat terbatas, sehingga muncul beragam pengembangan fasilitas yang memungkinkan kita menggunakan beragam jenis font yang kita inginkan, seperti Cufon, sIFR, dan sebagainya dengan bantuan javascript dan flash.

Tapi kini, CSS, mulai menggembangkan penggunaan beragam jenis font baik itu font "true type" maupun "open type" dengan @font-face, tanpa javascript dan flash, hanya menggunakan css dan file jenis font yang kita upload.

Penggunaan @font-face

Penggunaan @font-face, terutama untuk font jenis "opentype" belum didukung oleh semua browser, tetapi untuk font jenis "truetype" dapat dibaca dengan baik oleh IE dengan merubahnya dari "ttf" ke "eot".

Detil dari penggunaan @font-face, sebagai berikut:

<html>
<head>
<title>Web Font Sample</title>

<style type="text/css" media="screen, print">
@font-face {
font-family: "Diavlo";
src: url("tempat/font/Diavlo.otf") format("opentype");
}

@font-face {
font-family: "Anivers";
src: url("tempat/font/Anivers.otf") format("opentype");
}

@font-face {
font-family: "Bitstream Vera Serif Bold";
src: url("http://developer.mozilla.org/@api/deki/files/2934/=VeraSeBd.ttf") format("truetype");
}


h1, h2 { font-family: "Diavlo", serif }
h1, h2 { font-family: "Anivers", serif }
p { font-family: "Bitstream Vera Serif Bold", serif }

</style>

</head>
<body>
<h1>Ini penggunaan font Diavlo.</h1>
<h2>Ini penggunaan font Anivers.</h1>
<p>Ini penggunaan font Bitstream Vera Serif Bold.</p>
</body>
</html>

Saya mencoba @font-face ini, pada web Balawa Mitra Nusantra, dengan menggunakan font diavlo (opentype) yang hanya dapat dibaca pada browser Firefox dan Opera, sedangkan jika kita membuka web tersebut dengan IE saya menggunakan font (truetype) Fontin-Regular yang mesti terlebih dahulu dirubah menjadi "eot" di "ttf → eot" atau di TTF to EOT Font Converter.

Lebih lengkap penggunaan @font-face dan contohnya dapat pelajari di:
- beautiful fonts with @font-face
- CSS @ Ten: The Next Big Thing
- @font-face in IE: Making Web Fonts Work
- 21 Awesome @font-face Embeddable Typefaces
- @font-face and performance

Contoh sukses penerapan @font-face:
Becoming a Font Embedding Master

Generator:
Generator @font-face Mempermudah Custom Font

Read More

Trik Menghilangkan Font Asli Untuk Pengguna Cufon

Bagi para pengguna Cufon harus menggunakan trik ini. Trik ini dikembangkan oleh Chris Wallace, dia mencoba melakukan trik (hack) untuk menghilangkan karakter font asli, agar font dari Cufon-nya tidak didahului oleh jenis font aslinya. Saya mencobanya di 'blogger template', tetapi trik itu tidak berjalan sempurna, perlu ada pembenahan sedikit.

Pembenahan trik ini tidak jauh berbeda dengan Chris Wallace, seperti ini:

1. Taruh kode css ini di atas <body>, kode ini yang merupakan trik untuk menghilangkan font asli:

<style type='text/css'>
<!--
h2.post-title, #header h2, #footer{visibility:hidden}
-->
</style>

2. Kemudian masukan pula script cufon, termasuk juga kode css untuk mengaktifkan kembali, diatas </body>:

<!-- Cufon -->
<script src='http://cufon.shoqolate.com/js/cufon-yui.js' type='text/javascript'>
</script>
<script src='http://choenblogspot.googlecode.com/files/Mistral_400.font.js' type='text/javascript'>
</script>

<script type='text/javascript'>

Cufon.replace(&quot;h2.post-title, #header h2, #footer&quot;,{
textShadow: &#39;#050505 1px 1px&#39;
});
</script>

<script type='text/javascript'>Cufon.now();</script>


<style type='text/css'>
<!--
h2.post-title, #header h2, #footer{visibility:visible}
-->
</style>

Catatan: kode h2.post-title, #header h2, #footer diatas itu contoh, perlu anda sesuaikan dengan keperluan anda.

3. Sip Selesai.

Catatan: Trik ini menghasilkan 2 error pada validasi HTML :(, karena penempatan kode style CSS di dalam bagian HTML, sangat disayangkan.

:: lihat juga:
- Cufon pilihan lain selain sIFR
- Free Blogger Template dengan Cufon (bagi pengguna template ini harap menambah trik diatas.

:: Mau menggunakan sIFR:
- Menggunakan sIFR 2.0 di 'Blogger Template'
- Free Blogger Template dengan sIFR 2.0

Read More

Menggunakan sIFR 2.0 di 'Blogger Template'

Demo

sIFR adalah salah satu fasilitas alternatif pengganti jenis font untuk memperindah 'typography', khususnya pada heading (H1, H2, dll), sama seperti halnya dengan cufon. Kali ini saya akan mencoba menggunakan sIFR 2.0 di 'blogger template' (sIFR sekarang telah keluar versi 3.0).

Tahapan Menggunakan sIFR2 di 'Blogger Template'

1. download sIFR 2.0.
2. Upload file javascript di google code hasil dari download sIFR 2.0 tadi, yaitu sifr-addons.js dan sifr.js.

Kalo ngak mau repot upload, pake script berikut ini simpan dibawah </head>:

<script src='http://choenblogspot.googlecode.com/files/sifr.js' type='text/javascript'></script>
<script src='http://choenblogspot.googlecode.com/files/sifr-addons.js' type='text/javascript'></script>

3. Masukan code CSS hasil anda download sIFR 0.2 (yaitu: sIFR-screen.css dan sIFR-print) di edit HTML, template anda.

Kalo ngak mau repot copy paste code berikut dibawah </head>:

<style media='print' type='text/css'>
/* This is the print stylesheet to hide the Flash headlines from the browser... regular browser text headlines will now print as normal */

.sIFR-flash, .sIFR-flash object, .sIFR-flash embed {
display: none !important;
height: 0;
width: 0;
position: absolute;
overflow: hidden;
}

span.sIFR-alternate {
visibility: visible !important;
display: block !important;
position: static !important;
left: auto !important;
top: auto !important;
}

</style>
<style media='screen' type='text/css'>
/* These are standard sIFR styles... do not modify */

.sIFR-flash {
visibility: visible !important;
margin: 0;
}

.sIFR-replaced {
visibility: visible !important;
}

span.sIFR-alternate {
position: absolute;
left: 0;
top: 0;
width: 0;
height: 0;
display: block;
overflow: hidden;
}

/* Hide Adblock Object tab: the text should show up just fine, not poorly with a tab laid over it. */
.sIFR-flash + div[adblocktab=true] {
display: none !important;
}

/* These "decoy" styles are used to hide the browser text before it is replaced... the negative-letter spacing in this case is used to make the browser text metrics match up with the sIFR text metrics since the sIFR text in this example is so much narrower... your own settings may vary... any weird sizing issues you may run into are usually fixed by tweaking these decoy styles */

.sIFR-hasFlash h1 {
visibility: hidden;
font-size: 16px;
letter-spacing: 40px;
}

.sIFR-hasFlash h2 {
visibility: hidden;
letter-spacing: -9px;
font-size: 14px;
}

.sIFR-hasFlash h3 {
visibility: hidden;
letter-spacing: -6px;
font-size: 20px;
}

.sIFR-hasFlash h4 {
visibility: hidden;
letter-spacing: -5px;
font-size: 21px;
}

.sIFR-hasFlash h5 {
letter-spacing: -4px;
visibility: hidden;
font-size: 14px;
}

.sIFR-hasFlash h6 {
letter-spacing: -4px;
visibility: hidden;
font-size: 12px;
}

</style>

4. Ini tahapan terpenting dari sIFR untuk menggunakan jenis font yang anda inginkan.

Sebenarnya ketika kita download sIFR 2.0 sudah disertakan file flash untuk membuat font, tapi ada cara lebih mudah, yaitu:

a. Pilih jenis font yang anda inginkan, atau cari di tempat yang menyediakan free font, kemudian simpan di desktop (sebab kalau masih di windows/font tidak bisa di upload).

b. Generate font yang anda telah pilih agar menjadi file swf, di sIFR Generator. Caranya tinggal anda upload font anda, kemudian next dan next sampai akhir hingga download. pada Step 2: Choose sIFR version, pilih sIFR 2, karena kita menggunakan sIFR 2.0.

c. Hasil donwload dari sIFR Generator, file font tersebut telah berupa '.swf', kemudian file swf tersebut perlu anda upload ke image shack, karena image shack bisa menyimpan file berbentuk .swf. Setelah anda upload ada ambil linknya, misalnya: http://img195.imageshack.us/img195/2534/copystruct.swf

d. Kemudian terakhir anda masukan javascript berikut untuk mengaktifkan font yang anda telah pilih tersebut, dengan cara semua alamat font dibawah perlu anda rubah sesuai font anda yang telah anda upload di image shack, disini saya menggunakan 3 jenis font untuk H1, H2 dan H3.

script tersebut, simpan dibawah </head>:

<script type='text/javascript'>
//<![CDATA[
/* Replacement calls. Please see documentation for more information. */

if(typeof sIFR == "function"){

// This is the preferred "named argument" syntax


sIFR.replaceElement(named({sSelector:"h1", sFlashSrc:"http://img291.imageshack.us/img291/2028/hotelcoralessexregular.swf", sColor:"#AD3C00", sWmode:'transparent'}));

sIFR.replaceElement(named({sSelector:"h2, h4, h6", sFlashSrc:"http://img199.imageshack.us/img199/2368/motorway.swf", sColor:"#2F1F00", sWmode:'transparent'}));


sIFR.replaceElement(named({sSelector:"h5", sFlashSrc:"http://img508.imageshack.us/img508/6843/jamesfajardo.swf", sWmode:'transparent'}));

};


//]]>
</script>

>> code berwarna merah tersebut yang perlu anda ganti dengan alamat font swf anda.

5. Sip Selesai, silahkan anda kutak katik kembali semua script/code diatas untuk menyesuaikan dengan karakter template anda, baik itu ukuran font dan warna.

>> catatan kelemahan sIFR 2.0 ini, untuk text link yang menggunakan sIFR tidak aktif. jadi jangan menggunakan heading (h1,h2 dst) untuk text link.

:: lihat juga penggunaan cufon pada 'blogger template'.

Read More

Alat Bantu Tipografi (CSS Type)

Terkadang kita sering kesulitan memilih jenis text/font (font-family, font-size, letter-spacing, word-spacing, line-height) yang tepat untuk tipografi blog atau web. Namun ada alat bantu (tool) online untuk mempermudah pemilihan text/font yang tepat untuk heading, p, quote, dll.

Alat Bantu Tipografi (CSS Type) tersebut:

"The Typetester is an online application for comparison of the fonts for the screen. Its primary role is to make web designer’s life easier."



"Typechart lets you flip through, preview and compare web typography while retrieving the CSS."



"CSS Type Set is a hands-on typography tool allowing designers and developers to interactively test and learn how to style their web content."

Read More

Cufon Pilihan lain Selain sIFR

Alat bantu untuk mengganti jenis font sangat beragam, salah satunya adalah Cufón. Cufon berbeda dengan sIFR yang menggunakan flash, tetapi Cufón hanya berupa javascript. Dengan fasilitas Cufón ini kita dapat menggunakan jenis font yang kita inginkan untuk diterapkan di web / blog.

Lebih lanjut mengenai Cufón:

1. About Cufón
2. Generator Cufón

Artikel Mengenai Cufón dan Penerapannya:

1. Introducing Cufón – sIFR alternative
2. Exploring Cufón, a sIFR alternative for font embedding

Script yang digunakan:

1. Script Cufón (dapat di download di sini):

<script type="text/javascript" src="js/cufon-yui.js"></script>

2. Script font hasil generator:

<script type="text/javascript" src="js/NamaFont.font.js"></script>

3. Untuk mengaktifkan Cufon ( textShadow untuk membuat shadow)

<script type="text/javascript">
Cufon.replace('h1', {
textShadow: '#fff -1px -1px, #333 1px 1px'
});
Cufon.replace('h2', {
textShadow: '#fff 1px 1px, #333 -1px -1px'
});
Cufon.replace('h3');
Cufon.replace('h4');

</script>


:: Lihat juga:
- Contoh penggunaan Cufón di blogspot / blogger di Typo-Cufón Blogger Template
- Trik Menghilangkan Font Asli untuk Pengguna Cufon

Read More

Jenis Font yang Populer untuk Website

Ada beragam jenis font yang dapat digunakan untuk website, tidak sekedar arial dan sans-serif {font-family: Arial, Sans-Serif;}. Jika anda ingin mencari pilihan lain yang anda ingin gunakan, Most Popular Website Fonts , menjadi pilihan terbaik.

Read More

Semuanya Tentang "Typography"

Permainan "Typography" menjadi bagian penting dalam sebuah desain. Begitu pula dengan desain blog atau website, pada perkembangannya sudah mulai memperhatikan aspek "Typography", sebab type atau huruf juga menjadi bagian penting didalamnya.

Berikut ini pengertian "Typography"

"Typography" (Tipografi) merupakan suatu ilmu dalam memilih dan menata huruf dengan pengaturan penyebarannya pada ruang-ruang yang tersedia, untuk menciptakan kesan tertentu, sehingga dapat menolong pembaca untuk mendapatkan kenyamanan membaca semaksimal mungkin.

Dikenal pula seni tipografi, yaitu karya atau desain yang menggunakan pengaturan huruf sebagai elemen utama. Dalam seni tipografi, pengertian huruf sebagai lambang bunyi bisa diabaikan. (wikipedia)

Artikel tentang "Typography":

1. 8 Simple Ways to Improve Typography In Your Designs

2. A Guide to Web Typography

3. 10 Principles For Readable Web Typography

4. 6 Ways To Improve Your Web Typography

5. The Elements of Typographic Style Applied to the Web

Lebih lanjut blog/atau web yang membahas tentang "Typography":

AisleOne

i love typography

Tool untuk membantu desain "Web Typography"

50 Useful Design Tools For Beautiful Web Typography

Tempat untuk memperoleh inspirasi konsep desain "Typography":

Typesites

Fantastic Typography Blogs For Your Inspiration

Video tentang "Typography"

1. Typography Styles

2. Sessions - Fundamentals of Typography: Anatomy of Type

3. Typographics - Vancouver Film School (VFS)



4. Graphic Design: The Forgotten Web Standard

Free Template dengan konsep "Typography":

1. Free WordPress Theme: WP Typo

demo:


2. Free Typographic XHTML/CSS-Layouts For Your Designs

-----------
:: lihat juga: 101 Typography Resources for Web Designers

Read More

Koleksi 'Free Fonts'

Berikut ini beberapa alamat yang menyediakan 'font' dalam berbagai karakter atau kategori yang dapat anda download secara gratis/free.

Jika anda membutuhkan "free fonts" tersebut, berikut ini beberapa alamat tersebut:


1. Font Squirrel



"Handpicked free fonts for graphic designers with commercial-use licenses"

2. Font Cubes



"Here you'll find the best free PC fonts and free Mac Fonts from the best font artists in the world. The fonts listed in our free font collection are their author's property. Please contact their authors for further consultation regarding the use of the listed fonts."

3. 1001 Free Fonts



"Welcome to 1001 Free Fonts - Download Free Fonts for Windows and Macintosh"

4. SearchFreeFonts.com



"AdineKirnberg Regular
Description: Download free AdineKirnberg font from SearchFreeFonts.com. Available in True Type format for Windows and Mac. Preview AdineKirnberg font by typing your own text, zoom in on characters, write comments, or add to favorites for later download."

5. dafont.com



"Archive of freely downloadable fonts. Browse by alphabetical listing, by style, by author or by popularity"

6. abstractfonts.com



"You can view the fonts in many ways: latest, by category, by designer, by recent popularity, popularity climbers and sliders, similarity, best and worst rated, and more."

Read More

Cara Alternatif Pengganti Jenis Font di Web / Blog

Ada beragam cara alternatif untuk mengganti jenis font agar tidak standar lagi, tanpa perlu menggunakan image, sehingga tampilan typography blog atau web anda semakin menarik.

Cara Alternatif Pengganti Jenis Font

1. Cufón.



"Cufón aims to become a worthy alternative to sIFR, which despite its merits still remains painfully tricky to set up and use. Cufón consists of two individual parts – a font generator, which converts fonts to a proprietary format and a rendering engine written in JavaScript."

Artikel Penerapan Cufón:
Exploring Cufón, a sIFR alternative for font embedding

2. sIFR 2.0 dan sIFR 3



"sIFR is meant to replace short passages of plain browser text with text rendered in your typeface of choice, regardless of whether or not your users have that font installed on their systems. It accomplishes this by using a combination of javascript, CSS, and Flash."

Artikel Penerapan sIFR:
- This is How You Get sIFR to Work
- How to Use sIFR 3 (video Tutorial)
- How To Implement sIFR3 Into Your Website

3. FLIR



FLIR (Facelift Image Replacement) dynamically generates image representations of text on your web page in fonts that otherwise might not be visible to your visitors. The generated image will be automatically inserted into your web page via Javascript and visible to all modern browsers.

Artikel Penerapan FLIR:
- How To Use Any Font You Wish With FLIR

4. Typeface


"With typeface.js you can embed custom fonts in your web pages so you don't have to render text to images."

Format lain dari typeface:
Type Select, Selectable Text Replacement

:: lihat juga: Text Replacement Roundup: The Pros and Cons of SIFR, Cufon, Typeface.js, and FLIR

Read More