a font tutorial

My name is Indica, and I have been playing Neopets for eight years. (Total, of course--my original account was frozen three years ago. My current lookup, dandelioncupcake, can be found here.) In all of that time, I have been making neoboard fonts. Because I have gotten so many informal requests for fonts and overall interest in the things that I make, I have decided to create Chatoyant.
Below is my current font gallery of the fonts I use frequently on the neoboards. Below that is an actual step-by-step guide on how to make your own font, or maybe just get some inspiration.
And yes, if you were wondering, requests for fonts are open! Just neomail me with the header 'Font Request' and your specifications. :3



the font gallery

Hello, and welcome to Chatoyant! A brief description of who I am and what I do is in the paragraphs above. *points* Below is a gallery of some of the fonts that I have made recently. More are added all the time, so be sure to check back frequently! :*



the tutorial

After seeing/reading all of this, you might ask me, 'But what if I want to learn how to make my own font?' Well, good for you, you independent Neopian! I hope you have years of creative font making ahead of you, but there are probably a few things you need to know first in order to get started.


Let's say that you're completely new to this concept of font making, and that you've only ever ventured to the neoboards preferences page to change your avatar. Well then, you'll be needing a brief orientation, won't you?
There are two parts to coding a font: NeoHTML and NeoSignature. Your NeoHTML code, the code that allows you to write on the neoboards, usually looks like this:

This just means that whatever you type on the neoboards will look like this:

My neoHTML code usually looks like the image below.

Pretty lengthy, eh? This makes my text on the neoboards look like this:

For the sake of this tutorial, you might want to type one of the above two NeoHTML codes into your NeoHTML box on the neoboard preferences page. That way, you can follow along step-by-step. Oh, and don't forget: you can only post your neoHTML code in the neoHTML box, not the NeoSignature box! Just a handy tip. :)
Okay, so you might be wondering what all of that mumbo-jumbo code in my NeoHTML was. Here's a diagram breaking everything down:





There are tons of fonts that you can use on the neoboards. If you poogle a list, I'm sure that you could find a pretty comprehensive one. However, these are the few fonts that I use pretty regularly.

The font at the top up there, Verdana, is the same font that we used for our neoHTML. Just like how if you don't enter a font size it'll be a size two font, if you don't enter a fontface your font will be Verdana. This isn't a bad thing by any means. In fact, it is something that can save you a lot of time. Here, let's add to our neoHTML code from earlier and make our font Georgia.

As you can see, the hex code #000000 is the same as black. Put the letter 'f' behind that, followed by an equal sign, and use that to change your font. Basically, you can put any fontface compatible with your computer and Neopets' system behind that equal sign. Here's another example.


You guys got it yet? I hope so, because we're moving forward!



There are three tags intrinsic to font making: italic, bold, and underline. They're all short codes, and are very simple to use. Here's an example:

Above are the types of font effects and their respective tags. Pretty easy to remember, right? Now let's start on removing that pesky signature line.



The signature line, or siggy line, if you will, is that ugly dotted line after your neoHTML. Obviously, it does not make for a very pretty font! However, there is a super simple way to get rid of it once and for all. All you have to do is place two brackets like so in your code:


Just place a right-facing bracket at the very end of your NeoHTML code, and put a left-facing bracket at the very beginning of your NeoSignature code. That was easy, wasn't it? And look, we're already headed towards a clean, pretty font.


Now that we've covered the basics, let's start with your actual font. Exciting, isn't it? But first, let's skip a line in your coding.


It's super simple. All you have to do is position the [br] tag in your font code to skip a line. This is one of the only tags that doesn't need an end tag, so this little thing doesn't take up a whole lot of space.
Remember that you don't have to only skip one line at a time. It is perfectly valid to place two (or even three!) [br] tags back-to-back in order to create more space in between your NeoHTML and your actual signature. Also know that you can put things above your NeoHTML in your font, as long as you keep your NeoHTML code inside of the NeoHTML box. Can I say NeoHTML again? Okay, NeoHTML. Let's move on.
Let's start by placing a special character above your NeoHTML code. Special characters are characters that aren't found on your traditional keyboard, and we use them on Neopets to jazz up our fonts. There's a textbox below of special characters that I use on a regular basis. There is a complete list on Sunnyneo, and I highly recommend that you check it out.


This next bit of coding is just so that you can get a feel of using special characters and coding above your NeoHTML. Find the two musical notes in the textbox above. Copy and paste them into your coding like so:

Don't forget to type a [br] tag afterward, for the sake of this exercise.

Wow, your font's getting pretty lengthy. But it also looks kind of...drab. How can we fix that?



That's right, hex codes! I told you that I would come back to those. Below is a chart of hexademical color codes. Pick any two that catch your fancy and color your musical notes and NeoHTML with them. There's an example below.



Some people like to put #s in front of their hex codes, but I don't find it necessary. It doesn't affect the color at all, and really just wastes precious characters. Some people claim that without the #, your hex code won't render in IE or Firefox, but I have used both of these without any trouble. However, if your codes seem not to do anything, then that's most likely the issue.
Here's another tip that you can use if you are pressed for space: some Neopians have informed me that instead of c=black or c=000000, you can just use c=0 instead.



Now it's time to really get your font on the road! That's right, now we'll start to work on your NeoSignature. Let's start by removing all of the special characters code, because that exercise is over with.
Let's also change the NeoHTML fontface from Georgia to Verdana by removing 'f=georgia'.


