HomeMottie's Help SiteResourcesSupport Tickets
Sign Up! • Login: Password: New User? Forgot? Support
Top Mods!
Wowhead Search
by sonofsamedi
Admin Forums
Welcome to the GuildPortal Help Community! These forums are for admin-to-admin help.
Available Forums
Forums : Pimp My Site! > Use Custom Fonts on Your Site
1 2 3 4Next
Mottie (MVP) 5/11/2011 1:37 AM EST : Use Custom Fonts on Your Site link
GuildPortal MVP
Mottie
Posts: 3872
Zomgawsh Poster
Custom Fonts YAY!

There are now two methods to use custom fonts on your site.
  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)
The most important step of this process is to find a font that looks good for the size you want to use it. For example, if you want to use a custom font in the Widget Header, you don't want a font that is too large or it'll overpower the widget style. If it ends up too wide, it'll push the text into a second line and possibly break the box borders. Picking a font that doesn't look good when it's small will make it almost unreadable.
So go forth and find a good font. Check out Google's font library. There are quite a few there, but if you can't find the exact one you want or need, go to FontSquirrel and find a font-face kit there that you like. It has a bigger selection.

Google Fonts

So if you search though Google's fonts and find one you like, do the following:
  • 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!

FontSquirrel
  • *NOTE* This method currently doesn't work correctly in Firefox and IE9 due to cross domain issues.
  • 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! 

Edit (7/16/2011): Updated instruction to use the new file area!
>>help-site<<
Top • Bottom

Aaron Lewis (Blue Collar) 5/11/2011 12:45 PM EST : RE: Use Custom Fonts on Your Site link
GuildPortal Dev
Aaron Lewis
Posts: 1978
Zomgawsh Poster
Stickyficated.
Aaron Lewis, GuildPortal.com
Admin Community - FAQ - Videos - Support Tickets
Top • Bottom

nkitch77 (New Admin) 5/14/2011 9:57 AM EST : RE: Use Custom Fonts on Your Site link
nkitch77
Posts: 143
Posts With Wolves
Hi,

I followed your post as best as I can being new to CSS I am having trouble, I am using a FontSquirrel kit and I wish to change the text font in my widget box titles.

so far i have this ......

@font-face {
    font-family: 'DistantGalaxyRegular';
    src: url('http://www.axiomfiles.com/Files/393925/DISTGRG-webfont.eot/DISTGRG-webfont.eot');
    src: url('http://www.axiomfiles.com/Files/393925/DISTGRG-webfont.eot/DISTGRG-webfont.eot?#iefix') format('embedded-opentype'),
         url('http://www.axiomfiles.com/Files/393925/DISTGRG-webfont.woff/DISTGRG-webfont.woff') format('woff'),
         url('http://www.axiomfiles.com/Files/393925/DISTGRG-webfont.ttf/DISTGRG-webfont.ttf') format('truetype'),
         url('http://www.axiomfiles.com/Files/393925/DISTGRG-webfont.svg/DISTGRG-webfont.svg#DistantGalaxyRegular') format('svg');
    font-weight: normal;
    font-style: normal;

}

.ContentBoxTitle ??

But I can't figer out what next, can you point me in the right direction ? I had to rename the font files from DISTGRG_-webfont.eot to DISTGRG-webfont.eot and so on due to GP not letting me upload files with an under score in any more so I edited the rest of the CSS to compensate.
Top • Bottom

