{"id":4464,"date":"2018-08-02T23:17:03","date_gmt":"2018-08-02T21:17:03","guid":{"rendered":"https:\/\/monodes.com\/predaelli\/?p=4464"},"modified":"2018-08-02T23:17:03","modified_gmt":"2018-08-02T21:17:03","slug":"creating-a-handwritten-truetype-font-in-linux-gordon-lesti","status":"publish","type":"post","link":"https:\/\/monodes.com\/predaelli\/2018\/08\/02\/creating-a-handwritten-truetype-font-in-linux-gordon-lesti\/","title":{"rendered":"Creating a handwritten TrueType font in Linux \u2013 Gordon Lesti"},"content":{"rendered":"

A small tutorial that shows the creation of a handwritten TrueType font in Linux with FontForge and Inkscape.<\/p><\/blockquote>\n

Sorgente: Creating a handwritten TrueType font in Linux \u2013 Gordon Lesti<\/a><\/em><\/p>\n

<\/p>\n

\n

Creating a handwritten TrueType font in Linux<\/h1>\n

Mar 21, 2018<\/span> Art<\/a> Inkscape<\/a> Linux<\/a><\/p>\n

I always wanted to create a font out of my handwritten letters and in this small tutorial I will show you the way I have done it with the help of FontForge<\/a>, Inkscape<\/a> and GIMP<\/a>.<\/p>\n

\"\"<\/a>\u00a0<\/span><\/p>\n

Writing some letters<\/h2>\n

Start by writing the alphabet in lower and upper case plus numerics and some special characters. Good for this job is a graph paper for example. Afterwards you scan the paper and the result should look similar to my one.<\/p>\n

\"\"<\/a><\/p>\n

Preparing the scan<\/h2>\n
\n
\n

Let us open the scan in GIMP<\/i> and use the Brightness and Contrast<\/i> tool under the menu point Colors<\/i>. Increase the Contrast<\/i> until the letters have nice shape. The hadnwritten scan should look similar to my one. Mostly black and white should be visible.<\/p>\n<\/div>\n

\"\"<\/a><\/div>\n<\/div>\n

\"\"<\/a><\/p>\n

From raster graphics to vector graphics with Inkscape<\/h2>\n
\n
\n

Copy the whole scan with high contrast from GIMP<\/i> to your clipboard and open Inkscape<\/i>. Paste the scan from the clipboard into Inkscape<\/i>. Open the Trace Bitmap<\/i> tool under the menu item Path<\/i> while having the scan object selected.<\/p>\n

Use Grays<\/i> under Multiple scans<\/i> and set the number of Scans<\/i> to 2<\/i>. Press the OK<\/i> button afterwards and close the tool if it ready.<\/p>\n<\/div>\n

\"\"<\/a><\/div>\n<\/div>\n

Preparing the handwritten vector graphic<\/h3>\n

The result should be an object group with layers. Ungroup the the object group and remove the background layer. Your vector graphic should look similar to my SVG image in Inkscape.<\/p>\n

\"\"<\/a><\/p>\n

From SVG to a TrueType font with FontForge<\/h2>\n

First of all start FontForge and press the New<\/i> button to create a new font.<\/p>\n

\"\"<\/a><\/p>\n

The following steps have to be repeated for every character in your font. I will show you the steps on the example character A<\/i>.<\/p>\n

Extract character from SVG path<\/h3>\n

Duplicate the characters layer by pressing Ctrl<\/code> + D<\/code> for example. Use the Edit paths by Nodes<\/i> tool or just pressing F2<\/code> while having one characters layer selected. And remove every node and path that is not part of the A<\/i> character. The following image shows all nodes except the A<\/i> as selected before deleting them.<\/p>\n

\"\"<\/a><\/p>\n

Simplify the character path<\/h4>\n

The next step is to simplify the path of the character. The tool is in the menu under Path<\/i> and Simplify<\/i> or just pressing Ctrl<\/code> + L<\/code>. The simplified character should look similar to my one afterwards.<\/p>\n

\"\"<\/a><\/p>\n

Paste the character path to FontForge<\/h4>\n

Copy the character path in Inkscape and let us open the character A<\/i> in our empty FontForge font with a double click. Now paste the path of the character into FontForge. The result should similar to my one.<\/p>\n

\"\"<\/a><\/p>\n

Scale the character in FontForge with stable aspect ratio<\/h4>\n

Please select the whole path of the character with Ctrl<\/code> + A<\/code> and use the Scale the Selection<\/i> tool of the toolbar. Use the scale tool with the Shift<\/code> key pressed to keep the aspect ratio of the path. Move the character to the zero line and scale it until the character fits the top boundary.<\/p>\n

\"\"<\/a><\/p>\n

Afterwards you have to move the right boundary until it fits your character. Depending on your style you should keep more or less space between the boundary and the character. Close the character window and repeat the last steps for every character including the space<\/code> character.<\/p>\n

Export TrueType font with FontForge<\/h2>\n

Your font should similar to my one afterwards.<\/p>\n

\"\"<\/a>\"\"<\/a><\/p>\n

Please make sure to save your font as sfd<\/code> file and after all you can export it as TrueType font via the menu item File<\/i> and Generate Fonts…<\/i>.<\/p>\n

Your handwritten font as web font<\/h2>\n

There are other font formats, but normally every modern browser understands TrueType fonts. The following small example loads my font and shows you the usage of it.<\/p>\n

<span class="token tag"><span class="token punctuation"><<\/span>style<span class="token punctuation">><\/span><\/span><span class="token style language-css">\n<span class="token atrule"><span class="token rule">@font-face<\/span><\/span> <span class="token punctuation">{<\/span>\n    <span class="token property">font-family<\/span><span class="token punctuation">:<\/span> MrPoopybutthole<span class="token punctuation">;<\/span>\n    <span class="token property">src<\/span><span class="token punctuation">:<\/span> <span class="token url">url(path_to\/mrpoopybutthole.ttf)<\/span><span class="token punctuation">;<\/span>\n<span class="token punctuation">}<\/span>\n<\/span><span class="token tag"><span class="token punctuation"><\/<\/span>style<span class="token punctuation">><\/span><\/span>\n<span class="token tag"><span class="token punctuation"><<\/span>p<span class="token style-attr language-css"><span class="token attr-name"> style<\/span><span class="token punctuation">="<\/span><span class="token attr-value"><span class="token property">font-family<\/span><span class="token punctuation">:<\/span> MrPoopybutthole<span class="token punctuation">;<\/span><\/span><span class="token punctuation">"<\/span><\/span><span class="token punctuation">><\/span><\/span>MrPoopybutthole<span class="token tag"><span class="token punctuation"><\/<\/span>p<span class="token punctuation">><\/span><\/span><\/code><\/pre>\n<\/blockquote>\n","protected":false},"excerpt":{"rendered":"
A small tutorial that shows the creation of a handwritten TrueType font in Linux with FontForge and Inkscape. Sorgente: Creating a handwritten TrueType font in Linux \u2013 Gordon Lesti<\/p>\n
Read more →<\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"link","meta":{"inline_featured_image":false,"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"activitypub_content_warning":"","activitypub_content_visibility":"","activitypub_max_image_attachments":4,"activitypub_interaction_policy_quote":"anyone","activitypub_status":"","footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2}},"categories":[72,148],"tags":[],"class_list":["post-4464","post","type-post","status-publish","format-link","hentry","category-documentations","category-fonts","post_format-post-format-link"],"jetpack_publicize_connections":[],"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"jetpack_shortlink":"https:\/\/wp.me\/p6daft-1a0","jetpack-related-posts":[{"id":39,"url":"https:\/\/monodes.com\/predaelli\/2014\/09\/10\/your-own-handwriting-font\/","url_meta":{"origin":4464,"position":0},"title":"Your own handwriting font","author":"Paolo Redaelli","date":"2014-09-10","format":false,"excerpt":"Here's a nice article on how to create a TrueType font from your handwriting with your scanner, your printer, and FontForgeOk there are gratis websites like http:\/\/www.paintfont.com\/ or if\u00a0 you are lazy http:\/\/www.fontsquirrel.com\/ . There is also a \"free-as-in-freedom\" font-related site at http:\/\/openfontlibrary.org\/\u00a0","rel":"","context":"In "Senza categoria"","block_context":{"text":"Senza categoria","link":"https:\/\/monodes.com\/predaelli\/category\/senza-categoria\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":1918,"url":"https:\/\/monodes.com\/predaelli\/2016\/11\/17\/the-latex-font-catalogue-calligraphical-and-handwritten-fonts\/","url_meta":{"origin":4464,"position":1},"title":"The LaTeX Font Catalogue \u2013 Calligraphical and Handwritten Fonts","author":"Paolo Redaelli","date":"2016-11-17","format":"link","excerpt":"Sorgente: The LaTeX Font Catalogue \u2013 Calligraphical and Handwritten Fonts","rel":"","context":"In "Senza categoria"","block_context":{"text":"Senza categoria","link":"https:\/\/monodes.com\/predaelli\/category\/senza-categoria\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":5119,"url":"https:\/\/monodes.com\/predaelli\/2019\/01\/10\/20-best-free-handwritten-fonts-for-designers-wplook-themes\/","url_meta":{"origin":4464,"position":2},"title":"20 Best Free Handwritten Fonts for Designers – WPlook Themes","author":"Paolo Redaelli","date":"2019-01-10","format":false,"excerpt":"20 Best Free Handwritten Fonts for Designers - WPlook Themes The usual Pacifico. I also like","rel":"","context":"In "Fonts"","block_context":{"text":"Fonts","link":"https:\/\/monodes.com\/predaelli\/category\/fonts\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/monodes.com\/predaelli\/wp-content\/uploads\/sites\/4\/2019\/01\/tragic.jpg?resize=350%2C200&ssl=1","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/monodes.com\/predaelli\/wp-content\/uploads\/sites\/4\/2019\/01\/tragic.jpg?resize=350%2C200&ssl=1 1x, https:\/\/i0.wp.com\/monodes.com\/predaelli\/wp-content\/uploads\/sites\/4\/2019\/01\/tragic.jpg?resize=525%2C300&ssl=1 1.5x, https:\/\/i0.wp.com\/monodes.com\/predaelli\/wp-content\/uploads\/sites\/4\/2019\/01\/tragic.jpg?resize=700%2C400&ssl=1 2x, https:\/\/i0.wp.com\/monodes.com\/predaelli\/wp-content\/uploads\/sites\/4\/2019\/01\/tragic.jpg?resize=1050%2C600&ssl=1 3x"},"classes":[]},{"id":8219,"url":"https:\/\/monodes.com\/predaelli\/2021\/03\/05\/8219\/","url_meta":{"origin":4464,"position":3},"title":"I always welcome nice fonts\u2026","author":"Paolo Redaelli","date":"2021-03-05","format":false,"excerpt":"I always welcome nice fonts that looks like handwritten cursive. The problem is finding one that is readable when its size is around 14-18pt, or when used for normal paragraphs and not headers or titles. This Playball font seems quite feasible for this","rel":"","context":"In "Fonts"","block_context":{"text":"Fonts","link":"https:\/\/monodes.com\/predaelli\/category\/fonts\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":606,"url":"https:\/\/monodes.com\/predaelli\/2015\/07\/30\/creating-icons\/","url_meta":{"origin":4464,"position":4},"title":"Creating icons","author":"Paolo Redaelli","date":"2015-07-30","format":"status","excerpt":"Creating vector icons with Inkscape is fun and easy. Once you got proficient with Inkscape, of course. I forgot how much time is required to become actually productive with a new graphical tool.","rel":"","context":"In "Senza categoria"","block_context":{"text":"Senza categoria","link":"https:\/\/monodes.com\/predaelli\/category\/senza-categoria\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/monodes.com\/predaelli\/wp-content\/uploads\/sites\/4\/2015\/07\/Inkscape-CreateIcon-cap-en.png?resize=350%2C200","width":350,"height":200},"classes":[]},{"id":1840,"url":"https:\/\/monodes.com\/predaelli\/2016\/10\/25\/creating-symbol-libraries-in-inkscape-youtube\/","url_meta":{"origin":4464,"position":5},"title":"Creating symbol libraries in Inkscape – YouTube","author":"Paolo Redaelli","date":"2016-10-25","format":"video","excerpt":"Actually it's easy when someone explain it. I found it slightly amusing to have to learn it from a video, just like a rookie","rel":"","context":"In "Senza categoria"","block_context":{"text":"Senza categoria","link":"https:\/\/monodes.com\/predaelli\/category\/senza-categoria\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]}],"jetpack_likes_enabled":true,"_links":{"self":[{"href":"https:\/\/monodes.com\/predaelli\/wp-json\/wp\/v2\/posts\/4464","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/monodes.com\/predaelli\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/monodes.com\/predaelli\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/monodes.com\/predaelli\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/monodes.com\/predaelli\/wp-json\/wp\/v2\/comments?post=4464"}],"version-history":[{"count":0,"href":"https:\/\/monodes.com\/predaelli\/wp-json\/wp\/v2\/posts\/4464\/revisions"}],"wp:attachment":[{"href":"https:\/\/monodes.com\/predaelli\/wp-json\/wp\/v2\/media?parent=4464"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/monodes.com\/predaelli\/wp-json\/wp\/v2\/categories?post=4464"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/monodes.com\/predaelli\/wp-json\/wp\/v2\/tags?post=4464"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}