Turn Vectors Into A Font File (.ttf)

[@Stratelier]

Note that you can create an "SVG Font" _entirely within your Inkscape document,_ then load the SVG file directly into FontForge (it will just read the file's SVG Font table), which cuts down on the actual time required to compile the font. Years ago (like 2015) I practiced a bunch of lettering, scanned the results, imported them into Inkscape to trace/refine the glyphs and ultimately (via FontForge) built a working font file with it. Font building is itself a HUGE iceberg with a lot of depth to get lost in.

[@aurisbunni]

I can't believe importing SVG from Inkscape to FontForge is as easy as that, but at the same time it make so much sense since SVGs are simply just instructions on how to draw stuff. Fantastic tutorial, Nick.

[@Stratelier]

It's actually even easier than shown: You can build an "SVG Font" inside your Inkscape document directly, then load the file _as a whole_ into FontForge for final adjustments and exporting (FontForge will just import the SVG Font table).

[@euansmith3699]

Fantastic! I've been wanting to do this for ages but have never known how. This is a real and concise tutorial. 😍👍👍👍

[@kevinfoo8031]

As a sign guy, rounded letters sit below the base line and above the height. For instance the letter 'o' is typically larger than the squared letters. If the 'o' is the same size as a squared letter, it will visually look smaller, hence the size difference, Hope Fontforge recognises this.

[@Astronomynatureandmusic]

Fontforge does not resize the o. Best you can do is design your font with the visual look of smaller letters in mind.

[@QuotePilgrim]

It is the job of the designer, not the app, to know about these things and apply that knowledge.

[@frankiet-h992]

Really great tutorial Nick, please never stop making videos, they're always so useful, easy to understand and replicate, and your delivery is really uplifting in a really tough time. Thank you :)

[@jbgra2566]

Another great tutorial! Thanks as always Nick!

[@lynnebizlyne436]

Excellent tutorials for Inkscape. Will share your link with others👍 Thank you for sharing

[@JosephAlanMeador]

Ah man, I've been wanting to make a font for a while! Gonna try this. Thank you Nick!

[@gerritjordaan]

Holy moly!! Thanks Nick. This is a great tutorial. I have been aiming to design my own font for years, but havn't had the chance to do so. 2 things I wish to know further is.. Opentype fonts with different swirly variations. Like for instance a Handwriting font that flows into each other. I see people using Glyphs on Mac doing that and I was ondering if the same can be done with Font Forge.

[@Stratelier]

Yes, font metadata is a HUGE iceberg and there are surprising number of features you can do as part of the font file itself. To start with: - Kerning: This adjusts the spacing between letters, because (for example) a combination of "A" and "W" appears to have more separation than "A" and "M", even if the separation between their logical bounding boxes is the same. - Similarly, you can create glyphs that are larger than their allocated space (which is simply a "width" value). The old DOS "box drawing" characters for example occupy 100% of their defined width and/or height, so that when placed together there is no separation visible between them. - Glyph substitution. You can set up rules in the font metadata that basically say "if glyph X appears next to glyph Y, render glyph Z in place of one (or both) of them". This was mostly intended for letters with diacritics (so that you don't need to define a separate glyph for _every_ diacritic on _every_ letter) but should be functional for general usage, like making glyphs link together the way they might do in handwriting.

[@michaelsalais7393]

Excellent and straight forward. Thanks, Nick!

[@pixelrancher]

I'm seeing some new fonts in my future. Thanks Nick!

[@chayanui20]

you were mentioned the previous vdo about Inkscape where you did create the font for this tutorial. Which vdo is that ? I would like to start with that one first. Thank you

[@IronEchoDesign]

I learned everything I know from you, Nick. Still learning now. Always wanted to play with font creation and you’ve led the way once again. 🙏

[@galihkurniad]

Dear my teacher, please make us a tutorial on how to create an editable Text Effect with LPE in Inkscape

[@DavidCollinsRivera]

Excellent job, Nick! I've been wondering for a while how to go about doing this!

[@Sim2322]

The Unity game engine does not really support vector graphics, and I've been thinking about a way to have simple resizable icons, and making an icon font worked great. Ran into a couple issues with the more complicated ones (mostly intersection errors), but hey! Still much better than nothing

[@adagio333]

So pleased to have discovered this tutorial. I will be giving this a try very soon. Thanks for uploading...

[@tiopd]

wonderful, thank you so much!

[@lucasgarcia95]

Thank you! 💛🖤

[@joseloeza371]

Excellent video thanks

[@ToniTerremoto]

Nick, amazing tutorial. Tx a lot from Barcelona. Nice to follow your channel ❤🎉

[@saraabreusicilia7271]

You are the best!!

[@williamdoust]

Thx Nick, best video I've seen, that is practical, accessible and gives us a sense of quick completion and possibility. Can you do the same oeocess with chromatic fonts, but obviously woth a different ooen source software? - is that even possible. Would be am interesting follow on. Very grateful 🎉✌️👍👏🥳.

[@fatimiohm]

THANK YOUUU

[@mekaclaude]

Amazing ! I use it already ! Thanks.

[@MikhailPavstyuk]

Amazing instruction. Thank you.

[@timetraveller6643]

Wonderful ! Is there a helpful inkscape template for font creation so I don't need that resizing step ? You know, the height, baseline and descender limit, and other stuff. Also, what is the size based on anyway? vectors don't have a standard size do they? Thank you Nick !

[@timetraveller6643]

@NotRexButCaesar -- The size never matches. The x height and the full height are always smaller than the ones in ff. I wish I could work out what the ff dimensions are so I can make my own inkscape typeface template. Trial and error is getting so frustrating. all I need is the numbers and units. argh !

[@Stratelier]

Glyph design is a large subject in and of itself. But here's an overview: - XY coordinates within a glyph are measured in terms of "em units", an "em" representing the distance between two lines (baselines) of text. A lot of fonts specify 1024 (a power of 2) as their "em height", meaning that every 1024 units on canvas represents one line of text, so your glyphs should definitely be smaller than 1024 units high. - In general, a typical letter should have a "full height" about 70% of the em-height, leaving the rest open to provide separation between lines (because a glyph that occupies 100% of the em-height would pack together vertically with no natural separation between lines). - There is also the "x-height" which defines the height of lowercase letters, if it is different from the full height. Lowercase letters can have distinct glyphs, be "small caps" versions of uppercase, or just be duplicates of the uppercase letters directly. - "Ascender" height refers to how far e.g. stems on lowercase "d" and "h" reach above the x-height. This can be the same (or different) from the "full height" of a letter. Depending on the desired alphabet and/or script style, uppercase letters can have ascenders reaching above the usual full-height. - "Descender" height is the amount that e.g. the tails of lowercase "g", "p", "q", and "y" dip below the baseline. Uppercase letters (e.g. "Q") also have descenders. - Letters with rounded edges (e.g. "o") generally overflow their intended metrics by just a little, to compensate for the rounded edges. Otherwise they'd appear unintentionally smaller than letters with straight edges.

[@mjhdlfkr2969]

Use the pixel size. For example, the X-height size is 700px. When copied and pasted into FontForge the size will be fixed and does not need to be enlarged or reduced again.

[@maulidabdullah1027]

Thank you very much nick

[@NYProductions]

Great tutorial!

[@user-yb3pd1rw3u]

thankyou so much it really helped

[@geoffphil]

Interesting. Thanks. How can one get consistent ketter spacing though, rather than guessing/eyeballing?

[@marcosgomes3140]

Nice tip!! ❤️❤️❤️

[@LukianMusic]

There was no chance to somehow copy vector letter and paste it in FontForge as iMac doesn't allow me to do that :( it is not copying. Dunno why. It's copying but I can't paste in FontForge.

[@Sfskatevibes]

ive got the same problem!!! by any chance did you fin d a solution for that problem? id appriciated if you reply

[@programandoconkiki]

Fantastic!

[@afrikaniz3d]

Thanks for sharing.

[@lkzbrandao]

Can i create the font in Illustrator and export to FontForge?

[@OldRedandGold]

I just found your channel after many frustrations trying to DIY Inkscape. I'm trying to create my own custom font for a logo of my own, but, I'm having a hell of a time, so do you have a video for how you created those letters in Inkscape? Thank you very much.

[@javahaha7286]

I can't install fontforge on Mac M2

[@JohnColgan.]

Does fontforge allow you to edit individual font characters? I do a lot of CNC work and some apps complain about intersections and vector loops. We gave to edit these at SVG node level every time. It would be nice to fix the source once & use clean vector fonts for ever!!

[@acart-jp8rf]

I can't seem to import my own numbers and symbols for some reason. Also, how am I going to set the spacebar length?

[@Astronomynatureandmusic]

Caution at 5:50: in Windows, Inkscape may only show fonts installed via SHIFT&right click and selecting "Install for all users".

[@mamorojo]

Im copying the characters from Illustrator but when I paste them in FontForge they don't appear. Any clue?

[@rile3894]

"I'm sorry this file is too complex for me to understand (or is erroneous)" any fix??

[@rizkydharma8373]

Can I do this with illustrator?

[@johntreeman8468]

Superbe !

[@Inkscape-tutorial-pl]

Thanks. There is some kind of font editor inside Inkscape but I was trying to use it and it was a mess.

[@Stratelier]

Yes, it is kind of a mess, but the upside is you can define glyphs in Inkscape then load the file as a whole into FontForge for further refinement.

[@oliverwang95]

Great! But i fail to paste into Fontforge. Does anyone know how to solve that?

[@Sfskatevibes]

same problem here

[@GHILLIESARCADEANDMORE]

Cool

[@malavlaggad7321]

Hello sir, I am facing a problem from last 2-3 days. The blur function is not working in my inkscape. I can't see blur on canvas but it is there when I export it. So please make a video on it

[@LogosByNick]

Try checking your display mode. Go to: View > Display Mode and make sure you have Normal selected

[@malavlaggad7321]

@@LogosByNick thank you so much sir, now it's working

[@vizeath]

But what if the computer cannot read the font?

[@Stratelier]

On the FontForge side, when you tell it to generate a font it performs a number of validation checks specifically to alert you to any problems that might prevent the compiled font file from loading.

[@QuotePilgrim]

You're doing this in the least efficient way possible. You can reposition (and resize) all of the characters simultaneously after importing them all, and also adjust all sidebearings automatically instead of doing it one by one. (Edit: and you can select all letters in the uppercase fields and paste them into the lowercase ones all at once.) Even then that's only the beginning of making a font. If you want to make a proper professional font you are going to spend most of your time kerning.

[@williamdoust]

In defense of Nick's approach, as a teacher, it makes sense to ensure the process is accessible - as a first pass - to dip your toe as a total novice. Then you can go deeper into the pool, session by session or video by video. If you throw people into the deep end, guess what? - most will be put off and won't even try font making. ✌️🎊🎉👏

[@moonkidcaptainmooncrackle827]

I thought you were going to name the file "Fonts By Nick" 🤣

[@ManthaarJanyaro]

1st comment ❤🎉

[@bartoszjasinski]

This tool would be better if it could import designed letters by their object names

[@Stratelier]

You actually can ... sort of. Under Inkscape's "Text" menu there's a section for "SVG Fonts" where you can actually assign paths to named glyph slots, then you can load the SVG file directly into FontForge. It saves the work of manually copy-pasting glyphs one at a time.

[@FAKKER_rap]

Looks like bad crutch....

[@FAKKER_rap]

There must be a way to choose letter space precisely, not randomly by eye.

[@Stratelier]

@@FAKKER_rap Yes there is. On the FontForge side you can manually specify "left" and "right" spacing (the guidelines on the grid are just a shortcut for doing that), both per glyph and as a default value for all glyphs.

[@psylentrage]

No thank you to ff, ANY other way?

[@felipedutra5276]

Why not ff?

[@felipedutra5276]

Why not ff?

[@timetraveller6643]

It feels a bit clumsy but I've never used anything else and I only use open source software. What do you use ?

[@psylentrage]

@@timetraveller6643 I'm looking for an alternative

[@UnbeltedSundew]

@@felipedutra5276 because FF is a pretty obtuse, probably just takes time to get used to though.