has? Or did you try to make your own font, only to have it turn out looking like a piece of dung? Well, this page can help! Learn how to make your own font, to your specifications. On this page I’ll show you the basics of font making, the lingo to use, walk you through making a font, and let you in on some secret techniques. Now no one in Neopia has an excuse to have an ordinary font! What are you waiting for? Let’s get started!

---

 

– Quick Links –
Introduction • Glossary of Terms • NeoHTML Tags • NeoHTML Fonts • Chat Smilies and Emoticons • Hex Code Chart • Step by Step Guide • Getting Rid of that Siggy Line/Adding Your Own • Making Text Invisible • Making Rainbow Fonts • Hiding Your Active Pet’s Picture • NeoBoard Pens • Getting Custom Colours Using Photoshop • Example Font w/ Explanations • Link to Us

---

– Glossary of Terms –

Term	Definition
Avatar	Image to the left hand side of where you post on the NeoBoards
Chat Smile	Small image that can be used in a post; most are a different emotion
Font	A certain look of writing on a computer; the look of a text
Hex Code	A series of numbers and letters representing a certain colour
NeoHTML	Neopets special type of HTML used for the NeoBoards
NeoTitle	The short phrase under your username on the NeoBoards
Siggy	Any material following your message on the NeoBoards [The Neopets’ staff does not support this term, they instead refer to it as a “signature”]
Siggy Line	Line between your message and your signature on the NeoBoards
Siggy Pet	Image formed by different characters, usually located in someone’s siggy
Siggys	Plural form of any material following your message on the NeoBoards (notice it is not ‘ies’)
Tags	Usually a pair of 2 commands (enclosed in brackets in the case of NeoHTML) in which the text in between is affected by the type of command the tag uses

---

– NeoHTML Tags –

NeoHTML Tag Start	NeoHTML Tag End	NeoHTML Tag Use
[b]	[/b]	Makes font inside tags bold
[br]		Creates a line break
[center]	[/center]	Makes font inside the tags centered
[font]	[/font]	Base code for any font change
[i]	[/i]	Makes font inside the tags italicized
[p]		Creates two line breaks
[sub]	[/sub]	Makes font inside the tags into subtext
[sup]	[/sup]	Makes font inside the tags into superscript
[u]	[/u]	Makes font inside the tags underlined

