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.

Global font change to imported Google font

View previous topic View next topic Go down

Global font change to imported Google font

Post by Espectra on February 10th 2015, 7:06 pm

rivals-of-trust.forumotion.com
www.rivalsoftrust.com

I have imported the Google font Kelly Slab to my overall_header template, as described in another topic, using the standard code provided by google:

Code:
<link href='http://fonts.googleapis.com/css?family=Kelly+Slab' rel='stylesheet' type='text/css'>

I know to add the following to any font element in my CSS stylesheet in order to appropriately change the font of that element:

Code:
font-family: 'Kelly Slab', cursive;

IE, if I wanted to change the body font:

Code:
body {
font-family: 'Kelly Slab', cursive;
}

Using the above code only changes certain elements on my forum. Is there a global CSS element that will allow me to change the font of everything? I want the font to be Kelly Slab for the entire forum. I like simple, but I need to make the forum integrate better with the website it's being used on, which utilizes Kelly Slab for the majority of the body.

If there is not a global font element, is there a list somewhere of the elements I need to change? I've tried adding the font-family code to the elements that are already on my stylesheet, but it still leaves certain elements unchanged.

I tried looking through the original CSS code to see if I could spot the elements that need to be changed, but I'm a bit too ignorant about CSS coding to spot them. Any assistance would be appreciated.

Espectra
Forumember

Female Posts : 48
Reputation : 1
Language : English

http://rivals-of-trust.forumotion.com

Back to top Go down

Re: Global font change to imported Google font

Post by Amber Sweet on February 10th 2015, 11:22 pm

You can put this in the CSS.
Code:
@font-face {
font-family: 'Kelly Slab';
font-style: normal;
font-weight: 400;
src: local('Kelly Slab'), local('KellySlab-Regular'), url(http://fonts.gstatic.com/s/kellyslab/v6/SyF-Rhcjgp6FG5qZKHGCE_esZW2xOQ-xsNqO47m55DA.woff2) format('woff2');
}
I think you should be able to change the font for the entire forum through the "Main Font Face" on the colors using:
Code:
'Kelly Slab', cursive


I hope this helps!

Amber Sweet
New Member

Posts : 11
Reputation : 1
Language : English

http://badwordforagoodthing.forumotion.com

Back to top Go down

Re: Global font change to imported Google font

Post by Espectra on February 10th 2015, 11:31 pm

Woops!

Nope, that didn't work. Putting in:

Code:
@font-face {
font-family: 'Kelly Slab';
font-style: normal;
font-weight: 400;

 src: local('Kelly Slab'), local('KellySlab-Regular'),
url(http://fonts.gstatic.com/s/kellyslab/v6/SyF-Rhcjgp6FG5qZKHGCE_esZW2xOQ-xsNqO47m55DA.woff2)
 format('woff2');
}

changed my font to Comic Sans MS. Don't ask me how... I'm having this same issue with the chatbox.


Using the:

Code:
'Kelly Slab', cursive

in the Main Font Face option on the Colors did... nothing, as far as I could tell. I saw a another topic posted in this forum regarding those settings, and I was under the impression that those settings would only change the font if the font was installed on the user's PC. This means that using Kelly Slab on the colors page will not work, as this is not a font that is default to all PC's. I'll have to change it via CSS for it to show.

Espectra
Forumember

Female Posts : 48
Reputation : 1
Language : English

http://rivals-of-trust.forumotion.com

Back to top Go down

Re: Global font change to imported Google font

Post by Amber Sweet on February 11th 2015, 3:52 am

I know it would show as Comic Sans on some browsers due to it being a .woff2 file rather than a .woff file, but when it comes to the changing font part, it was worth a shot. I don't know whether or not it'd be possible to change the body font through the CSS.

Amber Sweet
New Member

Posts : 11
Reputation : 1
Language : English

http://badwordforagoodthing.forumotion.com

Back to top Go down

Re: Global font change to imported Google font

Post by Espectra on February 11th 2015, 5:03 pm

The method I used in my original post worked for the body just fine. The problem is that I simply do not know which CSS elements I need to add the font-family code to in order to get the rest of the forum to change.

You were on the right track with the @font-face rule, though.

http://help.forumotion.com/t138932-chatbox-font-does-not-properly-adjust

That rule (with minor edits, per Ange) fixed the chatbox for me.

Espectra
Forumember

Female Posts : 48
Reputation : 1
Language : English

http://rivals-of-trust.forumotion.com

Back to top Go down

Re: Global font change to imported Google font

Post by SLGray on February 11th 2015, 7:06 pm

Why do you have two topics about the same question/issue?


When your topic has been solved, ensure you mark the topic solved.
Never post your email in public.


SLGray
Administrator
Administrator

Male Posts : 36691
Reputation : 2445
Language : English
Location : United States

http://ztwds.forumotion.com/

Back to top Go down

Re: Global font change to imported Google font

Post by Espectra on February 11th 2015, 7:10 pm

They weren't originally about the same issue. They did, however, end up with the same solution.

Espectra
Forumember

Female Posts : 48
Reputation : 1
Language : English

http://rivals-of-trust.forumotion.com

Back to top Go down

Re: Global font change to imported Google font

Post by SLGray on February 11th 2015, 7:14 pm

Since you got your answer in the other topic, this one will be locked.


When your topic has been solved, ensure you mark the topic solved.
Never post your email in public.


SLGray
Administrator
Administrator

Male Posts : 36691
Reputation : 2445
Language : English
Location : United States

http://ztwds.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