Cara Menggunakan Font Dari Komputer Di Blog

Advertisement

Your Ads Here

Cara Menggunakan Font Dari Komputer Di Blog - Sebenarnya postingan kali ini adalah request dari salah satu teman blogger kita. Yah, namanya tidak usah disebutkan, palingan entar juga nongol di kotak komentar :)

Mungkin dari kalian sudah tau bagaimana cara menambahkan font di blog dengan Google Font. Tetapi bagaimana jika anda belum puas dengan font yang sudah tersedia di layanan font gratis dari google itu? Nah disinilah anda membutuhkan cara ini. Mungkin kalian punya font yang keren-keren di komputer tapi tidak tau bagaimana cara menggunakanya di blog. Kalo mau tau caranya simak tutorial berikut ini.

Langkah 1 : Cara Mendapatkan @font-face Kit

1. Buka http://www.fontsquirrel.com/fontface/generator

2. Pilih Add Fonts

3. Pilih Font yang ingin digunakan

4. Jika sudah menemukan font yang diinginkan pilih Open

5. Tunggu prosses upload font, lalu pilih Download Your Kit

6. Tunggu prosses loading pembuatan Kit-nya, jika sudah selesai akan langsung terdownload

Langkah 2 : Cara Upload @font-face Kit ke Hosting

1. Extract file yang sudah terdownload
2. Buka Google Site lalu klik Create Site
3. Isikan Tittle Site pada form yang tersedia, lalu klik Buat

4. Pilih Tab Create Page / Buat Laman pada pojok kanan atas site yang telah kamu buat tadi

5. Beri Judul Halaman, lalu klik Buat
6. Pada laman baru kamu tadi klik Tambahkan File, pilih file type EOT, TTF, SVG, WOFF, dan CCS yang telah di extract, lalu klik Open

7. Salin URL file yang bernama stylesheet.css pada link unduh

https://sites.google.com/site/adobecaslonpro/blog-mas-hanif/stylesheet.css?attredirects=0&d=1

8. Letakkan kode css itu pada template kamu, dengan menghilangkan kode yang berwarna merah

Langkah 3 : Cara Menambahkan Kode CSS Ke Template

Letakkan kode CSS dibawah kode ]]></b:skin>, Contohnya begini :

]]></b:skin><link rel='stylesheet' href='https://sites.google.com/site/adobecaslonpro/blog-mas-hanif/stylesheet.css' type='text/css'/>

Langkah 4 : Cara Menggunakan Font

Sekarang setelah selesai melakukan langkah langkah sebelumnya anda tinggal memakai font itu. Contohnya seperti di bawah ini :

#outer-wrapper {margin:0 auto;padding:0px;text-align:$startSide;font-family:"adobe_caslon_proregular";font-size:13px;margin:10px auto;}

#header { max-width: 450px; text-align: left; color:#fff;float: left; font-weight: 700; font-family: adobe_caslon_proregular;}

Catatan : Untuk mendapat nama font anda bisa membuka file yang bernama stylesheet.css dan menemukan kede seperti berikut ini :

@font-face { font-family: 'adobe_caslon_proregular';

Huruf warna merah adalah nama font anda.

Sekian sedikit tutorial dari saya, semoga tutorial ini bisa bermanfaat bagi teman-teman blogger. Baca juga artikel tentang Cara Menambah dan Mengganti Jenis Font di Blog.

Advertisement

Your Ads Here