Font Extension	Extension Use
c={Colour Name or ‘# + Hex Code}	Changes colour of text
s={Size}	Changes size of text
f={font name}	Changes font of text

---

– NeoHTML Fonts –

Font Name	Font
Arial	NeoHTML
Castellar	NeoHTML
Fantasy	NeoHTML
Georgia	NeoHTML
Harrington	NeoHTML
Impact	NeoHTML
Jokerman	NeoHTML
Mistral	NeoHTML
Onyx	NeoHTML
Papyrus	NeoHTML
Patrick	NeoHTML
Rockwell	NeoHTML
Sydnie	NeoHTML
Stencil	NeoHTML
Storybook	NeoHTML
Sylfaen	NeoHTML
Symbol	NeoHTML
Tahoma	NeoHTML
Verdana	NeoHTML

Note that some fonts may not display on certain computers. This is because there isn’t really a ‘standard’ set of fonts. Just something to be aware of.

---

– Chat Smilies and Emoticons –

Chat Smile Image	Chat Smile Code
	*dung*
	*catfish*
♥	&hearts
♦	&diams
♣	&clubs
♠	&spades

---

– Hex Code Chart –



Note: In order to use hex codes in your font you must add ‘# before the code or else the colour will not work.

---

– Step by Step Guide –

Step 1: Choose Your Avatar and ColoursGo to your Chat Preferences and choose an avatar from the drop down list, if you need help finding avatars try avatar.starried.net. You’ll probably notice each avatar is made up of several colours. NeoHTML allows you to change the colour of your font two ways: the English name of your font (Red, Blue, Darkblue) and the Hex Code of the colour. A Hex Code is just a 6-digit representation of a certain colour. To find what colours go with your avatar, you can check out our fancy-dancy Hex Chart or try a site like avatar.starried.net that supplies the Hex Codes for you. Remember, every Hex Code needs to be preceded by a ‘# for it to work, though English names of colours do not.

Step 2: Basic Font ToolsWhen I was revising this guide after seeing where people have the most problems, I decided to add a short tutorial about tags into this guide. Think about tags as bookends: if there isn’t a bookend on both sides, the books fall. For instance [tag]TEXT will not affect the TEXT unless a closing tag is added like this: [tag]TEXT[/tag]. This will not affect your font: [tag][/tag]TEXT. You can add as many tags as you want to one block of text, like this: [tag1][tag2]TEXT1,2[/tag1]TEXT2[/tag2]. If you want to know what tags you can use in NeoHTML, try our List of NeoHTML Tags.

Step 3: Inserting SymbolsIn order to create a good font, you’ll need some symbols. No, not those mole petpets that live in that one hole in Meridell. I’m talking about these things: ◙☼░∆╩╞₪☺♫. You may be wondering how to insert these characters, since they don’t correspond to a key on your keyboard. A lot of the more useless font help sites give you some complicated alt code list. Well, that’s way too complicated, bothersome, and totally uncouth. The easiest way to add symbols is to open up a Microsoft Word file, click on INSERT, then on SYMBOL. Just insert them into the text of the file and copy paste them into your font code. Done. Easy, eh?

Step 4A: Creating PretextNeopets makes it pretty obvious of how to put text after your message (Siggy), but how about before your message? Just construct your pretext, and then use [br]’s or [p]’s to create space between this text and your post, if that’s the look you’re going for.

Step 4B: Creating BordersAn extension of using pretext partnered with your siggy is a border. To create a border, using some symbols we learned how to insert from Step 3. For this border here’s our code:

[center]╔═○═○═○═╗[br]NEOHTML[br]╚═○═○═○═╝[/center] ╔═○═○═○═╗ NeoHTML ╚═○═○═○═╝

Step 5: Message FontThis is pretty straight forward, just decide what you want your message to look like and build from there. Keep in mind the ‘NeoHTML’ in your font code will be your message. Use my handy-dandy NeoHTML Tag list. Another thing to remember is that this: [center][/center]NeoHTML won’t do anything to your message. You want something like this for it to work: [center]NeoHTML[/center]

Step 6: SiggyMaking a siggy is pretty much a combination of the tools we’ve learned in the previous steps: you’ll be mixing colours, fonts, symbols and font codes to make your siggy. For the most part it’s a lot like making your Message Font (see previous step) but with more control over the individual parts of your message. Want to get rid of that siggy line? Check out our guide!

Step 7: Compacting Your FontOccasionally your code will exceed the limits set by Neopets for your font and siggy (120 characters each) and you’ll need to remove things from your code. First off, check to make sure you aren’t putting spaces between tags like this: [tag] [tag]. Also check if you really need to use a hex code if just using the English name would take less space. In your font tags, you don’t need spaces, for instance this: [font c=#123456 s=3] can look like this: [fontc=#123456s=3]. Also see that you are only changing font faces where you really need to.

Now just verify and your off to font awesomeness!

---

– Getting Rid of that Siggy Line/Adding Your Own –

To get rid of the siggy line, put a ‘ [ ‘ at the end of your font code, and a ‘ ] ‘ at the start of your siggy code.

To make your own siggy line, follow this template for your siggy/font code:

Font Code: PUT YOUR FONT CODE HERE [br][br]PUT YOUR SIGGY LINE HERE[ Siggy Code: ]PUT YOUR SIGGY HERE

---

– Making Text Invisible –

Making fonts invisible should only be used for siggy’s or other, non-font applications. Using them to hide your text is a warnable offense! That said…

Neopets has blocked the code “#FFFFFF” and “White” for NeoHTML. What does this mean to you? It means you’ll have to do some ninja-style sneaking to make text invisible. My favorite variety of sneaking? “#FFFFFE”

So here’s an example of what an invisible text code would look like:

[fontc=#FFFFFE]this text would be invisible[/font]

Here’s one of the most common applications of invisible font codes:

→ Highlight → [fontc=#FFFFFE]this text would be invisible[/font]

---

– Making Rainbow Fonts –

Ever seen people flip out over people’s fonts that change colour?

Well, for this one, you won’t need to do anything to your font code, rather, you’ll be posting NeoHTML into your post, with your message broken up into different [font] codes, like this:

[fontc=#0000FF]Be[/font][fontc=#0000EE]ho[/font][fontc=#0000DD]ld[/font] [fontc=#0000CC]th[/font][fontc=#0000BB]e m[/font][fontc=#0000FF]ag[/font][fontc=#000099]ic[/font][fontc=#000088]al[/font] [fontc=#000077]fo[/font][fontc=#000066]nt[/font][fontc=#000055] of[/font][fontc=#000044] bl[/font][fontc=#000033]ue[/font] [fontc=#000022]fla[/font][fontc=#000011]me[/font]

---

– Hiding Your Active Pet’s Picture –

Ever since Neopets added a picture of your active pet to the space below your avatar, I’ve gotten a lot of requests from people wanting to get rid of this image from their posts–so here’s my guide:

First off, head to the Quick Ref page. Now right click on one of your inactive pet’s picture, and select “copy shortcut” or “copy link location.” Paste this into your browser’s URL bar. At the end of this URL should be your pets name, simply change any of the letters of the name from upper to lowercase.

Or you could put your Pet’s name in all lowercase into the following link:

http://www.neopets.com/process_changepet.phtml?new_active_pet=[your pets name]

---

– NeoBoard Pens –

These items, found in the Neopets Mall, give you extra room in your font code, signature code, and board posts along with giving you one saved set of board preferences (ie font code, avatar, signature code).

So, whipping out my abacus, that makes for 30 more characters in your signature and main font codes (a total of 150) and 100 more characters in your post (500 total). The Green NeoBoard Pen costs 300 NC or about $3 (USD). NeoBoard Pens never expire and you can have multiple pens in effect at the same time (so you can have several saved preferences with the increased input size, sadly you can’t have 10000 character posts…yet). Below are representations of how much room that would really mean:

Code Increase Example: [fontc=#123456s=3]w00t?[/font]

Post Increase Example: so lyk, i waz onlin yestersday and i sah sum1 wid da bonju averter!111! lyk dosnt dat ruk. lol rofls

---

– Getting Custom Colours Using Photoshop –

Ever wanted to match the colours of a certain avatar or your active pet’s picture? Here’s a guide to find the hex code for any colour using Adobe Photoshop.

Step 1: Right-click the image which contains the colour you want to match and copy the picture to your clipboard. You may also screenshot the page.


Step 2: Paste the image (or screenshot) into Adobe Photoshop. Click the colour palette (the two colour-swatch squares). With this new window open, click on the area of the image you want to lift the colours from.


Step 3: You should see a small area of the window that looks something like the one pictured above containing a 6-digit code of numbers and letters. This is the hex-code equivalent of the colour you want! (Note: if you’re having trouble with the colour, try selecting “use only web colours.”)

---

– Example Font w/ Explanations –



Finished Font: