I'd like to install a special font to my forum

Paper Mario

SPM Trash
Forum Moderator
Pronouns
She/They
MarioWiki
Fawfulthegreat64
I want one of the themes of my forum to use the "Hey Gorgeous" font, which is what is used in the Paper Mario games, but how do I do this so that anyone accessing the forum can see it without downloading the font? I am using ProBoards by the way. I have heard you can use Google Fonts but that one doesn't seem to be available there. Any suggestions?
 
I'm confused. What in that code do I edit and where does it go in the CSS of my forum? Do I need to upload the font file somewhere?
 
Super Smash Misty said:
On the style picker, click edit css.
I know how to do that part, I just don't know how to modify the code given in that link so that the forum uses a certain font.
 
I don't know how to edit CSS. The stuff confuses me, I need to know exactly what to type and where to type/paste it.
 
That works, but only because I have the font installed on my computer. I want it to work for people who do not have the font installed (ie most people)
 
Dreamy Fawful said:
That works, but only because I have the font installed on my computer. I want it to work for people who do not have the font installed (ie most people)
Tell them to download it if they don't want times new roman
 
Super Smash Misty said:
Dreamy Fawful said:
That works, but only because I have the font installed on my computer. I want it to work for people who do not have the font installed (ie most people)
Tell them to download it if they don't want times new roman
...

The whole point of this thread is to find out how to host the font on the web so that I don't have to tell my members to download shit just for my site to display properly.
 
Super Smash Misty said:
Tell them to download it if they don't want times new roman
Wow, great answer, 10/10. *cough*



I am in this example assuming Hey Gorgeous is uploaded in at example.com.

At the top of the CSS file, you put this:
Code:
@font-face {
  font-family: 'HeyGorgeous';
  src: url('http://www.example.com/heygorgeous.eot'); /* IE9 Compat Modes */
  src: url('http://www.example.com/heygorgeous.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('http://www.example.com/heygorgeous.woff') format('woff'), /* Modern Browsers */
       url('http://www.example.com/heygorgeous.ttf')  format('truetype'), /* Safari, Android, iOS */
       url('http://www.example.com/heygorgeous.svg#svgFontName') format('svg'); /* Legacy iOS */
}
...leaving away any of the entries that aren't present somewhere.

Preferred however is using a WOFF font file. Then the following code goes:
Code:
@font-face {
  font-family: 'HeyGorgeous';
  src: url('http://www.example.com/heygorgeous.woff') format('woff'), /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
       url('http://www.example.com/heygorgeous.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5, Opera 10+, Safari 3—5 */
}
However, a combination with WOFF at the top gives most compatibility.

The final thing to do is setting the font-family used down in the CSS file:
Code:
body {
  font-family: 'HeyGorgeous', <...>, sans-serif;
}
On your forum, this is located in the second line (without above code, with above code it will be a bit lower).
 
Where do I upload the font to? Is there a specific hosting website service? Also I generated this file from Font Squirrel: https://www.mediafire.com/?phxcljd66gpbx6e I have no idea what to do with it.
 
Is this correct?
Code:
@font-face {
  font-family: 'HeyGorgeous';
  src: url('https://dl.dropboxusercontent.com/s/lbq9jveeu1gf65o/hey-gorgeous-webfont.woff') format('woff'), /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
       url('https://www.dropbox.com/s/47bklsrn4x0cm8p/hey-gorgeous-webfont.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5, Opera 10+, Safari 3—5 */
}
 
Lakituilveloce said:
Partly. The WOFF part is in order, but the TTF part fails. Upload the TTF the exact same way and on the exact same place as the WOFF, then use the same URL with the extension changed.
I dragged all the files to the same place. But when I try to change the extension on the WOFF file, it says Not Found.

Edit: Is this correct?
Code:
@font-face {
  font-family: 'HeyGorgeous';
  src: url('https://dl.dropboxusercontent.com/s/lbq9jveeu1gf65o/hey-gorgeous-webfont.woff') format('woff'), /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
       url('https://dl.dropboxusercontent.com/s/47bklsrn4x0cm8p/hey-gorgeous-webfont.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5, Opera 10+, Safari 3—5 */
}
 
Dreamy Fawful said:
Lakituilveloce said:
Partly. The WOFF part is in order, but the TTF part fails. Upload the TTF the exact same way and on the exact same place as the WOFF, then use the same URL with the extension changed.
I dragged all the files to the same place. But when I try to change the extension on the WOFF file, it says Not Found.

Edit: Is this correct?
Code:
@font-face {
  font-family: 'HeyGorgeous';
  src: url('https://dl.dropboxusercontent.com/s/lbq9jveeu1gf65o/hey-gorgeous-webfont.woff') format('woff'), /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
       url('https://dl.dropboxusercontent.com/s/47bklsrn4x0cm8p/hey-gorgeous-webfont.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5, Opera 10+, Safari 3—5 */
}
That one works.
 
I got the preview to display the correct font, but it looks like this:
tPWG7q7.png


Each section is supposed to be the height of the Mario head.
 
Back