Tutorial Cara Membuat Font Menggunakan Inkscape dan FontForge (Bagian 2)
![Tutorial Membuat Font Menggunakan Inkscape dan FontForge Tutorial Cara Membuat Font Menggunakan Inkscape dan FontForge](https://4.bp.blogspot.com/-ktnV0AajvG0/XFcCVUiTvYI/AAAAAAAANwk/cw3VwPs4zegylDpDYYlSTUBB_B_KLAkggCLcBGAs/s0-rw/tutorial-membuat-font-2.png)
Pada tutorial bagian kedua ini kita akan mulai menggunakan software FontForge yang sudah di download sebelumnya. Yang akan di jelaskan pada lanjutan tutorial ini adalah bagaimana cara mengeksport font yang sudah selesai dibuat di Inskcape ke FontForge, sebagai pengingat! jangan lupa untuk Save font yang sudah di kerjakan tadi dalam format SVG.
Bagi yang belum membaca tutorial bagian pertama disarankan untuk membacanya dulu di sini karena akan susah memahami penjelasan bagian kedua ini tanpa membaca bagian pertama. bagi yang sudah selesai membacanya, silahkan menuju ketahap selanjutnya :
Tahap Pertama
Pertama-tama yang perlu dilakukan adalah membuka font yang sudah selesai dibuat melalui FontForge dengan cara :
- Buka aplikasi FontForge,
- Cari file font yang sudah Anda desain di Inkscape kemudian klik OK. Tampilannya seperti gambar dibawah :
![Tampilan Pertama FontForge Software - Interface](https://2.bp.blogspot.com/-2sKZutPMmss/WpkYfTe0LwI/AAAAAAAALSY/MSK629n-gxscU7EpflejQMFdsuezIcjBACLcBGAs/s0/cara-membuat-font-2-10.jpg)
Langkah selanjutnya adalah membuat halaman baru di FontForge. Ini sangat Penting!, jika tidak dilakukan atau lupa maka font yang sudah di desain akan ERROR tidak bisa di edit lagi dan harus memulai dari tahap pertama lagi.
Untuk membuat halaman baru silahkan pilih File > New. Maka tampilanya akan menjadi kosong seperti ini :
![Tampilan Halaman Baru FontForge Software - New File](https://2.bp.blogspot.com/-yL-SvD_x1hM/WpkYgW0dfSI/AAAAAAAALSc/mMwqWiK3dd8gfkEfmshqn-odJ9v4lGCqQCLcBGAs/s0/cara-membuat-font-2-11.jpg)
Kemudian Copy Paste huruf yang Anda buat di halaman baru ini, letakkan huruf sesuai dengan karakter masing-masing lalu Save file tersebut.
Tahap kedua
Pada tahap ini sejajarkan semua huruf yang sudah di Copy Paste dihalaman baru tadi agar font yang kita buat akan terlihat lebih bagus dan rapi. Caranya Klik 2x disetiap huruf. Kemudian tekan ctrl + A, tarik hurufnya ke garis bawah. Lebih jelasnya bisa dilihat perdaan gambar sebelum dan sesudah di tarik dibawah ini :
![Sebelum Ditarik FontForge Software - Create Font](https://2.bp.blogspot.com/-5xzRIhPHOr8/WpkYhvIHcRI/AAAAAAAALSg/toqbSvXZUyU98WU66CKr3r25jZSzdIKLACLcBGAs/s0/cara-membuat-font-2-12.jpg)
![Sesudah Ditarik FontForge Software - Create Font](https://2.bp.blogspot.com/-miGV_31w-x4/WpkYi4EWBCI/AAAAAAAALSk/knF55iUWq0IFHagVc5vL4uPjEJH76cdqACLcBGAs/s0/cara-membuat-font-2-13.jpg)
Lakukan pada semua huruf yang sudah Anda desain sampai selesai.
Setelah semua huruf yang Anda sejajarkan rapi, maka langkah selanjutnya adalah mensetting jarak di setiap hurufnya. Jika jarak setiap huruf tidak di setting akan terlihat jelek hasilnya nanti. berikut gambarannya :
![Atur Jarak Font FontForge Software - Setting Kerning](https://2.bp.blogspot.com/-DpJ6zszq6V8/WpkYjTEiDbI/AAAAAAAALSo/QDX2IRu2TGMxpVZmUCFgXJmJvENUmUDUQCLcBGAs/s0/cara-membuat-font-2-14.jpg)
Harus diingat!
bahwa jarak yang dimaksud disini adalah Jarak Kanan dan Kiri. Agar lebih muda dan cepat, Blok semua huruf terlebih dahulu, kemudian pilih Metrics > Set LBearing menjadi 50 misalnya (atur sesuai keinginan Anda). Selanjutnya Metrics > Set RBrearing menjadi 50 juga misalnya (disarankan untuk memberikan nilai yang sama pada jarak kiri dan kanan).
Tampilannya akan seperti ini :
![Atur Jarak Font Kiri dan kanan FontForge Software - Setting Bearing](https://4.bp.blogspot.com/-fMkZ3Ie0sOc/WpkYkTt8zYI/AAAAAAAALSs/mjh3LGsEFUwc5GT0WLbKDQgA4pEV8B4LQCLcBGAs/s0/cara-membuat-font-2-15.jpg)
Atau bisa juga memakai cara manual dengan cara menempatkan Cursor pada garis, baik bagian Kiri atau Kanan. Kemudian Klik dan Tarik sesuai keinginan. Untuk lebih jelasnya perhatikan gambar dibawah :
![Atur Jarak Secara Manual FontForge Software - Set Bearing Manual](https://3.bp.blogspot.com/-D2lgv6KQI98/WpkYlPl-_pI/AAAAAAAALSw/udfdg5570u4uCY-0-NctE4F9IugodY3qQCLcBGAs/s0/cara-membuat-font-2-16.jpg)
Untuk memastikan apakah font yang Anda buat berfungsi atau tidak bisa dilihat previewnya di Windows > New Metrics Windows dan Klik. Maka tampilannya akan seperti ini :
![Preview Tampilan Font FontForge Software - Preview Font](https://4.bp.blogspot.com/-gAMqc-QQyRE/WpkYmIqP2AI/AAAAAAAALS0/YGgEc2Uk8C8YZWDWN2HirYydr25-O5uDwCLcBGAs/s0/cara-membuat-font-2-17.jpg)
Penjelasan :
- Tempat menulis font yang Anda buat,
- Tampilan hasil font Anda, bisa di coba dengan menulis kalimat lain.
Tahap Ketiga
Pada tahap berikut ini kita akan mengatur Kerning atau jarak antara setiap font. Karena tidak semua karakter sama jaraknya, maka dibutuhkan Kerning. Misal huruf A dengan V. Bisa dilihat perbedan setelah dan sebelum diatur Kerning-nya.
![Sebelum Diatur Kerning FontForge Software - Set Kerning](https://3.bp.blogspot.com/-HyrGKBM6sNI/WpkYxAwgt1I/AAAAAAAALS4/zFGw2kBidfgGrFKor3mi5x2Y1g4eyHtxwCLcBGAs/s0/cara-membuat-font-2-18.jpg)
![Sesudah Diatur Kerning FontForge Software - After Set Kerning](https://3.bp.blogspot.com/-yGBfqPQ6bh8/WpkYyFmpDhI/AAAAAAAALS8/OVYjOT3x2Fg3spgt6pyzK-Wn7ri84qONgCLcBGAs/s0/cara-membuat-font-2-19.jpg)
Berikut cara mengatur Kering. Silahkan klik Element > Font Info, Maka akan muncul tampilan seperti ini :
![Cara Mengatur Kerning (1) FontForge Software - Set Kerning](https://2.bp.blogspot.com/-UJd5H1xdP9M/WpkYypyGUzI/AAAAAAAALTA/TPuhrcbduY0thCp5UNRxVJonieIOqDi8wCLcBGAs/s0/cara-membuat-font-2-20.jpg)
Penjelasan :
- Klik Lookups
- Klil GPOS
- Klik Add Lookup
- Kemudian Klik Ok
Maka tampilan yang muncul selanjutnya adalah seperti dibawah ini :
![Cara Mengatur Kerning (2) FontForge Software - Set Kerning](https://2.bp.blogspot.com/-RBfW27AWtS8/WpkYz9pJ9UI/AAAAAAAALTE/TZs1gD_H_WUrOk8tA2H721r-TykFcPY1wCLcBGAs/s0/cara-membuat-font-2-21.jpg)
Penjelasan :
- Pilih Pair Position (Kerning)
- Tulis kode Kern di sini (Ingat harus memakai huruf kecil)
- Tulis Kerning
- Kemudian Klik Ok
Maka setelah ini akan muncul tampilan seperti ini :
![Cara Mengatur Kerning (3) FontForge Software - Set Kerning](https://4.bp.blogspot.com/-lJkjRpqvOQc/WpkYU08-J7I/AAAAAAAALSU/1k4vYifniGADh7LsIH9FSLSIYsw8TG64ACLcBGAs/s0/cara-membuat-font-2-2.jpg)
Langkah selanjutnya klik Add Subtable, maka akan muncul tampilan seperti ini:
![Cara Mengatur Kerning (4) FontForge Software - Set Kerning](https://4.bp.blogspot.com/-FIHsk1MhNRE/WpkY02tV8uI/AAAAAAAALTI/LJZ83UA0f10ShAqdgtstGaQf0j2VETm3gCLcBGAs/s0/cara-membuat-font-2-23.jpg)
Penjelasan :
Klik huruf yang ingin Anda atur Kerning, satu di Atas dan satu di Bawah. Kemudian klik Ok, akan muncul tampilan seperti gambar dibawah ini :
![Cara Mengatur Kerning (5) FontForge Software - Set Kerning](https://4.bp.blogspot.com/-EkdxQ6vRQYk/WpkY1yLKLKI/AAAAAAAALTM/ry5NqzXBXUM02GCqzeuSU9HSQldOofH2gCLcBGAs/s0/cara-membuat-font-2-24.jpg)
- Tambah huruf yang ingin Anda atur Kerning-nya masing-masing, satu sebelah Kanan dan satu sebelah Kiri.
- Atur jumlah besar kecil jarak hurufnya.
- Hasil tampilah huruf yang sudah diatur (preview).
- Tambah huruf yang ingin Anda atur Kerning-nya.
- Jika sudah selesai semua, maka klik Ok.
Untuk melihat apakah kerning font yang sudah diatur berfungsi atau tidak bisa di lihat di Windows > New Metrics Windows dan klik.
Tahap keempat
Sebelum menuju tahap terakhir, kita akan mengatur nama font yang sudah kita buat terlebih dahulu. Caranya yaitu pilih Element > Font Info > PS Name, maka akan muncul tampilan seperti gambar di bawah :
![Cara Mengatur Nama Font FontForge Software - Set Font Name](https://2.bp.blogspot.com/-cdvhC1XYgoU/WpkY2qOSjsI/AAAAAAAALTQ/cXhn_u89bPkSmqvPUY67m5R0e8feOrlKwCLcBGAs/s0/cara-membuat-font-2-25.jpg)
Penjelasan :
- Tulis Nama Font, Arial Italic misal.
- Tulis Nama Family Font
- Tulis sesuai dengan nama font di nomor 1
- Tulis ukuran font (Regular atau Light atau Bold atau Italic atau Oblique dll)
- Tulis versi keberapa fontnya
- Tulis Copyright-nya
Langkah selanjutnya adalah export hasil font yang Anda buat ke format TTF, OTF atau WOFF agar nantinya bisa di install lewat komputer. Caranya adalah sebagai berikut:
![Ekspor Font ke format yang diinginkan FontForge Software - Export Font to TTF, OTF or WOFF](https://2.bp.blogspot.com/-0eHNm3Si42g/WpkY3Xz7zYI/AAAAAAAALTU/SWHsCuHBpNIxz1SNvgPnHU0rtKCBoH5mQCLcBGAs/s0/cara-membuat-font-2-26.jpg)
Penjelasan :
- Tulis Nama font (untuk filenya), misal Lobster.ttf
- Pilih format yang diinginkan TTF, OTF atau WOFF atau format lainnya.
- Terakhir klik Generate, dan font Anda sudah selesai.
Note:
Jika muncul pesan error ketika di klik Generate, biarkan saja. Langsung klik Ok, karna FontForge versi gratis dan masih dikembangkan maka hal seperti ini wajar terjadi tapi biasanya tidak ada masalah ketika font diinstal di komputer.
Sekarang cobalah instal hasil font yang sudah jadi tadi kedalam komputer Anda untuk mencobanya secara langsung. Terimakasih sudah membaca
Referensi:
graphicfresh.com