Create Custom Fonts Using Inkscape & FontForge in 2023 (Great for Selling Online!)

Подписаться 12 тыс.

Просмотров 23 тыс.

50% 1

In this tutorial, I'll show you how to create a custom SVG font in Inkscape 1.2 and above, then we'll learn how to convert it into TrueType/OpenType (TTF/OTF) using FontForge, a free and open-source font editor. This would be great for anyone wanting to create and sell fonts on an online marketplace, like Etsy!
Download FontForge for free here:
fontforge.org/
► Check out the Inkscape courses (and more!) here: sweatercatdesigns.com/
Inkscape is a free and open-source alternative to Adobe Illustrator, and you can download it here:
inkscape.org/release/
Timestamps:
00:00 Intro
00:17 open the SVG Font Editor & create a new font
04:00 add the first glyph
05:45 change the default font width
07:10 add the drawing to the glyph
07:41 change the width of the glyph
08:00 add another glyph
09:54 change the kerning
10:27 add another glyph
11:11 create a ligature
12:15 create a stylized glyph
13:16 add a space character
13:49 filling in missing glyphs
14:29 save the document
14:55 download & install FontForge
15:14 import SVG font into FontForge
15:29 fix the spacing
16:07 edit a glyph
16:22 test the font
16:42 convert the font
17:29 install the font
18:02 use the font in Inkscape
18:32 Outro

Опубликовано:

12 июн 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 45

@martinbraun599 5 месяцев назад

The SVG font editor was completely new to me. Dear Nick, thank you very much for the constant new suggestions and user tricks. I actually went to the trouble of digitizing my own handwriting and converting it into an Open Type font. Each letter was written on the graphics board and post-processed in Inkscape. Now I can also put my handwriting on paper using the keyboard. For me this is a great thing. Once again I can only thank Nick very much.

@3_14pie 5 месяцев назад

Finally, a decent font making tutorial, thank you so much

@user-ih6cd5tk7v 8 дней назад

Thanks so much. Fantastic video! Incredibly well done and useful. A+

@doctorbezier6561 Год назад

Crazy good tutorial for such a niche thing. Thanks a ton!

@anameyoucantremember Год назад

Amazing! I rarely find a video that answers ALL my questions regarding a specific topic. You managed to do it. Very thanks many much 😁😁

@NOPerative 10 месяцев назад

Changing the origin for font rendering might apply to ltr & rtl (my guess anyway) where 0:0 is for ltr. For anyone unfamiliar with the acronyms above: ltr = left to right & rtl = right to left reading orders; English documents are read from left to right (ltr). Good vid.

@Barakon 8 месяцев назад

So…is 0:1 for right to left? Cuz I need to know how to use this to make hebrew fonts.

@NOPerative 8 месяцев назад

@@Barakon you would have to assign the upper right corner coordinates. Whenever you actually create and package the font using tools like FontForge you should absolutely be able to configure the font output as a right to left font and the operating system and or browser will then know how to render the font properly. The only time you will have to manually determine origin points is when you would be manually laying out text as an example writing your own text rendering component for an editor you're developing on your own. At any rate, if the reading order is set to ltr (left to right) the example I gave of the origin coordinates 0:0 would still apply as the underlying system would then flip the width and x coordinate for you automatically.

@jademonass2954 Месяц назад

thank you so much!! i had no idea inkscape had a feature for that

@ar3designs 3 месяца назад

Very Useful. Thank you!!!

@martinbraun599 6 месяцев назад

An incredibly great video! Thank you very much for all the valuable information!

@astatine0085 2 месяца назад

this is great, thank you

@gardiner_bryant 4 месяца назад

How does one create a color font with multiple paths for a single glyph? Is that even possible with Inkscape?

@leiocera2433 10 месяцев назад

thanks for the tut!

@ZarviroffSerge 10 месяцев назад

Brilliant. I've been developing an app for android for a while now and now came to conclusion I have to make a font for optimization purposes. And it was just pure hell, especially poking around ff. I've used Linux for quite a while back 10 years ago, but omg the app is horrible on windows. Thanks for the guide. I especially liked the inkscape part.

@Anothuor 8 месяцев назад

Awesome thanks dude

@irvanprima1377 8 месяцев назад

thanks this help a lot

@guduguminchu 3 месяца назад

Thanks

@jimmihenry Год назад

Nice, thank you and a big thumb up! Missing glyph did raise a question mark... Edit button, i would never found out its convenient function.

@SinSumma 4 месяца назад

Honestly I've found it easier to just copy/paste my gylph from inkscape into FontForge. Turns out FontForge can automatically import svg data and will even automatically convert strokes to paths for you, so it's way easier and way less fussy.

@arianerodrigues_ 9 месяцев назад

🎉thanks

@richardstewart6900 8 месяцев назад

