/>

Navigation

AccountCentralExploreGamesBoardsShopsNews VideoMall

This Page

Welcome Basics Break it Down Special Characters Dings Put it Together Styles Suggestions Picture Fonts Double Underlines Gradient Fonts The End

Other Links

My Fonts UserlookupNeomail ƒøητsy Webbie

Welcome

Welcome to Fontabulous! At this page, you can learn how to make an amazing font, or request a custom font just for you from me. I'm Jenn, and I run this site. You can see my fonts here. Info about custom fonts is on the right. Now go and browse around!

...Oh yeah. One (or two?) more things.

1. Take everything I say with a grain of salt.
2. If the font's code isn't already provided, I won't give it to you. Sorry!

Back To Top

Basics

Before we get started, note that fonts are coded with square brackets ([ and ]). Everything inside the brackets is invisible when you type on the Boards. Anything outside the brackets is what your actual font looks like! For every code you put in, you need to end it too! To do that, use a slash (/) in another code, just like HTML tags. If you're confused, this should make more sense in the next section. ^^

Back To Top

Break it Down

Here, I have put together all the tags you can use in a font. And what they do. Nifty? Well, I'd like to think so...

[center]: This centers everything in between this code and the code that ends it: [/center]

[fonts=#c=#XXXXXXf=XXXXXXXX]: This code changes the font, size and colour of your text. Replace the number sign of s=# with a number from 1 to 4, 1 being smallest and 4 being largest. Default size is 2. If you want your font size to be 2, you don't need include the s=# part of the code. The next part changes the colour! Replace the X's with a hex code. The default colour is black, which kind of makes sense, am I right? If you want the text black, again, leave it out. Finally, the f=XXXXXXXX changes the font face of your font. Some popular font faces are Georgia, Tahoma, Verdana, and Rockwell. If you want more font faces, try dafont. But keep in mind, most users will not be able to see it, so if you want to get it rated I would strongly recommend a screenie! Default font is Arial. You know the drill, not wanted not needed! To end all of this, all your need is [/font]

[b]: This makes text bold! It is ended with [/b]

[i]: Similar to the bolding code, this puts your text in italics! The code to end it is [/i].

[u]: One last code like this, this adds an underline to your text. I bet you can guess how to end it, but just in case: [/u].

[br]: This nifty code works just like the enter key. You don't have to end. [p] is a similar code that works like two enter keys!

[sup]: This code raises text slightly above the rest of it (superscript), and makes it slightly smaller at the same time. Ended with [/sup].

[sub]: Very much like the sup code, but it lowers instead of raises fonts (subscript). Ended with [/sub].

neoHTML: Though this is not a code, you need this in every font. This is for what you want your text to say when you post on the NeoBoards. You must put this in the neoHTML box, otherwise you get an error. For example, if you type "Hi, my name is Jenn." on the boards, neoHTML will become "Hi, my name is Jenn." Fancy, eh?

Back To Top

Special Characters

This bit is pretty straight forward. Special characters are characters that you can copy and paste into your font for added oomph. Included are hearts, starts, spacers, and funky letters.

Examples: Some common special characters are:
() This is a spacer that you can copy and paste into your font, if you were wondering. It's quite helpful if you're trying to off-center your font.


α
ø
ε

There are thousands of other special characters, you can find them on Sunnyneo's list. Have fun with them! If you're looking for a quick list, Holly has one here.

Back To Top

The Dings

Webdings and Wingdings are font faces that use symbols instead of letters and numbers. They only work in Internet Explorer, but the amazing Holly found a way to make them work on Firefox. If you're curious, you can find the info here. If you use them in your fonts, screenie them so everyone can enjoy it! A list of them can be found on Sunnyneo.

Back To Top

Put it Together

Now that you know what codes you can use, now you can put them together to make your own font! But a little note: You only have 120 characters in each box to make your font. An exception is a Neoboard Pen, which is purchased at the Neocash Mall. They give you 150 characters in each box, plus an extra set of preferences, so you can use 2 fonts at once.

Before You start, you want to destroy that siggie line (those little dashes that you see in between your neoHTML and siggy)! Do that by putting [ at the very end of the NeoHTML box, and a ] at the very start of the NeoSignature box, like in the example below.


Like this -points up-
Drag into Address Bar for the full view

Now, there are a couple rules I should bring out now, since they are important now.

001. Your neoHTML must go in the first box! But you can start your signature in the NeoHTML box!
002. Personally, I'd avoid using Papyrus, Jokerman, and other hard-to-read fonts.
003. Lots of people match their fonts to their avatars.

Here's a basic example of a font.


NeoHTML: [center][fonts=1f=tahoma]neoHTML[br][/font][fonts=4f=georgiac=#D9B3D9][b]Name Here[/b][/font][fonts=4c=#D4649B] ♥[br][

NeoSignature: ][/font][fonts=1f=terminalc=#A6366F]IS A NEOPETS [u]ADDICT[/u][/font][/center]

Now, let's look at that code.
Notice how it's centered, the code is ended at the very end. The neoHTML is small and black. Make sure your neoHTML is a readable colour (black, grey, and other darker colours are nice)! The Name Here text is bolded, in size 4 georgia. The siggy line is removed, and the [br] code is used twice. Notice the spacers are used before the "IS A NEOPETS ADDICT" part, which will push the text to the right. You can see here how different colours from the avatar and different font faces and sizes are used so it looks nicer. Not all of the different codes for font making have been used, but that's okay. Using all of them usually makes the font look messy or cluttered!

Back To Top

Styles

Most fonts fit into one of six different styles (or so I've found), sometimes more. Well, you don't have to call them styles, I think it sounds weird. I just lack a better term to use...

STYLE 1: Name font!
Features your name with decorations and/or other text. Example below:

STYLE 2: Picture font!
This font, made from blocks, makes a cool picture! Example below:

STYLE 3: Gradient font!
These fonts fade colours from one to another, which looks very pretty :) Example below:

STYLE 4: Lyric font (or quotes, too)!
This font style has song lyrics incorporated into it. Example below:

STYLE 5: Guild font!
Used to either show off Guild spirit or to advertise. It can have just the Guild name, or your rank and the Guild name. Example below:

STYLE 6: Advertising font!
Like with Guild fonts, these fonts promote something, such as a petpage or contest entry. Usually they include links, or /~petname for petpages. I don't have an example at this time, but I'm sure you've seen them around. If you haven't, let me know and I'll throw something together.

Back To Top

Tips & Tricks

Here I have put together any other ideas I deem useful in making amazing fonts!

001. Font faces (sometimes referred to ff's on the boards) like Georgia, Tahoma, Terminal, Monospace, Arial, Verdana, Rockwell, Perpetua, Times, and Garamond are nice.
002. Double underlines are awesome! The special character for them is ¯.
003. Violation is an example of a cool, downloadable font face. You can see it in the example for Style 4.
004. Make sure your fonts are readable (blinding yellows and greens burn the retinas)!
005. A few alts (copy-pasteable letters) and special characters are nice; but try not to overload!
006. Text usually looks nicer under your neoHTML.
007. Sups and subs are nicer with special characters, with text it can look messy.
008. Be creative! Some of the nicest fonts I've seen have been very different from the norm, though they don't always get the best rates (learn not to really care about them, I don't).
009. Lurk font rating boards to see what fonts get higher rates if you want a high rate.
010. If at first you don't succeed, try, try again! =D

The best way to learn is trial and error. Just keep trying until you get a font you love!

Back To Top

Picture Fonts

So, it appears this section was much needed. Here I'll do my best to help you learn how to make picture fonts. These fonts are the most complicated, and turn out best if you have a Neoboard Pen. Picture fonts are usually made from the block special characters, which can be found at Sunnyneo. There are half blocks and whole blocks; you want to balance them to make the font look realistic. I suggest starting off with something simple, like a lollipop or a bug. I'll do an example with a lollipop! It's possible to break picture fonts down into 4 steps, 2 of them being optional.

STEP 1: Choose an image; in this case a lollipop. You can base your font off of a picture or by memory, which is how I did this one.

SETP 2: Form the picture! This is the hardest step, but if you do it in pieces it's a lot easier.

First of all, choose a colour and size. This will depend on the size of the image you are creeating. Smaller thing, smaller size. Then start, one line at a time. Here's the first line. The code so far is:
NeoHTML: [center][fonts=1f=tahoma]neoHTML[p][/font][fonts=1c=#EA3737]▄▄▄[
NeoSignature: ][/font][/center]


Now, break the line with [br] and make the next line. With a lollipop, you want to make it a bit wider like in the picture above. Now the code is:
NeoHTML:[center][fonts=1f=tahoma]neoHTML[p][/font][fonts=1c=#EA3737]▄▄▄[br]████[
NeoSignature: ][/font][/center]
See how the code is barely different?


Now, finish of the head of the lollipop and start the stem. Here, the colour changed to make the stem a different colour. The code now is:
NeoHTML: [center][fonts=1f=tahoma]neoHTML[p][/font][fonts=1c=#EA3737]▄▄▄[br]████[br]▀[/font][fonts=1c=#aaaaaa]█[/font][
NeoSignature: ][fonts=1c=#EA3737]▀[/font][/center]
Now the code is longer, but that's only from the colour change! Notice how the short and long blocks add to the rounded effect of the lollipop!


Now, finish the stem. All you have to do is change the font to #aaaaaa again, and break the code after every block. Like such:
NeoHTML: [center][fonts=1f=tahoma]neoHTML[p][/font][fonts=1c=#EA3737]▄▄▄[br]████[br]▀[/font][fonts=1c=#aaaaaa]█[/font][
NeoSignature: ][fonts=1c=#EA3737]▀[/font][br][fonts=1c=#aaaaaa]█[br]█[br]█[br][/font][/center]

Hey, now you have completed your lollipop! Now for the optional steps!

STEP 3: If possible, add a caption! This way people will know what it is right away. Only do this if you have the space to.

Make sure the caption does not overpower the font. Code:
NeoHTML: [center][fonts=1f=tahoma]neoHTML[p][/font][fonts=1c=#EA3737]▄▄▄[br]████[br]▀[/font][fonts=1c=#aaaaaa]█[/font][
NeoSignature: ][fonts=1c=#EA3737]▀[/font][br][fonts=1c=#aaaaaa]█[br]█[br]█[br][/font][fonts=1f=verdana][b]lollipop[/b][/font][/center]
To add the caption, you need an extra font code and break.

STEP 4: Add alts to the caption! Only if it fits, and only if you like alts.

Now the final code is:
NeoHTML: [center][fonts=1f=tahoma]neoHTML[p][/font][fonts=1c=#EA3737]▄▄▄[br]████[br]▀[/font][fonts=1c=#aaaaaa]█[/font][
NeoSignature: ][fonts=1c=#EA3737]▀[/font][br][fonts=1c=#aaaaaa]█[br]█[br]█[br][/font][fonts=1f=verdana][b]løllipøp[/b][/font][/center]

Voila! That's all there is to a picture font. Keep fiddling with them to get the right dimensions, don't expect them to work out right away! After a bit of practice, you'll be making fonts like these!


Back To Top

Double Underlines

This section is very straight forward. Say you have a font like

And you want it to look like

This!

All you have to do is add the special character "¯" to your font; changing the code from:
NeoHTML: [center][fonts=1f=tahoma]neoHTML[p][/font][fonts=3f=georgiac=#92B6FE][b]Jεnnifεr[/font][
NeoSignature: ][/b][/font][/center]
To this:
NeoHTML: [center][fonts=1f=tahoma]neoHTML[p][/font][fonts=3f=georgiac=#92B6FE][b]Jεnnifεr[/font][
NeoSignature: ][/b][fonts=4c=#EF64FE][br]¯¯¯¯¯¯¯[/font][/center]

By adding an underline to the text, you can get the font to look like this:

The double underline will change in thickness depending on it's size and whether you decide to bold it or not. Some fonts I've made with Double Underlines are:


Back To Top

Gradient Fonts

Gradient fonts fade from one colour to the next. They look pretty and are fairly simple to do, once you know how. Here, you will learn how to. There are 3 steps for gradient fonts, the 3rd one is optional.

STEP 1: Go to Sunnyneo, and under Neoboards click "Rainbow Font Maker" and scroll til you see something that looks like this:

When you get there, there won't be any colours listed. The first box is the start colour of your choice, the second the end colour of your choice and the drop down list the number of colours in between.

STEP 2: Make the font gradient! Do this by placing the colours evenly throughout the letters.

Now here we have the first part of this font. The code so far is:
NeoHTML: [center][fonts=1f=tahoma]neoHTML[p][/font][fonts=3f=georgiac=#64FEEA][b]Je[
NeoSignature: ][/b][/font][/center]

Now we add the rest of the colours in order. I think you'll understand without me going into more detail, right? You end up with the code of:
NeoHTML: [center][fonts=1f=tahoma]neoHTML[p] [/font][fonts=3f=georgiac=#64FEEA][b]Je[/font][fonts=3f=georgiac=#92B6FE]nn[/font][
NeoSignature: ][fonts=3f=georgiac=#C18DFE]if[/font][fonts=3f=georgiac=#EF64FE]er[/b][/font][/center]
All there is that is special about this code is how often it changes colour to get the gradient effect.

STEP 3: Add alts! If you like them and they fit, have fun!

And you end up with the final code of:
NeoHTML: [center][fonts=1f=tahoma]neoHTML[p][/font][fonts=3f=georgiac=#64FEEA][b]Jε[/font][fonts=3f=georgiac=#92B6FE]nn[/font][
NeoSignature: ][fonts=3f=georgiac=#C18DFE]if[/font][fonts=3f=georgiac=#EF64FE]εr[/b][/font][/center]

Some fonts I have made using gradient style are:

Note on gradient fonts: Try not to make the colour change too obvious, like in the example. If the colours fade somewhat gradually, the font tends to look neater.

Back To Top

Famous Last Words

Did I forget something? Neomail me! Neomail me if you have questions too! :)

Back To Top

Updates

10.11.2010: I probably won't update this much anymore. I'm pretty (read: incredibly) busy, and, well, a guide shouldn't need to be updated much unless new stuff rolls around. I might forget to answer my Neomails, too. Just warning you all!

06.25.2010: Hey, I'm the 2nd most recommended font site at The Little Black Book. Cool, eh?

06.20.2010: Back from a long hiatus. I updated some things to make it more current, and requests are open again. Be patient if you request a font, cause I'm pretty busy this summer. Like, it could take me a few days to log on and get your request.

Customs

Requests are: CLOSED

If you still can't work out my guide, or if you just want me to make you a font, this is the section for you. Just fill out the form and Neomail me this form:

Avatar to Match:
Style (no picture font requests, please!):
Do you have a Neoboard Pen (if you don't know what it is, you probably don't have one):
What should it look like/say (please, try to have some sort of idea, or Jenn gets very confused and anxious):
Anything Else:

Please be as specific as possible! Once you Neomail me the form, I'll Neomail you back to let you know I'm starting. Please be patient, I have a lot on my plate. Once I'm done, I'll send you the code in a Neomail.

Customs Rules

Sorry, but I do have 4 rules for customs.

001. Please refrain from putting your font on a petpage or getting it rated.
002. Edit it all you like, but that still doesn't mean you made it!
003. Only one request per person, two if you have a Neoboard Pen.
004. If anyone asks about it, make sure you tell them where you got it! ;D

Link Back

Affiliates



Neomail me to request being an affiliate! Button must be 88x31.

Listed At





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-2014.
® 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