The forum of the forums
Welcome to the Official Support Forum of Forumotion!

To take full advantage of everything offered by our forum, please log in if you are already a member, or join our community if you've not yet.



Create a free forum like this one.

Custom font on the forum

View previous topic View next topic Go down

Solved Custom font on the forum

Post by Klemen on March 27th 2014, 9:12 pm

I have searched trough forumotion on how to add a custom font to your forum and there were always 3 possible answers:
a) its not possible, unless the user has the font installed
b) using the @font-face function
c) using javascript

Now, I would really like to install a specific font, so that it would go well with the rest of the forum look (http://www.gr33nchip.com/forum). I tried using the font face function, but it didnt seem to work and I have been told that this function only works with google fonts. Is that true?

Any idea on how to install the font?


Last edited by Klemen on March 28th 2014, 6:25 pm; edited 1 time in total

Klemen
Forumember

Male Posts : 292
Reputation : 32
Language : English, German, Slovene

http://www.bannedbrotherhood.com

Back to top Go down

Solved Re: Custom font on the forum

Post by Ange Tuteur on March 28th 2014, 8:41 am

Hello Klemen,

You can use google fonts to choose a font you want to use.
https://www.google.com/fonts

ex :
Add the following to a stylesheet
Code:
@font-face {
  font-family: 'Ceviche One';
  font-style: normal;
  font-weight: 400;
  src: local('Ceviche One'), local('CevicheOne-Regular'), url(http://themes.googleusercontent.com/static/fonts/cevicheone/v4/BQRygZwg3wyGCQXvKfUbSYbN6UDyHWBl620a-IRfuBk.woff) format('woff');
}

Then use it on an element :
Code:
* { font-family:'Ceviche One'; }

Ange Tuteur
Forumaster

Male Posts : 13028
Reputation : 2704
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: Custom font on the forum

Post by Pizza Boi on March 28th 2014, 9:05 am

@Ange Tuteur wrote:Hello Klemen,

You can use google fonts to choose a font you want to use.
https://www.google.com/fonts

ex :
Add the following to a stylesheet
Code:
@font-face {
  font-family: 'Ceviche One';
  font-style: normal;
  font-weight: 400;
  src: local('Ceviche One'), local('CevicheOne-Regular'), url(http://themes.googleusercontent.com/static/fonts/cevicheone/v4/BQRygZwg3wyGCQXvKfUbSYbN6UDyHWBl620a-IRfuBk.woff) format('woff');
}

Then use it on an element :
Code:
* { font-family:'Ceviche One'; }

Hi Very Happy

Ange, can you teach me how to use the Sofadi Font? I don't understand the whole thing with themes .-.

Regards,
Pizza Boi

Pizza Boi
Hyperactive

Male Posts : 2016
Reputation : 160
Language : French
Location : Pizza Hut!

http://redlustempire.forumtl.com/

Back to top Go down

Solved Re: Custom font on the forum

Post by Ange Tuteur on March 28th 2014, 9:19 am

Click 'quick-use'


Choose you character set, then scroll down, copy the stylesheet URL, and paste it in your address bar.


Copy the CSS and add it to your stylesheet.


Make sure it is at the top of the sheet. If it is you can use it in rules after.

ex :
Code:
element, .class, #id { font-family:myCustomFont; }

Ange Tuteur
Forumaster

Male Posts : 13028
Reputation : 2704
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: Custom font on the forum

Post by Pizza Boi on March 28th 2014, 9:30 am

Hi Very Happy

Yay, thanks Ange! Love you for this mang <3 (No homo, no offense too)

Regards,
Pizza Boi

Pizza Boi
Hyperactive

Male Posts : 2016
Reputation : 160
Language : French
Location : Pizza Hut!

http://redlustempire.forumtl.com/

Back to top Go down

Solved Re: Custom font on the forum

Post by Neptune- on March 28th 2014, 9:58 am

Hello Pizza Boi ^^


Full tutorial from french support board
Utiliser des polices personnalisées avec Google Web Fonts

Neptune-
Forumember

Male Posts : 187
Reputation : 21
Language : French (10), English (8), CSS (5), HTML (4), Javascript (1)
Location : France

http://www.planet-series.com/

Back to top Go down

Solved Re: Custom font on the forum

Post by Pizza Boi on March 28th 2014, 10:02 am

@Neptune- wrote:Hello Pizza Boi ^^


Full tutorial from french support board
Utiliser des polices personnalisées avec Google Web Fonts

Hi Very Happy

I'd speak in French but we were told not to, sooooooo........................................................

The pizza is free, feel free to dig in!

Thankies <3!

Regards,
Pizza Boi

Pizza Boi
Hyperactive

Male Posts : 2016
Reputation : 160
Language : French
Location : Pizza Hut!

http://redlustempire.forumtl.com/

Back to top Go down

Solved Re: Custom font on the forum

Post by Neptune- on March 28th 2014, 10:07 am

Well ! I always use actions / copy bbcode URL so i never translate topic titles.

Maybe i should ?

Neptune-
Forumember

Male Posts : 187
Reputation : 21
Language : French (10), English (8), CSS (5), HTML (4), Javascript (1)
Location : France

http://www.planet-series.com/

Back to top Go down

Solved Re: Custom font on the forum

Post by Pizza Boi on March 28th 2014, 10:15 am

@Neptune- wrote:Well ! I always use actions / copy bbcode URL so i never translate topic titles.

Maybe i should ?

Hi Very Happy

Nah, it's okay. The link's okay, we just can't speak it o.o... but I guess it'd be okay if I say Merci or something lol since that's general French. Anyway, Imma stop posting on this thread now before we get it o.O"

Regards,
Pizza Boi

Pizza Boi
Hyperactive

Male Posts : 2016
Reputation : 160
Language : French
Location : Pizza Hut!

http://redlustempire.forumtl.com/

Back to top Go down

Solved Re: Custom font on the forum

Post by Klemen on March 28th 2014, 5:12 pm

@Ange Tuteur wrote:Click 'quick-use'


Choose you character set, then scroll down, copy the stylesheet URL, and paste it in your address bar.


Copy the CSS and add it to your stylesheet.


Make sure it is at the top of the sheet. If it is you can use it in rules after.

ex :
Code:
element, .class, #id { font-family:myCustomFont; }

Alright, thanks for posting this post. I knew the font-face function, but had no idea how exactly to implement a font from google fonts. I would just have a few questions...

1. Does the font-face function only work with google fonts? I would really like to implement a specific font, but its not on google fonts...
2. I changed the font on my forum, but it didnt change the font of the forum titles or the font of posts. Is it possible to change those as well?

Klemen
Forumember

Male Posts : 292
Reputation : 32
Language : English, German, Slovene

http://www.bannedbrotherhood.com

Back to top Go down

Solved Re: Custom font on the forum

Post by Ange Tuteur on March 28th 2014, 5:17 pm

If you can find a place to host a font, I'm sure you can. You just need to change /URLOFMYFONT to the URL of your font and FORMAT to the format of your font
Code:
@font-face {
  font-family: 'Font name';
  src: local('Ceviche One'), local('CevicheOne-Regular'), url(/URLOFMYFONT) format('FORMAT');
}

For you titles you should write :
Code:
.h3 { font-family:MY_CUSTOM_FONT_NAME !important; }

Ange Tuteur
Forumaster

Male Posts : 13028
Reputation : 2704
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: Custom font on the forum

Post by Klemen on March 28th 2014, 5:31 pm

I tried this before, but I couldnt get it to work. 

Code:
@font-face {
  font-family: 'pet_me_64medium';
  font-style: normal;
  font-weight: 400;
  src: local('pet_me_64medium'), url(https://docs.google.com/uc?export=download&id=0BwsQtfX9m4jAaDRPVXgyX0tGQUU) format('ttf');
}

The url has to be a direct download link, right? Why didn't it work?

The code for the titles didn't work.

Klemen
Forumember

Male Posts : 292
Reputation : 32
Language : English, German, Slovene

http://www.bannedbrotherhood.com

Back to top Go down

Solved Re: Custom font on the forum

Post by Ange Tuteur on March 28th 2014, 6:13 pm

I'm not sure if where that's host would work.
ttf should be truetype
Code:
@font-face {
  font-family: 'pet_me_64medium';
  font-style: normal;
  font-weight: 400;
  src: url(https://docs.google.com/uc?export=download&id=0BwsQtfX9m4jAaDRPVXgyX0tGQUU) format('truetype');
}

Ange Tuteur
Forumaster

Male Posts : 13028
Reputation : 2704
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: Custom font on the forum

Post by Klemen on March 28th 2014, 6:23 pm

Whoops... Thanks again Ange.

When I installed that new font it changed the titles as well, I didn't even need that code you gave me above. No idea why it didn't work before... Same with the font of the posts.

Anyway, thank you all.

Solved.

Klemen
Forumember

Male Posts : 292
Reputation : 32
Language : English, German, Slovene

http://www.bannedbrotherhood.com

Back to top Go down

Solved Re: Custom font on the forum

Post by Pizza Boi on March 28th 2014, 6:25 pm

@Ange Tuteur wrote:I'm not sure if where that's host would work.
ttf should be truetype
Code:
@font-face {
  font-family: 'pet_me_64medium';
  font-style: normal;
  font-weight: 400;
  src: url(https://docs.google.com/uc?export=download&id=0BwsQtfX9m4jAaDRPVXgyX0tGQUU) format('truetype');
}

Hi Very Happy

Guys, I just wanted to tell something. My cousin told me that the use of fonts outside the google themes perimeter is highly unlikely but she didn't tell me why :/ . Anyway, she also said that download links won't work but some of them might be valid, it's just limited mostly to google themes. Just wanted to tell everyone who wants to use custom fonts.

Regards,
Pizza Boi

Pizza Boi
Hyperactive

Male Posts : 2016
Reputation : 160
Language : French
Location : Pizza Hut!

http://redlustempire.forumtl.com/

Back to top Go down

Solved Re: Custom font on the forum

Post by Ange Tuteur on March 28th 2014, 6:31 pm

Topic solved and archived

Ange Tuteur
Forumaster

Male Posts : 13028
Reputation : 2704
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

View previous topic View next topic Back to top


 
Permissions in this forum:
You cannot reply to topics in this forum