Make a Pixel Art Font - Beginner Tutorial

[@Thielith]

This is _really_ helpful. The program I used was not made for pixel art at all. This is so much easier!

[@hashasquiowo9171]

Let me guess, fontforge?

[@Thielith]

@@hashasquiowo9171 yea that seems to be what i used before

[@MortMort]

Pixel Font Tool: Web Version: yal.cc/r/20/pixelfont/ Download: yellowafterlife.itch.io/pixelfont?download

[@codyharryman10]

Do you have a download/purchase for the font you created? It's really great and I'd love to use it.

[@animatrix1490]

THANK YOU SO MUCH for making this tutorial; I kept coming back to it OVER AND OVER as I struggled with my fonts. If you're like me and you keep screwing up the fonts in the editor so that when you type like half of the letter is totally missing there are actually tooltips if you hover over stuff with your mouse. If you hover over the "Highlight glyphs under the mouse" checkbox near the top of the window it will give you the key for what the colors mean. I was pulling my hair out trying to figure this out so I hope that helps someone avoid the purgatory I've been experiencing for the past 2 hours

[@cyb_]

Finally !!!! Finally the tutorial I was looking for! Thank you very much! I wanted to make a pixel font for so long, now I can!

[@ashs4350]

I just wanted to say this is amazing and all your tutorials are the best tutorials I’ve ever seen, for anything ever. Like seriously amazing stuff, you’re an amazing teacher and communicator. Thank you for sharing this!!!

[@silvia-narity]

I've been looking everywhere how to make the font I made an actual font I can use in Unity for a lot of time now, and this is the only thing that worked! Thank you so much for making this video and just being awesome in general!

[@genry7418]

Thanks mate. You are the best. I am watching 4 years after when you post and it still helping a lot.

[@23mooncakecopters]

Years later this video is still whats up. THANK YOU!!!!

[@summerskye8852]

This was a lifesaver and kept me from having to learn Font Forge for another day, so thank you!

[@corwynprichard6274]

Thanks for putting this tutorial together, massively helpful for my current project!

[@redpie907]

Finally 🤩 a MortMort videooo yesss I bought the Aseprite just because MortMort is cool and i would love to make pixel stuffs too Not everyday because i am a bit busy but i am sure i would learn it and make some good stuffs maybe one day a game 😂

[@morganlak4337]

I really like your technique of just drawing a letter until it looks right and THEN determind the dimensions for each glyph. Makes a lot of sense!

[@solstice_enigma]

Oh my god, Mort, you're my saviour! Been doing research for forever and here is my exit. Thank you Mort again :)

[@DeathByPixelsVisuals]

Really nice tutorial! Deep enough to get in some details without overextending into typography theory and jargon. Well done!

[@ryko1246]

No wayyy! This is exactly what I was searching for and you judt went and posted it today! Mind blown! Thanks a lot!

[@harpernicholson1]

thanks for the tutorial man :) still helpful years later

[@PavoneSoftworks]

I've always wanted to know how to do this :O

[@sosasees]

Thanks very much! This tool was very helpful, because now came the time where I needed to make my own font for my game (even if it's just for Debug Text right now). It saved SO much time and gave me SO much freedom because I could use my usual Pixel Art program instead of a dedicated Pixel Font maker.

[@TwistedxRainbow]

Thanks so much for this tutorial! I've always wanted to make fonts, but never knew how to create the proper file.

[@StuffOnFoundations]

Thank you very much! This tool has come in clutch!

[@indieklem]

Thanks for this tuto! I manage to create and use my custom font in GameMaker in few days :)

[@goest1483]

Awesome! I was just thinking of making a pixel art font, great timing!

[@Piesonscreations]

Thanks for the tutorial! Last time I made a pixel font, I brute forced it by making the font regularily, then vectorizing it, and then handling it like any other font. This is a lot simpler lol

[@legokingiscool]

Thanks so much man!!! Cheers :D Merry CHristmas and Happy Holidays everyone!

[@sosasees]

Thanks very much! This kept me from having to overcomplicate the process. SVGs are great for HD fonts, but not for Pixel Fonts.

[@malformedfun3625]

Thanks a ton. I've been looking for a font maker like this.

[@cuboembaralhado8294]

7:40 one way to overcome that is by copying the alphabet again and setting it to be the the lowercase letters, like a fake lowercase

[@ellestuff6318]

I'm here just to know how to make it look good. Another choice for web based pixel font making is Fontstruct, that's what I use.

