Getting started in FontForge!

You can download it here.

Getting started

Hey, I thought I’d make a very brief tutorial on creating a font in fontforge, for more advanced tutorials I highly recommend this kid on youtube.

To get started install fontforge. Now by default FontForge wants to open a font, but today I was going to cover going over a font from scratch. It’s still a good idea though to start with a base font then modify from there, but for today only I was going to cover some of the most used characters.

Hit New to Get Started

Starting a font from scratch, instead of opening a font

I started a font with the New button instead of opening a font. You’ll notice the first 32 characters are strange looking. I’ve marked them below.

Font sections are divided into 3 parts or more.

The first few characters in a beginning of a font are reserved for font formatting and other functions; they are called Control codes. These characters are used to check when a file ends, how to handle backspaces, what to do if the font errors out etc. They are basically directions so anything that wants to use this font knows how. For a little more info you can look at each characters function here.

The 3 parts to a font are control codes, basic Latin, and a supplement

Now the next thing I’ll point out is this font is encoded to be a generic Latin based font, if you wish to use a different language you can change the encoding to some other format. Changing the encoding can change the basic latin and the supplement characters/symbols included.

Encoding > Reencode > other code option

No manner what you form of Latin you switch to, your basic Latin (The top section) will remain the same, the bottom section will change depending on how you encoded it. Switching to encoding to some other format outside of Latin such as SJIS (Kanji) will also change some characters in the basic Latin section.

If you need to use a particular character or language look for it here and ensure you have the correct encoding.

Now your big focus should be on the most used characters, in this case Basic Latin (the top section), the supplement characters aren’t important unless you need special characters such as ©, ±, £, ½, Â for example.

Creating a character

Find a character and click on the box below to work on modifying it. If it has an X in the box it merely means it is empty with no data. We’ll need to start filling this in.

Now to open a character double click on the box below the character to open it.

Here is the Outline Glyph View, this is where you will be able to edit or add glyphs.

Let me break these terms down in real simple terms

  • Font Max Ascent Line – The highest point of the font, anything above gets cut off or starts to overlap another another character
  • Font Max Descent Line – The lowest point of the font, anything below this gets cut off or starts to overlap another another character
  • Left Side Bearing – Anything further left gets cut off or starts to overlap another another character
  • Right Side Bearing – Anything further right gets cut off or starts to overlap another another character
  • Baseline – This is where the base of your character sits, characters like Y or G will often have descenders that fall below a baseline.

Importing an SVG

One of the nice things about fontForge is it allows you to easily import SVG, bitmap and other file types you can use as a font. SVG or vectors will be clean and clean nicely, other file types may cause other issues.

To import an SVG you can go to File > Import and select the file where ever you left it last.

As you can see in this example the g includes part of a descender that goes below the baseline.

You can adjust the bearings by clicking and dragging them, this removes unused space.

Quick drawing help

Now if you want to create your own character I won’t go into a lot of detail but will give you some pointers. A character is full of points, these points can be made into different types of points- Curve points, H/V Curve points, Coins or corner points, Tangent points. These different types of points change what you can control on a curve. You can check out the manual for more info.

Try to click on a point and drag it out. The o’s are a point and the x’s are an anchor used to control the point.

I created some lazy names to make the tools easier to remember

I’m not going to go into what these tools do. Experiment and play with them. But let me go over three more important points.

1. right click any point to convert to a different type of point.

2. Go to Element > Overlap to change how shapes are combined or intersected

Intersect examples

3. Check what clockwise direction a shape is facing to see if it’s visible. If it’s the wrong clockwise direction, it’s invisible.

Extra tidbits – Coping & Pasting Glyphs

You can copy & paste letters really quickly just by right clicking and pasting on letter and selecting a place to paste. This also a quick way to clear glyphs too.

Extra tidbits – Changing ascent/descent lines

You’ll notice the Max Ascent Line and Max Decent line can’t be dragged as this applies to all characters. To change this you’ll need to exit the letter and return to the main screen from here go to Element > Font Info.

Extra tidbits – How to prepare an image for import

Some quick things here, the default max height for a character is 1000 pixels. Width doesn’t matter as much as you can adjust the bearings easily but a good starting point is creating a file 1000 x 1000 pixels in whatever software you choose – be it Affinity Design, Photoshop, Illustrator, Krita, Inkscape etc whatever.

Here is an example with a Bookmen Press Serif character.

Your baseline is general 200 pixels from the bottom of the image. You can use a rectangle for something as a guildeline and just remove it when you export. I’d probably start with an open source font from Google fonts, free and open source is a great starting point.

Here you can see the character imported after the letter was converted to curves in Affinity Design.

Extra tidbits – Exporting a font

You can quickly export a font with File > Generate Font.

As long as you don’t have any big errors this should be fine.

