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

[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?

 

[Lakituthequick]

If you can edit the bare CSS of your forum, read this page, might help.

 

[Fawfulthegreat64]

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?

 

[User4042]

On the style picker, click edit css.

 

[Fawfulthegreat64]

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.

 

[User4042]

CTRL+F
Type in font?

 

[Fawfulthegreat64]

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.

 

[User4042]

"hey gorgeous", I assume, if this works

 

[Fawfulthegreat64]

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)

 

[User4042]

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

 

[Fawfulthegreat64]

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.

 

[Lakituthequick]

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:

@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:

@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:

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).

 

[Fawfulthegreat64]

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.

 

[User4042]

Upload it to dropbox or something

 

[Lakituthequick]

You could upload it to Dropbox, yes. Unpack and upload the EOT, SVG, TTF and WOFF files.

After that, copy the code in stylesheet.css to your own, and replace the links to the correct Dropbox ones. Then use "hey_gorgeousregular" as font-family in the body.

 

[Fawfulthegreat64]

Is this correct?

@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 */
}

 

[Lakituthequick]

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.

 

[Fawfulthegreat64]

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?

@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 */
}

 

[User4042]

I think they need to have the same url minus the extension

 

[Lakituthequick]

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?

@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.

 

[Fawfulthegreat64]

There's red text. Is that bad?

 

[User4042]

No that's just saying it's identified what it means

 

[Lakituthequick]

Red colored text means it's a string. Everything between quote-signs is a string.

However you need to remove the "<...>".

 

[Fawfulthegreat64]

I got the preview to display the correct font, but it looks like this:

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

 

[User4042]

You may have messed up the pixel spacing