1. The simplest would be to use Google's font library. It provides a simple to use method to add fonts and I'll walk you all through it step-by-step.
2. The second method is slightly more complicated, but should allow you to add just about any custom font that you can't find in Google's font library. *NOTE* This method won't work for Firefox or IE9 since the font needs to be on the same domain as the web page (it needs to be on guildportal.com and not axiomfiles.com) - looking for a method to get around this now.

• Lets say you want to use "MedievalSharp". Click on the name.
  
  
  
  
• You'll start out on the "Specimen" tab which shows what the font looks like at different sizes.
  
  
1. From here you can choose to see what it looks like to type in that font, by clicking on [ Launch in font previewer ].
2. Check out the full "Character Set" for any special font characters you might need.
3. When you're done checking out the font and you're ready to use it, click on the "Use this font" tab.
4. The code in block (4) is the code you want to add to your Footer HTML (Control Panel > Custom HTML & Script > Footer HTML).
   

   <link href='http://fonts.googleapis.com/css?family=MedievalSharp' rel='stylesheet' type='text/css'>

5. The code in block (5) is just an example of how to use this code for a specific font tag.
   
   
• You probably don't want to target the "h1" tag, so lets say I want to replace the widget titles, use the following code and add it to your custom css (Control Panel > Custom HTML & Script > Custom CSS > CSS Additions to Standard):
  

  .ContentBoxTitle { font-family: 'MedievalSharp', arial, serif; }

  The additional font names of arial and serif are just fall back font families in case the browser can't load in the font.
  
  
• Now, lets say you want to add a paragraph inside your Welcome box with this fancy font, just add the following to your custom css (Control Panel > Custom HTML & Script > Custom CSS > CSS Additions to Standard):
  

  p.medieval { font-family: 'MedievalSharp', arial, serif; }

  then inside the Welcome box, while in [<> HTML ] mode, add this on a separate line:
  

  <p class="medieval">Hello</p>

  Switch back to [ Design ] mode then replace the "Hello" text with whatever you want. The reason the class name "medieval" is in all lower case is because older versions of IE do not allow mixed case class names (if I remember correctly).
• Of course you can specify a font size, but you may not be able to render the font as bold or italics unless you specify that font inside the <link> by adding a colon, followed by the style (:i = italics, :b = bold, :bi = bold italics, ref).
  

  <link href='http://fonts.googleapis.com/css?family=MedievalSharp:b' rel='stylesheet' type='text/css'>

• That's pretty much it!

• In this example, I chose the "Arch Rival" font
  
•  If you click on "View Font" you'll go to the "Specimens" screen which is just like the Google one and it shows the font at different sizes. "Test Drive" allows you to type in that font, "Character Map" shows the entire font and any special characters included. And the last tab "@font-face kit" gives you a choice of font formats. Just keep all four types and click on the [ Download @font-face kit ] or just click on the "Get Kit" link seen in the screen shot above.
  
  
  
  
• The kit will download to your computer as a zip file and may include a LOT of fonts. In the example above, there are 35 files of which 32 are font files. There are a lot because it includes a regular font, bold font, bold-italic, extended regular font, extended bold and extended bold-italic. And each one of those has four file types. So you can see it's getting complicated. But not really. Honestly if you don't want to get too fancy, just keep the 4 regular font files which are named: "SF_Arch_Rival-webfont.eot", "SF_Arch_Rival-webfont.svg", "SF_Arch_Rival-webfont.ttf" and "SF_Arch_Rival-webfont.woff". Each type works in a different browser.
  
  TTF = Most browsers except IE and iPhone
  EOT = IE only
  WOFF = new standard, used mostly by Firefox
  SVG = iPhone/iPad font
  
  
• Now, you'll need to upload these files (just the four if you want) to your file area. These files aren't any larger than a medium sized image, so don't worry about running out of space. *NOTE* There is file name restriction currently that doesn't allow underscores "_" in the name, so just change them into dashes "-". I've also renamed my files to start with "font-" so I can find them in my folder easier.
  
  
• Save the URL to each file.
  
  
• Now in the zip file are two other files "demo.html" and "stylesheet.css". These files show you examples of how to add the font. So starting with the "stylesheet.css" file, we'll see something like this:
  

  @font-face {
      font-family: 'SFArchRivalRegular';
      src: url('SF_Arch_Rival-webfont.eot');
      src: url('SF_Arch_Rival-webfont.eot?#iefix') format('embedded-opentype'),
           url('SF_Arch_Rival-webfont.woff') format('woff'),
           url('SF_Arch_Rival-webfont.ttf') format('truetype'),
           url('SF_Arch_Rival-webfont.svg#SFArchRivalRegular') format('svg');
      font-weight: normal;
      font-style: normal;
  }
  

  This css needs to be added to your custom css (Control Panel > Custom HTML & Script > Custom CSS > CSS Additions to Standard). BUT now you need to add the full URL to each file... in orange below. Also change the underscore "_" into a dash "-" (current file name restriction), and I added "font-" in front so I can find it easier in my file area:
  

  @font-face {
      font-family: 'SFArchRivalRegular';
      src: url('/GuildFiles/258012/font-SF-Arch-Rival-webfont.eot');
      src: url('/GuildFiles/258012/font-SF-Arch-Rival-webfont.eot?#iefix') format('embedded-opentype'),
           url('/GuildFiles/258012/font-SF-Arch-Rival-webfont.woff') format('woff'),
           url('/GuildFiles/258012/font-SF-Arch-Rival-webfont.ttf') format('truetype'),
           url('/GuildFiles/258012/font-SF-Arch-Rival-webfont.svg#SFArchRivalRegular') format('svg');
      font-weight: normal;
      font-style: normal;
  }
  

  I only included the regular font style (the four files I mentioned before) so if you want to use them all, you'll need to modify all 8 blocks of css (only one is shown above).
  
  
• In the "demo.html" file are a few examples on how to set the style, for example:
  

  h1.fontface { font: 60px/68px 'SFArchRivalRegular', Arial, sans-serif; letter-spacing: 0; }

  Now here you see a font size included, but it shows up as 60px/68px. What this means is make the font 60px in size, and make the line height 68px tall. Basically how much spacing to add when the text wraps to the next line. Notice how the font name 'SFArchRivalRegular' matches the css above (in green). This css should also be added to the custom css area (Control Panel > Custom HTML & Script > Custom CSS > CSS Additions to Standard)
  
  and the corresponding HTML looks like this:
  

  <h1 class="fontface">FONT-FACE DEMO FOR THE ARCH RIVAL FONT</h1>

• Try messing around with the demo.html file... experiment a little! It's fun! 

.ContentBoxTitle { font-family: 'StarVaderRegular', arial, serif; }

@font-face {
    font-family: 'StarVaderRegular';
    src: url('/GuildFiles/434000/font-starvader-webfont.eot');
    src: url('/GuildFiles/434000/font-starvader-webfont.eot?#iefix') format('embedded-opentype'),
         url('/GuildFiles/434000/font-starvader-webfont.woff') format('woff'),
         url('/GuildFiles/434000/font-starvader-webfont.ttf') format('truetype'),
         url('/GuildFiles/434000/font-starvader-webfont.svg#StarVaderRegular') format('svg');
    font-weight: normal;
    font-style: normal;
}

.ContentBoxTitle, .ContentBoxTitleNoBackground { font-family: 'StarVaderRegular', arial, serif; }