[@moncefsharp3999]

thanks alot i was looking for this website for long time ❤

[@danforce4222]

Thanks for this tutorial, I wanted to make my own font for my future game sometime but didn't know how :)

[@hejhejhej952]

Thank you so much for this video! Very helpful :D

[@GamesBySaul]

This was brilliant! Thank you definitely helped me with my Ludum Dare entry! :D

[@ellies_silly_zoo]

I was using fontstruct until now and it was just _painful_ to be honest. I much much prefer using my normal image editor for fonts and being able to see all letters at once. Thank you so much!

[@Cjoudan]

Best video on making a ttf file thanks

[@coalt]

Great video! Used it and I have a font now. Thank you!

[@Lt_Koksu]

Thanks for this amazing video! It helped me a lot :D

[@RosenthalBros]

This stream was so fun!

[@sosasees]

5:29 You overcomplicated this step. I simply use the Crop Tool.

[@KashiwaDaisuke]

Looks like the font from Baba Is You

[@noname-mw7oy]

this was really useful tysm :)

[@hawksjay1747]

A very useful video, thank you

[@gerarddilk4862]

thx man, great tutorial

[@Technocrath]

Thank you VERY much! :)

[@ektelion]

First of all, thank you so much for this, using Aseprite to create fonts makes so much sense and I'm so happy that there actually is a way to do it! That said, I'm having some issues with this method, which however are language specific, so I'm not sure if you can help me. I've created a Greek font, saved it as ttf and installed it on Windows 10. I then proceeded to type something in MS Word using the font, but as soon as I start typing, it automatically reverts back to Calibri. Now, the weird thing is that if I type whatever I want, select the text and then select the font that I've created, it actually changes to the font and everything looks fine. So all in all, the goal is achieved, but I am quite perplexed by this weird behavior, so I was wondering if you've had similar issues yourself, since you are also using non-Latin characters. Thanks again!

[@natelawrence]

What is the recommended way to handle letters with accent marks on them in pixel fonts? I wanted a Final Fantasy (I) font to use in some Patreon credits and started making my own rip since the one I found online had some tracing mistakes in it. However, both Katakana and Hiragana have characters with accent marks above them which change their pronunciation. In the original game, both the dakuten ゛ and handakuten ゜ symbols each consume a full 8x8 tile on-screen and their tile is simply placed above one of the unaccented characters. Does this mean that all of my characters in my pixel font need to be 8px wide and 16px tall, even though most characters will have an empty top half? That feels like a very clunky way to handle the problem.

[@sound2201]

I'm trying to add shadows to my pixel art though, the letters are white and the shadows are black, but cant seem to make it work on the website

[@lawsona]

same omgg did you figure this out?

[@hierkonnteihrewerbungstehe8008]

Helppp When i import my png, it shows white Boxes with letters in, even tho i havent made any kind of box, i just made the outlines Also, the First two Lines fit in perfectly, but the tile in the thrid line is one pixel offcenter, without any reason pls help my i cant find a solution

[@hierkonnteihrewerbungstehe8008]

Ok I found the solution (turn font color to black) BUT when i write it on the Website it works, anyways in word it only types the descend Pixels and not the whole letter

[@asthalis]

Hello and thanks for this very useful video ! Yet, I have a problem with my handmade pixel font, and I had the same using BitFontMaker : all glyphs are fine when I use my font, except the apostrophe, which keeps its original shape and never switches to "pixel" version. Any idea of where it may come from ? It only happens with this character ('). Thanks if you can help !

[@madcountofdumont7742]

Keep it up buddy

[@herrickthenoob]

great tutorial but I got a problem with the website. I did everything but when i typed to see the results it gave me a transparent letters and white background of the letters. do you know how to fix this issue?

[@waza255]

Good video Mort :)

[@eboatwright_]

Thank you so much!

[@minutesock9649]

I'm struggling to get words not so close together. I used the ∎ character to denote a space like the website does by default. My font looks fine with everything except for spaces being too small even though the space is the same width as a normal character. Is there any kind of variable on the website to maybe make your spaces double wide? The monospace option is not what I'm looking for as that makes all of the characters spaced out in a block fashion.

[@felipecesconettomartins2097]

im having the same issue here now, did you ever figure out how to fix that?

[@minutesock9649]

@@felipecesconettomartins2097 To be honest, I can't remember what I did over a year ago. I know I messed around with the numbers until it looked better, although, my font is still not that great (it sits too high on the line), it gets the job done.

[@EkilGamer]

Does the colour of the letters need to be black alone? Because I got a font which has black and Magenta letters.

[@IceRaptor]

I tried using something called Caligraphr but it kept smoothing the edges... This will be VERY useful, Thanks!

[@12jn00gb]

Can I use my font anywhere? (I mean, is it allowed by people who made this font generator?)

[@Pengoony]

This has been really helpful! Is there a way to import colored fonts? Like fonts having a gradient or something?

[@halobread]

not how fonts work

[@rapro_player4568]

Ok, os this was very helpful tutorial, but my font that i did, well its just putting all the characters below the blue line and idk what to do, can anyone please help me? EDIT: nwm just figured it out, just change the baseline

[@nightmoon1163]

Thanks

[@itsdirkelsevangilist555]

Already know this is gonna be awesome!

[@Schwarzorn]

Is this not supposed to be a vector font? I think that’s what I need, cuz it’s not working properly in the game I’m trying my font on. It works fine in Word 2003, at least, but it’s still a bummer...

[@lyca7016]

Have you shown what you did to make Aseprite look like yours?

[@jannikkimjensen1433]

Wait wait wait. are you danish? thats awesome i had no idea!

[@muttlymartin]

iv got a problam with this website hew uses, how can you make it so there is colour in the text?

[@AlphaCollectorCZ]

Great guide, however I have a question. I made white font with a black outline and it keeps just registering the outline as the actual font and the white fill (which is actually the font) shows as transparent. Is there any way to fix this?

[@moncefsharp3999]

put in your mind that font glyph is just shape with some informations, so the tool will draw the shape of the glyph as the black color

[@sectorrrrr]

what if my font has multiple colors? is it still possible to make a bitmap font?

[@somecloudy]

Note, this tutorial does not help you make colored/styled fonts with color. The program doesn't quite know how to do color it seems.

[@qew_knight]

do you know what to to make a font with collor?

[@guachipoto9925]

Mmmh... Now I can make a font...

[@emedi.09]

can you use the new font in word documents? writing online like youtube comments?

[@juansebastianantecontreras5376]

can you make this with colored fonts?

[@TheProbots]

Does this work with colored fonts too?

[@denn501]

Wow !!

[@hielum1337]

nice vid :0!

[@codingkam1252]

How did you get the aseprite theme? did you have to buy it?

[@MortMort]

There is a link in the description to my Aseprite Theme :)

[@voltzblock7834]

Can u make the Font in different Colors?

[@_ess]

YOU ARE DANISH?!

[@MortMort]

Så Dansk man som man kan være! :)

[@mrarne2749]

@@MortMort själv är man svensk

[@Lukz243]

what about some characters like ideograms?

[@sildurai8287]

That's exactly, what i searched for, but sadly something in that little browser tool doesn't work. The text preview shows a default font instead of my own uploaded one and when i save it, the font doesn't work either. If someone knows, how to fix that, please tell me. :~)

[@sildurai8287]

Update after i tried it a few days later everything works just fine. Thanks for showing this website!

[@lilyleaf6502]

@@sildurai8287 the link times out and doesn't work at all for me :( is it still working for you?

[@sildurai8287]

@@lilyleaf6502 Yeah, after the problems, i mentioned in my first comment, for me everything works fine.

[@Valeguard_d0.0b]

This tool can be downloaded locally for free or for donation at yellowafterlife.itch.io/pixelfont?download

[@St4rrrrr]

What pallet is he using and if mort is reading this can you start putting the pallet you use in the discrimination

[@martincarapiaa]

Pog I think shock edited this

[@lumishere]

guys what is the website url

[@alvinseptiano]

Noice

[@poseeley]

I had to use onlinefontconverter.com/ with my font file to let Windows install it. Hope this helps anyone else with the same issue.

[@Aisem_Illust]

❤️❤️❤️❤️❤️❤️

[@om4edan]

Был бы перевод на русский(

[@ralphofficial7794]

Does anyone know which website he is using?

[@foot_portrait]

It is in the description: yal.cc/r/20/pixelfont/

[@ralphofficial7794]

@@foot_portrait ok thanks

[@DawidLewandowski-ev7rd]

2q

[@peepeepoopoocheck2092]

fant

[@JZues816]

8th lol

[@JZues816]

I bet 5$ MortMort won't like this comment

[@lucasfrancisco3432]

How I add border in my font? I put in draw, but when I upload the image, site remove the border... Can help me?