Search Unity

  1. Megacity Metro Demo now available. Download now.
    Dismiss Notice
  2. Unity support for visionOS is now available. Learn more in our blog post.
    Dismiss Notice

How to make a custom font

Discussion in 'Community Learning & Teaching' started by StabbyJoe1999, Dec 5, 2016.

  1. StabbyJoe1999

    StabbyJoe1999

    Joined:
    Dec 4, 2016
    Posts:
    3
    Hello! This is a tutorial on how to make a custom font for your unity project using a sprite sheet. First you'll need a program to make the sprite, I use paint.net for this, that's just what I'm used too. You can use whatever you like. Here's a link to paint.net

    https://www.google.com/url?sa=t&sou...cKm-exOdRitxnc9vQ&sig2=1ZTD-9zrdG1PQOl0KF58OA

    Now that you can make a font, well, let's make a font. I'm not going to lie, making a font can be very, VERY tedious. So we're not going to make a full font today, just four letters. A, B, C, and D, not that hard.

    So first what you're going to do is open your paint software, be that gimp, or paint.net. let's just say that your using paint.net (which I suggest, it's free and easy to use) so first thing you do, if you don't remember to do this before you start it will wreck your sprite. You're going to make a new layer (note, this may not be the same for gimp or photo shop) I always name the layer "Background" but I don't think that's necessary. The reason you do this is because the initial background paint.net makes is white. So if you try to make a texture on that. when you load it into unity, you have your texture, on a big block of white. But, when you make a new layer the layer is empty (checkered background) now all you have to do is, delete the old white background. Now you're ready to get started.

    Next you're going to set the image size, go to the "image" tab in the top right. Select "Resize" now, let's say that our characters are going to be 100x100 pixels. And there's four of them, so we're going to set the hight to 100, and the width to 400. Also you have to uncheck "Maintain aspect ratio" otherwise it won't work.

    Now, when I make characters, what I do is use the "Rectangle Select" tool to show me where I need to put the character. How I do this, is I use the tool at the bottom of the screen that tells you where your cursor is in the image, in pixels. If you look at the bottom of the screen while flailing your mouse around like a mad man, you should see it. Now because we resized the image to hold a single line of characters. We don't have to worry about hight, when it's like this it's really easy to make a perfectly square box, 100px wide 100px tall. Once you've done that, you can then draw your character inside the box. then you can make another box that starts where your previous box ends, and then draw your second character. rinse and repeat until you have all four characters. now you save the image and we start with the fun stuff.

    Next we open unity, and make a new 2d project (I say 2d cause I haven't tested it with 3d, I'm still a noob myself lol) name it whatever you want.

    Now I'm going to assume that if you're reading this, trying to implement your own font, then you are already acquainted with the unity editor so I'm just going to get to it.

    Generally for organizations sake, I keep each font in its own folder, inside a folder called fonts. you do not have to do this but I recommend it.
    We're going to make one folder called, well, whatever the hell you want to call it. Now your going to put that sprite you just made in said folder.

    Next you have to create a material.
    In unity, right click in your folder, hover over "create" then look for "material" should be right under "audio mixer"
    Name it whatever you want. Now in the inspector, set it's shader (right under its name) to "text shader" in "GUI"

    Now just drag your sprite to the texture slot in the material.

    Now you have to create a custom font. again, right click in your folder, hover over create, and way down by the bottom of the list should be "Custom Font" click that. name it. Now, I don't feel like explaining what everything in the font does, but I know who does, mister manual! in the inspector, look at the name of the font (or anything you look at in the inspector) and just to the right there should be a little blue book with a question mark on it. If you click on this it will take you to, in this case, the font section of the manual (with or without Internet).

    Now just drag your material to the default material field in your custom font.

    Now in your custom font your going to put "1" in the size field under character rects. now in Uv under "element 0" set the "W" field to 0.25 and the "H" to 1. what this is doing is telling unity that there's four characters across, and only one row.
    (You divide 1 by how many characters there are on a row/colum. for example if our font sprite was 10 characters wide and 4 tall, then your Uv W would be 0.1 and your H would be 0.25)

    Now when making a custom font, I've found that it's good practice to make the first character by itself, and then work on the rest separately. The reason for this is because when unity makes "elements" they are copies of the previous element. so we set the parameters of the first element, and then just tweak the rest as we go.

    Now, next we set the "vert". This is just the size of the individual character in pixels, so you can set the "W" and "H" fields to however big you want your characters, for mine I'm going with
    W 25 H -25(the "H" field is always negative.)

    Now we need to set the index.
    Here's a link to the Ascii table.
    (You'll need it)
    ascii.cl
    That's it, really.

    Now we're going to set element 0 to the index of "a" which is 97.

    Almost there! next we're going to create the text ui element.
    In unity go to the GameObject tab at the top of the screen. hover over "UI"
    And at the very top should be "Text" click that. (it should create a canvas for you)

    Now that you have a text element. drag your custom font to the font field under character. scroll down and drag your material to the material field under the color. Also it may be a good idea to disable the "best fit" option as this is not a dynamic font. now select the "text" section and hit "a" and see what happens. boom! it shows whatever demonic symbol you made!

    But if you press it again you'll notice something wrong. It's crating "a" on top of the previous "a". to fix this all you need to do is adjust the advance field directly under the "vert" field. adjust as needed, mine is set to 15.
    All should be well now.

    Now, you can go back to your custom font and set the size to "4" as you can see, the new elements are exact duplicates of the first one. Now we're going to set element 1 to "b"

    How we do that is by setting the index to "98" then under Uv set the "X" field to 0.25. leave "Y" as 0. (Y is only used when you have multiple rows)

    Now go back to the text section and press "b". And there's your other demonic symbol!

    Now I'm going to let you figure out how to set the other two characters. don't forget about the manual! and I hope this was helpful. I will probably try to make a better tutorial, this time with helpful pictures! but that's for another time. anyhoo tata!
     
  2. Izzy2000

    Izzy2000

    Joined:
    Dec 18, 2013
    Posts:
    49
    nice.

    for kissUI, i used AngelCode format which some tools like MBFont can export BitmapFonts.

    ex: link
     
  3. larku

    larku

    Joined:
    Mar 14, 2013
    Posts:
    1,422
  4. StabbyJoe1999

    StabbyJoe1999

    Joined:
    Dec 4, 2016
    Posts:
    3
    @Izzy2000 Where as that probably makes sense to someone who actually knows what their talking about. I am not that person, I am just a little peasant still learning the ways of game development. lol!
     
    Izzy2000 likes this.
  5. snufflesrea

    snufflesrea

    Joined:
    Jun 19, 2019
    Posts:
    1
    @StabbyJoe1999 thanks for your tutorial. I have followed your tutorial and managed to create custom font. It is working if I type only one single single character. When I type more than 1 character, the characters will overlap each other. Any idea why it is happen?
     

    Attached Files:

  6. conjugategames

    conjugategames

    Joined:
    Jun 8, 2016
    Posts:
    4
    @snufflesrea ,
    Set the advance field directly under the vert field, to an amount greater or equal to the width of the character.
     
  7. Error-102

    Error-102

    Joined:
    Jan 20, 2021
    Posts:
    9
    But what about the enter key? I got spaces, but not enters...
     
  8. Error-102

    Error-102

    Joined:
    Jan 20, 2021
    Posts:
    9
    You have to adjust the tracking option in the font.
     
  9. sisF

    sisF

    Joined:
    Dec 10, 2020
    Posts:
    4
    I really appreciate this tutorial. It saved me a lot of time and pulled me out of creating custom font hell. I was just about giving it up but finally made it.
    From my painful experience, it comes up with a sentence, life is too short, DO NOT use custom font unless you have necessary reason. It is worth nothing you spend so much time just for an image font.
    You may wonder why, but well firstly let's talk about something that this tutorial doesn't mention and then you may understand why. The points below are all I encountered when creating a custom font, it took me two night to figure out.

    1. As for shader of font material, sometimes GUI/Text Shader is not the only correct option. In my case, I use URP, so you need to choose "Univeral Render Pipeline/2D/Sprite-Lit-Default" to make text display normally. Or it will appear like below.
    upload_2023-4-28_23-45-24.png

    2. As for UV, there is a big deal. First thing you should now is that the origin point of your font texture is located in bottom left! Let me explain it. For me, I have a font texture downloaded from Itch.io.
    upload_2023-4-28_23-55-32.png
    It has totally 62 letters. Each letter is 15px width, 25px height.12 columns and 6 rows. So my UV.W is 0.083 and UV.H is 0.167. And if I set X to 0 and Y to 0, it is goting to display Y letter instead of A letter! You may think A is first letter and unity must show the first letter A but it is not! And this is because the (0, 0) starts from bottom left just like a rectangular coordinate system. Unfortunately, unity's official document doesn't even mention about it, not even a sentence.
    And for each letter, its own origin point is also located in its bottom left. So in order to get first letter A, you need to set X to 0, and Y to 1 - 0.167 = 0.833. Why not set Y to 1? Because A's origin point is located in its bottom left, you need to minus the height of A. So the A's UV X Y should be like (0, 0.833). So my first element is set to be like this.
    upload_2023-4-29_0-20-15.png
    For the second letter B, just increase its X by W, which is 0.083. So my second element is set to be like this.
    upload_2023-4-29_0-22-35.png
    Then for second row letter such as M, Y need to be minus H again which is 0.833 - 0.0167 = 0.666. So M is set to this.
    upload_2023-4-29_0-25-15.png
    Unfortunately, Unity's official document doesn't mention this either, just a picture example showing this, expecting us to understand it well.

    3. For line spacing option which is located in the most up in inspector, set it to height of letter, in my case 25. If you remain it to 0.01, when you wrapping word, letter will overlap each other.

    4. For adjusting the font size, I didn't find a good way to do it but just scale it. And for some reason I don't know, my font is very large in my screen. I have to scale it to 0.02 to get a better size.

    The font texture is from Pixel Art Wooden Font v1 by Narik (itch.io)

    So do you see that? As for creating custom font, even Unity's official document has a very rough description about it. And if you search the whole internet, all people are talking about making a TextMeshPro font but not this custom "image" font! There are so few tutorial talking about the this damn font. People even doesn't know about it! Everyone use dynamic font. And If I am not mistaken, you can only use this "image" font in Legacy Text, because only Legacy Text support .fontsetting file. The font you created is not a ttf file!

    If above statement is enough to convince you, let me talk one thing worse. Say you spend 1 tedious hour to configure a 12 letters * 6 letters texture just like the one I use. And then you need congfigure another 10 letters * 8 letters texture. Then, bomb! You need to spend another 1 tedious hour just to do the almost same work. Very time cosuming, Very inconvenient. Unity cound have all this done just by one element set and all else inferred but it didn't. And if you use ttf file, to create a TMP font asset you only need 10 seconds.

    I write this because I don't want to see someone coming here to find answer, following the tutorial but getting suck in the middle and leaving disappointly. StabbyJoe1999 did a very good job in 2016 and I decided to continue this even though it's now 2023 because I think that's where the answer comes from.