There we go. That's a nice blank slate to work off of.
The most common font used for NeoSignatures is Georgia, because it is very versatile and can easily look elegant and effortless. Let's start off with this one, because it doesn't need a whole lot of tweaking to look good.
Copy and paste the following after the [br] tags in your NeoHTML box.

After pasting this in, you may notice that the siggy isn't centered. Fix this by moving the [/center] tag to the end of your NeoSignature box. Keep it there, moving it only if you want to make a left-justified aspect in your font later.
Also make sure to replace the black hex code with a code of your choosing from the section above.
You font should now look something like this:



That's a good start, considering that most Neopians never get past removing their signature lines! Now, let's talk about wingdings and webdings.
Wingdings and webdings are two types of fontfaces. Basically, they're like special characters, but can be more elaborate. However, a drawback to wing/webdings is that they take up quite a bit of characters in your font. If you have a Neoboard Pen, that point is moot, but I do not.
Let's try out some wingdings now. There's a full list of web and wingdings on Sunnyneo, my go-to font help site, so feel free to go there to see all of the available characters
Copy and paste the code in the textbox below into your NeoSignature box before the [/center] tag.


Ta da! Now you have a wingding! Make it prettyful with a hex code, if you'd like.




Don't be frightened by the title of this section. Instead of thinking of these codes as slightly complicated, think of them as capable of fancifying your font. Yes, I know that's not a word, but you get the picture. ^o^
Let's start with moving your siggy around, and not just to the center or left of your font. Move the code that says [i][fonts=4c=000000f=georgia]text here[/font][/i] down into your NeoSignature, after the bracket and before your wingding. Your font will look exactly the same, I'm just making room for the following code.
At the end of your NeoHTML, after the [br] tag but before the [ bracket, copy and paste the code below:

Well, look at that! Your font is super fancy!
Here's an interesting tidbit of information: Neopets won't actually let you use the hex code #FFFFFF, white, in your font, so you would have to use the closest thing. The hex code that I just used, #FFFFFC, is almost white, and blends in pretty well to the Neoboards' background.

Now we're going to talk about two really cool tags that you can use in your font. They're called sub and sup tags, and they can make you font do some pretty neat things. We're going to test out their abilities in this next exercise.
Take out the { in your webdings coding and replace it with the code in the textbox below:



Whoa! Look at that!


So you can see that sup tags lift your font up, and can create the illusion of sparkles in this case. Now, replace the [sup] and [/sup] tags with [sub] and [/sub]. You'll see that they force your font down.


If you put sup and sub tags together in just the right way, you could come up with something like this:


The last thing that we're going to cover is double underline. It's basically what it sounds like: no tricks here. Just delete the following from your NeoSignature: [fontf=wingdingss=4c=66CCFF] ³[sub] ³[/sub][/font]. Also delete this from your NeoHTML: [fonts=4c=FFFFFC]________________[/font] and move your font that says 'text here' into your NeoHTML. Now you should have nothing in your NeoSignature except for ][/center].
Go ahead and put underline tags ([u] [/u]) around your 'text here' font. Then skip a line using [br].
Okay, removing things really was the only bit of semi-hard work you had to do, I promise! Now you can copy and paste the following into your NeoSignature between ] and [/center]:



Tweak that until it's to your size and liking, and add a hex code of your choosing. You can even connect the dashes to make one long thick line, if you would like. It should end up looking something like this:



There, that wasn't so hard! Well, you've come to the end of my font tutorial. Thank you for stopping by!

~ Indica (dandelioncupcake)



font requests

Font requests are open. If you would like to have one, simply neomail my account, dandelioncupcake, (link is in the first paragraph *points left*) with the header 'Font Request'. In your request, please say which avatar you would like it for, what you would like it to say, etc. I do not specialize in picture fonts, so please don't ask!


linkage

boards

link back?








affiliates



Affiliate count: 3/20
Apply by neomailing! I have no criteria. :3

listed at







accomplishments/awards


Recommended site at plethora!

reviewed by:





Credit

Layout by Sugary Premades with editing by moi.
Resources by Details:3







Heads Up! You're about to leave Neopia!

You've clicked on a link that will take you outside of
Neopets.com. We do not control your destination's website,
so its rules, regulations, and Meepit defense systems will be
different! Are you sure you'd like to continue?



It is a journey
I must face...alone.
*dramatic music*
I want to stay on Neopets,
where the dangers of
Meepit invasion
are taken seriously.
Heads Up! You're about to leave Neopia!

You've clicked on a link that will take you outside of
Neopets.com. We do not control your destination's website,
so its rules, regulations, and Meepit defense systems will be
different! Are you sure you'd like to continue?



It is a journey
I must face...alone.
*dramatic music*
I want to stay on Neopets,
where the dangers of
Meepit invasion
are taken seriously.
Heads Up! You're about to leave Neopia!

You've clicked on a link that will take you outside of
Neopets.com. We do not control your destination's website,
so its rules, regulations, and Meepit defense systems will be
different! Are you sure you'd like to continue?



It is a journey
I must face...alone.
*dramatic music*
I want to stay on Neopets,
where the dangers of
Meepit invasion
are taken seriously.
/help/bumper/headers/log-in-to-facebook

NEOPETS, characters, logos, names and all related indicia
are trademarks of Neopets, Inc., © 1999-2017.
® denotes Reg. US Pat. & TM Office. All rights reserved.

PRIVACY POLICY | Safety Tips | Contact Us | About Us | Press Kit
Use of this site signifies your acceptance of the Terms and Conditions