Cara Membuat Font Menggunakan Inkscape dan FontForge (2)

Nah, pada tutorial kedua kali ini. Saya akan menjelaskan cara mengexport font yang sudah kita buat tadi di Inkscape ke FontForge. Sebelumnya yang harus dilakukan terlebih dahulu adalah teman-teman harus mensave dulu font yang sudah dibuat dalam format SVG. Jangan sampai salah ya! Karena tidak baik bagi kesehatan pencernaan Hehe

Oke, bagi yang belum membaca bagian pertama silahkan dibaca dulu disini Bagian PertamaBagi yang sudah, berarti kita akan menuju tahap selanjutnya yaitu Bikin Font. Assikk

Langsung saja kita mulai. Cekidot 😀

TAHAP PERTAMA

1. Pertama-tama yang harus kita lakukan adalah membuka font yang sudah kita desain di FontForge. Belum punya aplikasinya, silahkan download terlebih dahulu. Link downloadnya adalah di bagian pertama. Cara buka font yaitu, Buka aplikasi FontForge, kemudian cari file font yang sudah kita desain di Inkscape kemudian klik Ok. Jika sudah maka tampilannya akan seperti ini:

Itu contoh font yang berhasil saya buat dan saya buka di FontForge. Kemudian langkah selanjutnya adalah membuat halaman baru di FontForge. INI SANGAT PENTING! JANGAN SAMPAI LUPA YA HEHE. Kalau lupa, maka font yang kita desain akan EROR tidak bisa diedit lagi dan harus mulai dari awal kembali. Capek kan,,, ya iyalah 😀

2. Bikin halaman baru dengan cara pilih File >New. Maka tampilannya akan menjadi kosong seperti ini:

Kemudian Copy Paste huruf yang kawan desain ke halaman baru ini. Letakkan huruf sesuai dengan karakter masing-masing. Jangan sampai salah oke. Kemudian jangan lupa di Save.

TAHAP KEDUA

1. Nah, pada tahap ini kita akan mensejajarkan semua huruf yang sudah kita Copas dihalaman batu tadi. Supaya font yang kita bikin akan terlihat lebih bagus dan rapi broo :D. Caranya adalah Klik 2 x di setiap huruf. Kemudian ctrl + A, tarik hurufnya ke garis dibawah. Lebih jelasnya bisa lihat perbedaan gambar sebelum dan sesudah ditarik.

Sebelum ditarik

Sebelum ditarik

 

Sesudah ditarik

 

Lakukan pada semua huruf yang teman-teman desain sampai selesai.

2. Kemudian, setelah semua huruf yang kita letakkan rapi, maka langkah selanjutnya adalah mensetting jarak setiap hurufnya. Jika jarak setiap huruf tidak disetting maka terlihat jelek. Contohnya seperti ini:

 

Harus diingat bahwa jarak itu ada kanan dan kiri. Supaya lebih mudah, semua huruf di Blok terlebih dahulu. Kemudian pilih Metrics > Set LBearing Menjadi 50 Misalnya (Terserah sobat, mau sampai 100 juga boleh :D). Selanjutnya Metrics > Set RBearing Menjadi 50 juga misalnya. Maka tampilannya akan seperti ini.

 

Atau bisa juga secara manual dengan cara menempatkan cursor di garis, baik sebelah kanan maupun kiri. Kemudian klik  dan tarik sesuai keinginan. Untuk lebih jelasnya silahkan lihat gambar di bawah:

3. Nah, untuk melihat preview test font kita berfungsi apa tidak bisa dilihat di Windows > New Metrics Windows dan klik. Maka tampilannya akan seperti ini:

Penjelasan:

  1. Tempat menulis text font yang kita bikin
  2. Tampilan hasil font kita. Soba bisa mencoba dengan kalimat lain.

TAHAP KETIGA

1. Pada tahap ini kita akan mengatur Kerning, jarak antara setiap font. Karena tidak semua karakter sama jaraknya, maka dibutuhkanlah yang namanya kerning. Misal huruf dengan V. Bisa dilihat perbedaan setelah dan sebelum diatur kerning.

Sebelum diatur Kerning

Sesudah diatur Kerning

2. Mari kita atur kernignya sekarang gan. Jangan lupa minum kopi dulu kawan, biar nggk capek xixixi :D. Caranya yaitu Element > Font Info, Maka akan muncul tampilan seperti ini:

Penjelasan:

  1. Klik Lookups
  2. Klik GPOS
  3. Klik Add Lookup
  4. Kemudian Ok

Makan tampilan yang muncul selanjutnya adalah seperti ini:

Penjelasan:

  1. Pilih Pair Position (kerning)
  2. Tulis kode kern  di sini (ingat harus huruf kecil ya)
  3. Tulis Kerning
  4. Klik Ok

Setelah itu akan muncul tampilan seperti ini:

Langkah selanjutnya kita akan klik Add Subtable, maka akan muncul tampilan seperti ini:

Penjelasan:

Klik huruf yang ingin kita atur kerning, satu di atas dan satu di bawah. Kemudian klik Ok. Maka akan muncul tampilan seperti ini:

Penjelasan:

  1. Tambah huruf yang ingin kita atur kerningnya masing-masing. Satu sebelah kanan, satunya lagi sebelah kiri.
  2. Atur jumlah besar kecil jarak hurufnya.
  3. Hasil tampilan yang kita atur (preview).
  4. Tambah huruf yang ingin kita atur kerningnya.
  5. Jika sudah selesai semua, maka klik OK

Nah, untuk melihat preview kerning font kita berfungsi apa tidak bisa dilihat di Windows > New Metrics Windows dan klik.

TAHAP KEEMPAT

1. Nah sebelum ke tahap terakhir, kita akan mengatur nama font kita dulu. Caranya pilih Element > Font Info > PS Name, maka akan muncul tampilan seperti ini:

Penjelasan:

  1. Tulis nama font
  2. Tulis nama Family font
  3. Tulis sesuai dengan nama font di nomor 1
  4. Tulis ukuran font (Regular atau Light atau Bold atau Italic atau Oblique dll)
  5. Tulis versi keberapa font nya
  6. Tulis Copyright nya

2. Langkah selanjutnya adalah kita akan mengexport hasil font yang kita bikin ke format TTF, OTF atau WOFF agar nantinya bisa kita install di komputer. Caranya adalah sebagai berikut:

Penjelasan:

  1. Tulis nama font
  2. Pilih ingin diformat TTF, OTF atau WOFF atau format lainnya
  3. Klik Generate
  4. Taadaaa font yang kita bikin selesai 😀

NOTE: Jika muncul pesan eror ketika kita Generate, dibiarin aja. Langsung Ok aja ya. Memang begitu dia FontForgenya. Maklum versi gratisan. Tapi insya Allah tidak ada masalah ketika kita install di komputer.

Nah, itulah sedikit penjelasan tentang bagaimana cara kita membuat font menggunakan Inkscape dan FontForge. Jika ada yang ingin ditanyakan silahkan meninggalkan komentar dibawah. 😀

Salam hangat,

CEO HAEKAL

Leave a comment



imam munandar

11 months ago

kalo mau nambah ligature sam alternate gimana caranya di fontforge

Admin

10 months ago

Tunggu artikel selanjutnya ya hehe 😀

Imammunandar

10 months ago

Siap…
Mudhan ceper jadi…😁

Sabil

10 months ago

Maaf tanya mas kenapa saat generate jadi font hasilnya kerning tidak berfungsi tetap jaraknya seperti sebelum di atur kerningnya.. trmikasih

Salim

10 months ago

Iya tuh tolong buatkan tutorial ligatur,sama altrrnate nya,
Makasih ya ,saya jadi mulai paham alur bikin font nya.
Oiya saya ga ngerti bikin glypse di inkscape, saya pake illustrator cs2 yg ud di gratisin , pertanyaan nya kok .svg yg saya save dari ai ga kebaca ya di fontforge?

Cara Membuat Ligature Menggunakan FontForge – Graphicfresh

8 months ago

[…] Bagian Kedua    : Disini […]

Aly Chiman

4 months ago

Hello there,

My name is Aly and I would like to know if you would have any interest to have your website here at graphicfresh.com promoted as a resource on our blog alychidesign.com ?

We are in the midst of updating our broken link resources to include current and up to date resources for our readers. Our resource links are manually approved allowing us to mark a link as a do-follow link as well
.
If you may be interested please in being included as a resource on our blog, please let me know.

Thanks,
Aly

Cara Membuat Alternate dan Swash di FontForge – Graphicfresh

3 months ago

[…] paham juga, berarti teman-teman belum baca artikel Pertama, Kedua dan Ketiga yang saya tulis. Jangan loncat-loncat ya baca artikelnya hehe […]

Ghazi Humam Fauzan

3 months ago

Mas maaf gimana caranya supaya font yg udah diklik dua kali itu bisa pas di atas garis bawah? , kalau di inkscape kan ada fitur align bottom dll..

Admin

3 months ago

Tinggal ditarik aja ke bawah gan pas di Fontforge

Ghazi Humam Fauzan

3 months ago

Cara buat spasi gimana ya mas?

Admin

3 months ago

Kolom spasi ada disamping huruf “!”

Andri A

2 weeks ago

untuk kanal youtubenya, apakah ada om? terima kasih, sangat berguna artikelnya

Admin

2 weeks ago

Untuk youtube belm aja mas

gf

Follow us

Contact us

+6282325126359
admin@graphicfresh.com

Cot Rabo Tunong, Peusangan, Bireuen, Indonesia 24261

Copyright 2018 Graphicfresh © All Rights Reserved

%d bloggers like this: