Sign Up! Login: Password: New User? Forgot? Support
Code 
 
 
Forums 
Forums : Theme > Use Custom Fonts on Your Site
Mottie (SuperAdmin) 5/11/2011 1:32 AM EST : Use Custom Fonts on Your Site
ACK!
Mottie
Posts: 3883

0
Like

0
Dislike

Custom Fonts YAY!

GuildPortal admin site link to original post

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) - looking for a method to get around this now.
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
  • 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!
Characters: Mottie Motty Mortie Ooshiny Mot Fudgems
TopBottom

Dethmaul (Member) 12/8/2011 10:48 AM EST : RE: Use Custom Fonts on Your Site
Dethmaul
Posts: 987

0
Like

0
Dislike

Tired of me yet?

So, I tried the FontSquirrel approach to no success.... I think....

Can you break this down a bit better?

Footer:
<link rel="stylesheet" href="/GuildFiles/fonts.css" type="text/css" charset="utf-8" />

Custom CSS:
@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;
}

Not sure if this was needed...
.ContentBoxTitle { font-family: 'StarVaderRegular', arial, serif; }


Files uploaded:
font-starvader-webfont.eot
font-starvader-webfont.svg
font-starvader-webfont.woff
font-starvader_webfont.ttf
font.css
TopBottom

Mottie (SuperAdmin) 12/8/2011 11:51 AM EST : RE: Use Custom Fonts on Your Site
ACK!
Mottie
Posts: 3883

0
Like

0
Dislike

Hi Dethmaul!

It looks like the fonts.css file url is wrong... I'm guessing it should be "/GuildFiles/434000/fonts.css"

Also, it isn't really necessary to add a separate font file, you could just add that css below to your custom css (Control Panel > Custom HTML & script > Custom CSS > CSS Additions to Standard)
Characters: Mottie Motty Mortie Ooshiny Mot Fudgems
TopBottom

Dethmaul (Member) 12/8/2011 1:44 PM EST : RE: Use Custom Fonts on Your Site
Dethmaul
Posts: 987

0
Like

0
Dislike

I don't seem to be able to make this work, might be more effort than it is worth.

Wish there was a way in GP to add fonts.
TopBottom

Mottie (SuperAdmin) 12/8/2011 4:20 PM EST : RE: Use Custom Fonts on Your Site
ACK!
Mottie
Posts: 3883

0
Like

0
Dislike

It looks like all you are missing are the @font-face definitions in the custom css now... All I see is the first line below, it needs ALL of the css below
.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;
}

Characters: Mottie Motty Mortie Ooshiny Mot Fudgems
TopBottom

Dethmaul (Member) 12/8/2011 4:49 PM EST : RE: Use Custom Fonts on Your Site
Dethmaul
Posts: 987

0
Like

0
Dislike

No dice... it isn't that big of a deal. It would help tweak the site, but I can live without oit.

I would much rather see that SWTOR Recruitment widget
TopBottom

Mottie (SuperAdmin) 12/9/2011 5:46 AM EST : RE: Use Custom Fonts on Your Site
ACK!
Mottie
Posts: 3883

0
Like

0
Dislike

LOL DUH, I see the problem... the title isn't "ContentBoxTitle", it's "ContentBoxTitleNoBackground"

So try this instead (CAPS matter!!)
.ContentBoxTitle, .ContentBoxTitleNoBackground { font-family: 'StarVaderRegular', arial, serif; }
I included both, just in case
Characters: Mottie Motty Mortie Ooshiny Mot Fudgems
TopBottom

Dethmaul (Member) 12/9/2011 11:42 AM EST : RE: Use Custom Fonts on Your Site
Dethmaul
Posts: 987

0
Like

0
Dislike

Ok, so I gave up on FontSquirrel.

I used one from Google and what do you know, INSTANT success.

No my question is, do I have to define ALL widgets, or is there an css identifier that will replace all text on the site.

It did a good job on MOST widgets, but the forums and some others didn't get replaced. I am trying to go through and define them maunally, but I must missing the correct identifiers.
TopBottom

Dethmaul (Member) 12/11/2011 1:44 AM EST : RE: Use Custom Fonts on Your Site
Dethmaul
Posts: 987

0
Like

0
Dislike

Dethmaul said:

Now my question is, do I have to define ALL widgets, or is there an css identifier that will replace all text on the site.



/bump
TopBottom

Mottie (SuperAdmin) 12/11/2011 7:20 AM EST : RE: Use Custom Fonts on Your Site
ACK!
Mottie
Posts: 3883

0
Like

0
Dislike

Hey Dethmaul!

Umm, I'm not sure what you mean..
  • ALL the text on the site? ...add the font to the "body {}"
  • or only the text inside of widgets? ...add the font to ".gpWidget * {}" (yes, that is an asterisk)
  • or something else? ...add whatever class name ".ilikebacon {}" or id "#mmmpizza {}" with the font definition.
And I remember the problem with the font squirrel method.. Firefox and IE9, I guess I crossed out the note in the original post too soon, needs the font to be in the same domain, or maybe in the root directory before the font will work. I'll double check on this and update this thread.

Update: So I got it working in Firefox, didn't bother checking IE9 yet (hate all IE!! grrrr), and it seems to be working with the font in the guild files directory - check out test site 4!
I had a font set up on Test site 4 before, but I was still using the older @font-face syntax and the files were still being loaded from the axiomfiles site, but now it's all updated and working! Anyway, this is all the css I needed (added to css additions to standard):
@font-face {
  font-family: 'DistantGalaxyRegular';
  src: url('/GuildFiles/278466/DISTGRG-webfont.eot?#iefix') format('embedded-opentype'),
       url('/GuildFiles/278466/DISTGRG-webfont.woff') format('woff'),
       url('/GuildFiles/278466/DISTGRG-webfont.ttf')  format('truetype'),
       url('/GuildFiles/278466/DISTGRG-webfont.svg#DistantGalaxyRegular') format('svg');
  font-weight: normal;
  font-style: normal;
  font-variant:normal;
}
.ContentBoxTitle { font: 18px/27px 'DistantGalaxyRegular', Arial, sans-serif; color: #fff; }
Characters: Mottie Motty Mortie Ooshiny Mot Fudgems
TopBottom

 
 
Key 
New posts No new posts
New posts ( popular ) No new posts ( popular )
New posts ( sticky ) No new posts ( sticky )
New posts ( locked ) No new posts ( locked )
 
 
Who's Online 
There are   members online.
 
 
So-and-so has logged on!
%title%
%message%