Step 10 - Want to use it Online?
It is super easy to use your font online for your sites! You can figure out how by clicking here and following these easy steps!
$LAYYYTER
"I'm Dorothy Gale from Kansas"
No title available
Claire Keane

ellievsbear
Aqua Utopia|海の底で記憶を紡ぐ
RMH
art blog(derogatory)

Origami Around

Kiana Khansmith

blake kathryn
occasionally subtle

Product Placement
I'd rather be in outer space 🛸
Three Goblin Art

Discoholic 🪩

if i look back, i am lost
Acquired Stardust

Andulka

titsay
seen from United States
seen from Brazil
seen from United States
seen from United States

seen from Germany

seen from Malaysia

seen from Canada
seen from India
seen from United States

seen from United Kingdom
seen from Lithuania

seen from Australia

seen from United States
seen from United States

seen from Malaysia

seen from United States

seen from Italy

seen from United States
seen from Japan

seen from United States
@thetutorialist-blog
Step 10 - Want to use it Online?
It is super easy to use your font online for your sites! You can figure out how by clicking here and following these easy steps!
Step 9 - Install Your Font
Would you rather see a clip to walk you through it? You can do that here!
We are so close now! We just have to install the font on your computer!
Double-click on the file named ‘yourfont.ttf’
It will show a pop-up box asking if you want to install the font
select install font
this should automatically put it into your font library on your computer
Open up a word document (or illustrator/photoshop- whatever works for you) and let's test it!
Write a sentence, and see if you can change your font to your created font by looking for the name in the drop-down menu.
If you cannot find it, try closing the document and launching it again, as sometimes it needs to restart to pick up the new font.
Some programs are really finicky with the new fonts and take a bit of hunting to find them
Keep in mind that if you see some odd boxes or circles forming while you type, it could be because you did not create that character in your font
You’re done! Congratulations... you now have a font that you created!
Step 8 - Load the SVGs into Birdfont
Would you rather see a clip to walk you through it? You can do that here!
Birdfont is a great free application that you can download and use to create your font.
Start by making a folder on your desktop with the name that you would like to call your font.
Be sure you have the latest version or Birdfont downloaded for your correct operating system (MAC, Windows, etc).
Open up Birdfont and select SIL Open Font License (this is the only option you can select with the free download)
Select ‘create a new font’
Click on the hamburger menu in the top right corner
Select ‘Name and Description’
Change the Postscript Name, Name, Full Name, and Unique Identifier to whatever you want to name your font
You can close the name and description box for now - it will keep your preferences
Now you want to load in your SVG’s
Start by double-clicking on the letter you want to start with (it would make logical sense to start with ‘a’) in the Birdfont window
Click on the hamburger menu in the top right corner
Choose import SVG file
Select your corresponding SVG file for the appropriate letter
Let us turn on our grid option (as this will show you the baseline and top of the letter) which you can find to the left of the letter panel
You may also want to add additional lines to show where you x-height line is (the top of your lower case letters, and the descender line which indicates where the end of your lower case letters descenders - like the bottom of the ‘p’- go)
Now you can scale your letter to fit into the grid as you see fit using the controls on the left of the letter panel
Once you have repeated this process for every letter, number, and punctuation mark you need to save your font by going to the hamburger menu in the top right and selecting file->save as and then name your font and save it to the folder that you have created
This will save the document as a .bf (Birdfont) file to your folder so that you can come back and open it and edit things later
Do a once over and make sure everything is exactly as you like it
If you made any changes, save them, if not - let's export your font
Go to the hamburger menu at the top right and select import and export->export fonts
Name your file
Select all the formats you want to save your font as
Select Export
Choose the file you want to export to (likely the folder you created in the beginning)
You will now see all of these files in your folder!
Step 7 - Save Your Letters
Would you rather see a clip to walk you through it? You can do that here!
Now we are going to save the letters to be able to use them in other programs! This is not what will make it a usable font, but this step will help us get there!
Make sure that every character is expanded ( object->expand)
Now we need to save the characters as SVG’s so that we can use them in other programs
Saving as an SVG to use in another program can be kind of tricky because we cannot include the artboard in the file.
Select the letter you are saving so that it is the only thing selected
Go to File->Export Selection
Select where you want to export it to, and select SVG in the dropdowns under the ‘Format’ label.
Select ‘export asset’
As it doesn’t give you the option to name your asset or SVG in Illustrator, you will have to name them after they are saved to the folder
The SVG should now be automatically saved in a folder called SVG to wherever you requested it be saved to when exporting
You will need to do this step for each individual letter, number and special character
Step 6 - Recreate the Letters
*This step is optional! This is only if you want really refined letterforms.
Now we have to go in and make them each perfect! In order to do this, we are going to ‘redraw’ each letter.
Select your favourite drawing tool. For this tutorial I am going to use the blob tool. Its not the most ideal tool for sleek looking letters, but today we are having some fun!
Make sure that the appropriate ‘Refined’ layer is placed over the top of the layer you’re working on, and turn on the letter you’re going to redraw.
you can turn the letters off and on to your hearts content in the layers panel
When you’re done, you should have all your new letters in the ‘refined’ layer, and all your originals in the lowercase’ (or whichever sections you’re working on) layer
Step 5 - Revamp the Letters
Would you rather see a clip to walk you through it? You can do that here!
Now we are going to give them a bit of a refined shape
Here you have a few options
You can leave them the way they are, or you can use your favourite illustrator tool to smooth everything out, although I recommend the smooth tool (I don't have a reason for this- just personal preference)
Step 4 - Lets Work on the Characters!
Would you rather see a clip to walk you through it? You can do that here!
Now we are going to give each character a little bit of love.
We need to make a new custom sized illustrator document based on the proportions of your characters. This will be dependent on how big or small you want your individual characters to be. For the sake of this tutorial, I am going to use an Artboard that is 0.75 inch by 1 inch.
Now that you have your artboard, let's bring in some guides that will indicate when the top of your letter will end, where the bottom of your letter will end, and where the descenders (extra parts of the letters like the bottom of the lower case ‘p’) will end. You may also wish to include a line that indicates the top of the lower case letters (I find this extremely helpful).
To get guides in illustrator, you will need to go view->rulers->show rulers, and then you can click on the rulers and pull guides down.
Once you have your guides in place, let's build some layers, so that things are ready and organized from the beginning!
To get to your layers panel, you will go to window->layers
We are going to make 8 new layers
Uppercase
Lowercase
Numbers
Punctuation
Refined Uppercase
Refined Lowercase
Refined Numbers
Refined Punctuation
**All of the ‘Refined’ layers are only needed if you intend to redraw them with illustrator tools later.
Now let's paste our letterforms into this document and ungroup them so that we can take one letter at a time.
To ungroup you will select everything, go to object->ungroup
Pick your first letter - (preferably one without descenders) and place it on the artboard on the lowercase layer (we are starting with lowercase letters)
Place the letter on the bottom line according to where you placed your guide
Scale your letterform to a point you’re happy with it (but stay within the constraints of your grid lines)
Do this to every letter and place them all in the appropriate layer panel
When it comes to the punctuation, you will have to decide what proportions you think are appropriate for each character
Step 3 - Lets make it Digital!
Would you rather see a clip to walk you through it? You can do that here!
Now we are going to make all of your letters digital!
If you find your letters don’t stand out enough, try taking the photo again with a light source that casts little to no shadows.
‘Preset’ is custom (you may have to do this one last)
‘View is tracing result
‘Mode’ is black and white
‘Threshold’ should be between 150-170 (I tend to use 160)
under ‘Advanced Options’, select ignore white
hit Trace
this turns your image into a vector image
Step 2 - Refine Your Sketches
Once you have played with a bunch of ideas, and you’ve settled on the direction you are going to take your font, you can start to refine it.
Using your grid paper, put a version of each of your letters and your special characters into the amount of space you want to use for each character. The amount of space you choose is up to you!
Once you’ve got them all nicely drawn out on your grid paper, you can either ink them, or you can move on to step 3.
Step 1 - Sketch Out Your Ideas
This is the fun part! If you have been thinking about a font you would love to make, here is your chance to play it with, have some fun and sketch it out.
On a piece of paper or in a sketchbook just play around with some shapes and styles of the lettering you have in mind and see what you come up with.
Try drawing different versions of each character, and think about how the letters might appear next to each other, or interact with one another when they are complete.
Tools You Will Need For This Tutorial
- Pencils - Graph Paper - Thin Black Marker (optional) - Adobe Photoshop & Illustrator - A Camera or a Scanner (Phone works for Camera) - The Latest Version of Birdfont for your Operating System
Have you always wanted to learn how to make your own font to use on your computer? Well now you can! Check out how to make your own font with this easy to use tutorial by me - The Tutorialist!