Well dang! A couple of years back I retired after 30+ years as a sandblast glass engraver. If only I'd had this back then!!! All told, we probably had around a couple of thousand fonts although not all were installed and some of them were duplicates. We really only used a set few though, but even some of them were either poorly drawn or needed tweaking in some way e.g. spacing etc. This looks like it would have been very handy. I wonder how easy it would have been to use for strengthening the finer parts of certain script fonts?

@chriscadman5715 9 месяцев назад

Excellent lesson! Can you tell me how to import an existing TTF and change the background to opaque, so when I use it in a graphics app it will block all the stuff that sits behind the font? Thanks...

@tomfjallstrom5196 Год назад

Hello, great video. You mentioned briefly that the font will automatically come out as fully filled in the preview, and I was just interested in if there is some way of making it not do that 🤔

@ianscales2382 11 месяцев назад

Inkscape seems surprisingly good for font design, because of the specialised SVG Font Editor. Maybe it's better for this than CorelDraw or Affinity Designer, which don't have the specialised tools.

@allinfun829 4 месяца назад

This is awesome! I do have 1 question. I did exactly what you said and created my own glyphs in inkscape 1-9. I did not do letters. When I generate in FontForge the letters default to what looks like Ariel. Can I tell FontForge to default to a different font for my letters? Thanks!

@simplekaty 2 месяца назад

This is great tutorial. I got my font to work perfectly inside Inkscape. However, when I used my font inside OpenWriter, the kerning was reset / looked off; the overall size was tiny and the ligatures couldn't be generated. Is there a way to fix these things by exporting from FontForge?

@abw21701 7 месяцев назад

Quick question: Could I use Font Forge to create right double quotes to go with my left double quotes?

@marcelomiguelbazan 7 месяцев назад

Hello. It's very interesting video. I've got a question: At 07:03, after setting "Horizontal advanced x" to 700, don't you have to click the "Setup canvas again, or is it optional? IMHO, to "resize" the canvas would be better because you can have a more accurate idea of the real width of the glyphs. Thank you and greetings from Argentina. Marcelo Miguel Bazan.

@laika9313 Год назад

How can I not have fontforge export using glyphs from a default font?

@martinbraun599 5 месяцев назад

All very cool! Only the special characters under FFF or EEE or similar don't work properly for me. It works in FontForge under "New Metric Window". But not under Windows with Word or Inkscape, etc. There I only see the three-letter combinations instead of the special characters. Does anyone have a tip for me that could help? Actually, I imagine that I did everything as demonstrated in the video.

@YAMAGUCCIJP 8 месяцев назад

When I generate font I get a 'bad private dictionary' error. The font does however install and all the ligatures and alternate characters seem to be working. Anyone know if this needs to be fixed?

@linny356 9 месяцев назад

I finished my font, but when I went to test it out in fontforge, it didn't work. For example, I have characters for both 'a' and 'ar', yet when I went to type 'ar' it only displayed the character for 'a'. It worked perfectly fine in inkscape. Is this a common problem? Or will this be fixed when I export it? Please help :)

@Kompanie17 8 месяцев назад

How do import an existing font into inkscape to just change some letters here and there?

@williamdoust Год назад

Hi, thanks for this. Can you vectorize doodles/import svgs to tuen them into dingbat fonts?

@SweaterCatDesigns Год назад

Definitely! You'll probably want to stick with simple graphics though

@TSMSnation 5 месяцев назад

7:55 nothing put into the advance box changes anything for me. rip

@chrisandersen3213 Год назад

hey there. The Horizontal/Vertical origin will be important for use in other font editors/vector software. It basically sets a rotation point..

@eti313 9 месяцев назад

Great video! Where is a good place to sell fonts online?

@SweaterCatDesigns 9 месяцев назад

Thanks! Etsy and Creative Market are the most popular online marketplaces for selling fonts, but there are also many others, like Envato Elements and My Fonts.

@Mariam-Mina Год назад

How to draw letters neatly in Inkscape, using bezier tool and mouse is not making the letters neat. I use pen stylus on my touch screen, it improved the outcome but not the wow result. Any suggestion? And what other software people use to make their own fonts with beautiful handwritten neat fonts? Thanks

@SweaterCatDesigns Год назад

If you go to the Pen/Freehand Tool, turn on the "use pressure input" button at the top (it has a brush icon), and set Smoothing to something high, I find that works better for getting a handwritten look, especially with a stylus. Plus, if your touch screen supports pressure input, you can use the pressure of the stylus to change the thickness of the lines (using the Min and Max settings of the Pencil Tool).

@Mariam-Mina Год назад

@@SweaterCatDesigns thanks for your reply. I tried this before but it’s not giving me the persistent neatest effect. I guess people who make their fonts most likely they use different software.

@akabami2161 11 месяцев назад

You could use another program like Photoshop or Krita (which is free) to design the font, and then trace it using the bezier tool to turn it into a vector graphic.