Let’s see, so you are here to know how to make a color font?
If you say yes, then you are in the right place. I am going to guide you step by step through the process of making & or creating that color font you dream of from start to end.
Exciting right? Let’s begin!
Firstly, before we go further. I will be using a paid software within a paid software. You will need illustrator or photoshop, either one is fine and you need a plugin called “FontSelf”.
This plugin is needed to create a color font. So, before we go further, let me clarify something.
I don’t earn any commission from “Fontself”.
This is not a paid promotion of Fontself. By the time I am writing this blog post, this is the only way to create color fonts for now according to me.
Now, moving forward we are going to discuss on “what are color fonts” and then we will get to the best part of “creating a color font step by step”.
Most of us don’t know what are color fonts and so, first let’s take a look at what really are color fonts?
What is A Color Font & It's Advantage?
The color font is a type of font file that has more graphical capabilities than a normal font.
They can have multiple colors, gradients or textures in them with SVG data (Scalable Vector Graphics).
Color fonts can include vectors & bitmaps. So, what does that means?
That means that you can create vector shape characters and then make them into a full-fledged font, isn’t that great? Yes, it’s awesome.
Color fonts are based on OTF (Open Type Font) and you will find that all the color fonts that are on the web are based on the .otf file.
The OTF was first initially designed by Mozilla & Adobe and it quickly became industry standard in around 2016.
The best thing about color fonts is that you don’t have to worry about designing your fonts from scratch ever again.
Normally, you have to make every single character and then put your designs on them to make them look cool but with color fonts, you get them all ready for you to just type with them just like any other font. Great, right?
Some Drawbacks Of Color Fonts!
The biggest drawback of color fonts is that not many softwares and browsers yet support color fonts but the demand is increasing.
Soon OTF (Open Type SVG Fonts) will be a standard in all browsers & apps.
Let’s see some of the currently supported browsers and apps for color fonts,
Currently supported browsers:
- Microsoft Edge
Apps that are supported:
- QuarkXPress 2018
If you try the color fonts on any other browser or design softwares that doesn’t support color fonts yet.
You will see the fonts in black color instead of the actual color font.
Now, if I haven’t excited you enough. Let’s go ahead and see how to create a color font.
Let’s get to the meaty step by step part,
🎉 Step By Step Guide To Create A Color Font 🎉
So, now that you have got your desired software either photoshop or illustrator and the front self plugin, we can begin our work.
Now, before that, the steps I am going to discuss further are nearly the same for both software.
I am going to show you in illustrator & Inkscape for reference, as I have these softwares but once I have the photoshop software and the font self plugin for it, I will update this article on it and yes, I promise.
Now, here I am going to give you a tip.
If you like Inkscape and have been using it and your hands are set on it then it’s not a problem to use it to design the alphabets.
Actually, that’s what I really do, I create all the characters with designs in the Inkscape software and then bring them in the illustrator to make some few changes.
It works just as fine as creating characters and designs in the illustrator.
Let’s begin with the first step,
1. Opening up the design software.
I know it’s very basic step but yes the first step is to fire up the software either Inkscape, illustrator or photoshop that depends on your skills and also depends on which version of font self plugin you got.
If you are making a vector design font then illustrator or Inkscape is good enough for you but if you are good in raster, bitmaps then photoshop is great.
It’s pretty easy to follow after this, so let’s go ahead and launch it from the desktop.
2. Design that font from scratch.
Yup, you read that right.
We will make the color font from scratch.
I am going to reference the color font that i have also put up on the store for free, “Americano Color Font” as a reference to get you up and running.
Start creating alphabets and numerals first with a pen tool. Now, If you want a reference on how the alphabet “A” looks like or lowercase “a” looks like just write them with other fonts and compare them.
It works that way as an option or you can create some unique alphabets of your own if possible.
Everyone has a kid with creativity in them. Use it!
Example: Create “A-Z” alphabets with colors on them or use patterns on them that’s up to you as It’s your font, design as per your creativity.
Let’s work on the character “A” of our color font. This is the only alphabet that we are going to make here. You can make the other letters, once you are good with letter “A”. Also, you don’t have to exactly make this font!
So, Let’s see character “A” step by step with a help of infographic,
TIP: Stay clear of clipping your vectors but you can use “intersect” without any limitations. I have generally found that clipping your fonts with designs on them is not a good idea. It doesn’t work in general, it creates extended lines. You will see what i am mean about clipping. I will show you the clipping issue that i faced while i designed the letter the first time,
Once, the full design of the font is completed. Just take a moment and give yourself a pat on your back.
You did great. Now,
Select the alphabet or numerical and then use “Flatten Transparency” on it because believe me, it helps.
If you don’t do “Flatten Transparency” then your alphabet or numbers you created will not be registered in the FontSelf extension.
You can select the full alphabet or number, one at a time and group them after that.
Now that you have separate these alphabets and letters fully designed and individually grouped.
The next step will be to open up the FontSelf extension to create that color font vectors into an OTF file.
3. Opening up fontself extension.
Now, that you have designed the font with alphabets, numericals with some designs that you created on them.
It’s time to open up the FontSelf extension by going into the window tab > font self in illustrator software and let it load for a few moments.
You will see a big popup window like shown below,
- New: This option allows you to start over with a new font. Once you click the “New” button, You will see the empty white boxes. In these boxes you can drag your vectors one by one or select all Uppercase Alphabets from “A-Z” and drag them to the FontSelf Extension and it will automatically put them in there.
- Open: This option allows you to open up the font that you were working on to continue working on it.
- Font Infos: This gives you a window where you can change all the information related to the font you just created, from “Font-family Name” to which “license” you have your font under etc. Please see the image below, just some examples in the boxes, Check image below *
- Export: This allows you to export the font in OTF file. Just provide the name of the font and it will export the related files for you.
- Color Font Warning: This is a warning that FontSelf gives to you when it detects a color font and tells you about the limiations about color fonts in the “green pop up”. Jump to point 20 to check what is there in it!
- Type Any Character: Here you will type in the gylph that you want to create on. You can type in GG or FF to create ligatures.
- Create Gylph: Just works as a button for “type any character” bar. Once you type in the character that you want to create on, something like ligatures just press this button or enter.
- A-Z Button: This works same way as you dragging “A-Z” Alphabets to the extension. It will detect the selected objects for “A-Z” and import them.
- a-z Button: This works same way as you dragging “a-z” Lowercase Alphabets to the extension. It will detect the selected Lowercase Alphabets for “a-z” and import them.
- 0-9 Button: This works same way as you dragging “0-9” Numericals to the extension. It will detect the selected numbers for “0-9” and import them.
- Batch Button: Once you have all the batch characters selected, you can use this button to import them.
- Letter Space (-): This button will allow you to Decrease the space between the letters.
- Letter Space (+): This button will allow you to Increase the space between the letters.
- Line Space (-): This will allow you to Decrease the space between lines.
- Line Space (+): This will allow you to Increase the space between lines.
- Scale (-): This will allow you to Decrease the scale of the letters.
- Scale (+): This will allow you to Increase the scale of the letters.
- Advanced Button: This button will allow you to get the image below, from here you can try the clear space button that will clear the spaces between the letters or try autospace which will automatically create spaces between letters. Monospace allows you to set a uniform width for all the gylphs. The Kerning allows you to change the kerning of the characters. You can also change the “Left – Width – Right” numbers to adjust the characters. Check Image Below **
- Live Preview: This white space is editable you will be able to see the characters here in live. You can write here and see your color font in action. Cool Right!?
- The Green Box: This box gives you a little info on color fonts and provides you the warning on which softwares are not compatible etc.
Please Note: If you already have submitted your activation key in the popup then you are good to go, please read above. Otherwise, you will see an enter key option in there you have to enter the key that you received in your e-mail that is once you purchased the FontSelf software.
4. Drag them letters into box.
Now, all you have to do is select one by one or just drag and select the whole “a-z” or “A-Z” part as they are grouped already.
Fontself will recognize it as being uppercase “A-Z” alphabets or lowercase “a-z” alphabets.
Now, the last part will be an easy one. The fun part actually but before that, let’s see an example below,
5. Export the font and sell them!
This is the last part if you have any problems in the previous steps just let us know and we will help you.
Now, that you have completed all the steps just press on the nice big export button and export it.
It will give you a box to type in the font name you want to export as, next it will take a few seconds and it will make a OTF file on the place you requested it to save. Great! What Next?
Next would be to sell the fonts that you just created or you can give them as a gift. It’s upto you!
Some of the famous marketplaces where you can sell your fonts would be creative market or envato elements.
Now, we also have fonts sections on our store where you can’t submit your fonts but you can surely download them for your own projects.
Now, that you are equipped with the knowledge of how to make a color font from start to end.
Go ahead and make a color font today and show the world your new color font and we would love to see it as well.
If you are looking for where to download that color font that we discussed in this article “americano color font”. You can easily get it by going to our store and in the fonts section. It’s FREE!
Don’t forget to share this article with your friends and family & also let me know in the comments down below if you have any questions regarding what we have discussed today in the article.
I would love to help you. Just ask me!