Here is an example of the dumb font I created for this tutorial

Using Emoji Fonts in Affinity Publisher

Play this game I collaborated on here. I go by bytedesigning in other circles.

Why use Glyphs and What are Glyphs?

Won’t it be nice if you were designing a project and decided you wanted to use an icon or symbol instead of typing out a word (to save space or improve understanding, etc) perhaps an icon or emoji for a flower(🌷)?

This is where software that support’s font glyphs really shines. While fonts like these are often rereferred to as decorative fonts or image based fonts they aren’t always. They may just be regular fonts with added characters, symbols, or ligatures. What are ligatures you may ask? Ligatures are combinations of letters that result in a fancy and stylish version when used together, they also reduce the space of two characters into one.

These two letters are combined to form a ligature and new glyph

The most common ligature you likely use everyday is the ampersand (&) this symbol is the Latin conjunctive word et (e + t) which basically translates to “and”.

How Do I Get Glyphs?

I already wrote a brief post earlier about different font file types. This is important because I’ll be focusing on the OTF file type, a font type that allows the use of emoji’s because of the powerful glyphs support. TTF and PSF has very limited support for extra characters like glyphs and while currently Photoshop and other Adobe software support SVG type fonts they have numerous downsides such as scaling and resolution support issues – to use a “safe” font that does not suffer these problems I stick to OTF. Due to TrueType being most compatible most fonts are still being created in ttf and the largest in the world – Code2000 (20 years old now and now abandoned) is still a great starting point for emoji fonts particularly for kaomoji later referenced in this post. Code2000 even includes unusual glyphs for Klingon and Cirth and others. In total the code2000+ fonts have around 90,000 glyphs all created as far as I know by James Kass.

Affinity software, Adobe software and most other software that supports glyphs works well with OTF and such is a safe bet. So if you are looking for good glyph fonts look for OTF & TT fonts for the best range of characters.

Where can I get an emoji font?

While currently emoji fonts are limited in the sense there are not many fully supported fonts released for free almost every operating system (OS) at this point uses a custom one. To see every OS system emoji font you can check here and compare them at Emojipedia.

If you want to download an emoji font I suggest Google’s emoji font Noto (Noto Emoji) or OpenMoji (Despite those both being TTF). Most other emoji fonts don’t seem to have a lot of support right now…

You may find copying this symbol into a text box doesn’t work though and ask yourself why not? It works on Firefox or Microsoft Edge or Google Chrome etc. There are two reasons it won’t properly work.

You see that square🔲? That is the cat symbol when copied. It does not render properly.

Why Fonts Won’t Render

Here is the cat emoji working correctly in Noto Emoji

There are two basic reasons a font will not render.

  1. You did not install the font or you did not select the font when typing.
  2. The font does not have a glyph for that symbol.
  3. Extremely rare but I have a third reason, corruption to the font. I’ve been able to fix this by re-exporting or changing the font to OTF using software such as FontForge. This was the case for a font where select characters would not show such as !#@ etc. I may later create a tutorial on troubleshooting fonts.

How to Set up Glyphs in Affinity Publisher

First step is selecting the correct font, after selecting your text tool of choice change the font.

Notice has MS Reference has noticeable renderer errors? That’s because of how they set up their font formatting.
To be able to view all the glyph options in a font go to View > Studio > Glyph Browser
Glyph Browser

From here you can search for emoji’s try typing in “cat”, you should see a range of cat emoji’s popping up. Unfortunately, it does not support emoji search so pasting 🐈 into the search bar will not result in it finding the cat emoji. You will notice recent emoji’s are collected at the bottom of the glyph, if you use a particular font often that will also show there.

Anyway, that is the basics, good luck on future projects!

Extra Tips & Questions

Can I use windows & Mac Emoji’s?

With windows you can hold the windows key + (.) period key to open the emoji window, just click an emoji to paste, it looks weird but converts over correctly if you click on the text area, it should convert over if supported. It can get a little finicky, but I was able to convert window symbols into the noto font this way.

There is something similar you can do with mac that is along the same lines…

Does this work with Japanese kaomoji?

Yes, **✿❀ kaomoji ❀✿** works fine with this, also long as the font supports all the same characters.

ʕ •ᴥ•ʔ Bear Kaomoji

Does this allow for cool color combo’s?

No, this font is treated like normal text and that all you can do is change the text color like normal. You can always convert the text into a shape and recolor it if you prefer.

You can still do quite a lot by just being able to recolor.

Why not use dingbat fonts?

You can, this just gives you another option. Dingbat fonts like Entypo are really limited though.

What fonts do you recommend again?

Noteable mentions

  • Segoe UI font (Microsoft)
  • Firefox emoji (Very dated)
  • Emoji One… That is a complicated one but you may find an old version floating around. At one point it was FOSS but no more.