Fenris Nihilus (Guild Admin) 5/14/2011 10:28 AM EST : RE: Use Custom Fonts on Your Site link
GP User: Jackel159
Jackel159
Posts: 86
Posts With Wolves
.ContentBoxTitle {
    PADDING-RIGHT: 3px;
    PADDING-LEFT: 3px;
    BACKGROUND-COLOR: #660000;
    COLOR: #FFFFFF;
    FONT-SIZE: 11pt;
    FONT-FAMILY: Comic Sans MS;


Use this format for your custom font in a free form widget on the page of your custom widget headers, but change Comic Sans MS to the name of the custom font and erase or change other variables. If the change is site wide add it to your custom CSS footer I believe.

Try that.

In case you do only change headers on one page with a free form css box make sure to hide it using mottie's script if your unfamiliar with it here it is:  http://www.guildportal.com/Guild.aspx?GuildID=3780&TabID=27537&ForumID=25682&TopicID=8655930
Click Image to Visit Our Eve Corperation: The White Rose Conventicle
Top • Bottom

nkitch77 (New Admin) 5/14/2011 10:54 AM EST : RE: Use Custom Fonts on Your Site link
nkitch77
Posts: 143
Posts With Wolves
I must be doing something wrong that is not working :/ , it is to be a site wide change.
Top • Bottom

Fenris Nihilus (Guild Admin) 5/14/2011 11:04 AM EST : RE: Use Custom Fonts on Your Site link
GP User: Jackel159
Jackel159
Posts: 86
Posts With Wolves
Oh I'm sorry, maybe not footer area then... try Boxes, Left center and right. If not that then choose Custom CSS and use the additions to standards tab. 
Click Image to Visit Our Eve Corperation: The White Rose Conventicle
Top • Bottom

nkitch77 (New Admin) 5/14/2011 11:09 AM EST : RE: Use Custom Fonts on Your Site link
nkitch77
Posts: 143
Posts With Wolves
All the CSS is in the additons to standard I basicly followed the orignal post step by step I just can't seem to get the text font to change to the new one in the CSS, I am very new at CSS so its got to be user error, thanks for your help.
Top • Bottom

Mottie (MVP) 5/14/2011 11:21 AM EST : RE: Use Custom Fonts on Your Site link
GuildPortal MVP
Mottie
Posts: 3872
Zomgawsh Poster
Hi nkitch77!

Actually you have the font name in the URL repeated twice. The css should look like this:
@font-face {
    font-family: 'DistantGalaxyRegular';
    src: url('http://www.axiomfiles.com/Files/393925/DISTGRG-webfont.eot');
    src: url('http://www.axiomfiles.com/Files/393925/DISTGRG-webfont.eot?#iefix') format('embedded-opentype'),
         url('http://www.axiomfiles.com/Files/393925/DISTGRG-webfont.woff') format('woff'),
         url('http://www.axiomfiles.com/Files/393925/DISTGRG-webfont.ttf') format('truetype'),
         url('http://www.axiomfiles.com/Files/393925/DISTGRG-webfont.svg#DistantGalaxyRegular') format('svg');
    font-weight: normal;
    font-style: normal;
}
HOWEVER, I just discovered that the GuildPortal file area won't allow you to access the .woff or .svg files, so I'll have to put in a support ticket. Until then you can try hosting your files on another site like dropbox.com until it does allow access (hopefully soon). So the with what you see now, the font won't show up in Firefox or iPhone/iPad.
>>help-site<<
Top • Bottom

Fenris Nihilus (Guild Admin) 5/14/2011 11:22 AM EST : RE: Use Custom Fonts on Your Site link
GP User: Jackel159
Jackel159
Posts: 86
Posts With Wolves
I have not loaded external fonts with CSS too successfully in the past myself. I only managed to half succeed at what I was doing before with that so I haven't tried this method. I plan to though later today so I'll see if I can figure out whats going on then. In the mean time try using that code to make the font one thats already built into guildportal, then if it works obviously something is wrong with the code that loads the external fonts!

Edit: Opps looks like Mottie beat me to it. As I suspected it was the font code after all!
Click Image to Visit Our Eve Corperation: The White Rose Conventicle
Top • Bottom

Fenris Nihilus (Guild Admin) 5/14/2011 11:28 AM EST : RE: Use Custom Fonts on Your Site link
GP User: Jackel159
Jackel159
Posts: 86
Posts With Wolves
Mottie said:


HOWEVER, I just discovered that the GuildPortal file area won't allow you to access the .woff or .svg files, so I'll have to put in a support ticket. Until then you can try hosting your files on another site like dropbox.com until it does allow access (hopefully soon). So the with what you see now, the font won't show up in Firefox or iPhone/iPad.


You know I've used this css before to load fonts successfully for IE as well
@font-face
{
    font-family: my_font;
}
 
p
{
    font-family: my_font; 
}

But when I tried this method "supposedly supports both IE and Firefox/Chrome" It never turned out correct. Yet its suggested everywhere I google.

@font-face
{
    font-family: my_font;
    src: url('my_font.eot');
    src: local(my_font), url('my_font.ttf') format('opentype');
}
 
p
{
    font-family: my_font;
}

Whats your take on this mottie?

Edit: Actually reading now IE supports CSS3 now so it will read the "local" keyword and should load ttf's. The idea of this above method was IE would skip local because it doesn't recognize the command with no CSS3 support and would use the .eot while in firefox the second command would override the first command and firefox would thus load the .ttf ... guess this is no longer the case.
Click Image to Visit Our Eve Corperation: The White Rose Conventicle
Top • Bottom

1 2 3 4Next
Admins Online
There are   members online.
GuildPortal Home • Frequently Asked Questions • Videos • Recent Updates • Support • Terms of Use • Privacy Policy
GuildPortal™ Axiom Shift, LLC.  All Rights Reserved. All game-related trademarks are properties of their respective owners. Several adorable monkeys were harmed during the creation of this site, and for that, we are wholly unapologetic.
So-and-so has logged on!
%title%
%message%