Custom Fonts in MakeStories 

Introduction

Hello, and welcome to lesson Number four of the MakeStories dashboard course. In this lesson, we are going to take a look at how you can use our own fonts in MakeStories.

To do that, the first thing that you will have to do is you will have to go into the tab that's called fonts. Now the moment you go there for the first time, you will see an illustration saying that no fonts are found.

Types of Font file

Now, if you want to upload your own fonts, remember that you will have to have the font files, these one files, you need to have it in TTF, OTF, or Woff or Woff2 format.

Now, if you want to understand, like, what is the best font format to use in terms of compatibility, you can go to this website called caniuse.com and search for the extension of your fonts.

Now, if you search for OTF, which is an open time font, it is about 97.89%. If you search for TTF, it's about the same.

If you search for woff, it's almost the same, if you search for Woff2 it is less. It's completely up to you guys to decide which kind of font file you want to use.

Things to keep in mind while uploading your own fonts on MakeStories Server

We'll just start with how you can upload your own font. Please remember that whenever you upload a font to the MakeStories server, we are just posting your font files.

You just need to make sure that these kinds of font files, which are uploaded, you have the license to use those fonts, and you will be completely responsible if those foreign files that you're uploading are illegal.

If someone complains to us, then we have the complete authority to remove such fonts from our server and your account, and uploading illegal forms can also lead to your account termination. Please make sure that the fonts that you are uploading are legally allowed to do that.

How to upload your own fonts in MakeStories?

That being said, let's proceed with how to upload your fonts. If you want to, you know, like downloading the fonts, then we have this amazing website called fontspace.com

There you can find about 80,000 free font files. Guys, please do not end up using any fonts illegally or downloading them from any other websites.

Like you might also end up having malware in your phones. So we have downloaded this font called Hussar bold for our lesson. What we’re going to do now is upload it.

The first thing that we will do is click this add font button. The moment you do that, it will have this form popping up. It is a bit intimidating. You have to understand everything very thoroughly.

The first thing that you will have to add is called the font name. So we will write, Hussar Bold. Since we’re uploading the bold version of this point, you have to change the font-weight to bold.

Now we will click on the upload button and we will simply drag-drop this Woff file over here. When you do that, it will say select file, select the file and click on add file.

The moment you do that, you will see that there is a link called fonts.story asset.link/. you really don't need to worry about it. This is our own server where we are uploading the font for our clients. Now, when you're done with this, just click on save fonts.

Now you can see that the font, which we just uploaded, has started to come up over here. Now, one thing with this Hussar font is that this Hussar font actually comes only in bold weight.

Let's try to find a family of fonts, which has bold and various weights of that font and we don't need to have one.

So let's do this. Let's go to collections.

Other ways to find fonts for uploading on MakeStories

One other good way to do this is to go to google fonts and download one font for our reference.

Let’s say we will download this font called Antonio, which has multiple weights, so we will download the entire family now and unzip the Antonio font so now it has TTF files for bold, light, medium so, this is a good example for us.

We will click on Antonio Google font for our reference. Now first what we will do is we will upload the regular version of this font.

So we have uploaded this. We have selected this file. Now there is this text that says add weight. So we will click that and we will select the weight as bold and we will upload it.

Now again click on add font. You can add one more weight, let's say light, Antonio light. Now let's say You really don't want the regular version of the font. So we will just remove this.

How to add multiple font weights in MakeStories?

At times, let's say you want to have multiple versions of your font. You also want to have a Woff, you also want to have a TTF. If you want to do that, what you will do is click on add a new link.

So for Hussar If you remember, we had two different versions. One was the OTF and the other one was the Woff. Now we have the OTF and the Woff version for fallback reasons.

This way you can add multiple font weights, and you can have multiple versions of one weight uploaded to the MakeStories panel.

Now we will just again click on save and you can see that we have the Antonio Google font. Now, these forms will show up in your story while you are editing it. We will go over here to create a new story. We will add a heading tag.

Now when we go into the text, it will show us two fonts, which we have just uploaded. We will click on heading one, which is Hussar font. We will also click on Antonio Google font.

Now over here in the Text appearance, you can see that we have two weights that we have just uploaded which are the light and the bold.

This way you can upload your own fonts into MakeStories.

Again, one special request, please avoid using any illegal fonts. That's it guys in this lesson See you in the next one.

Thank you.