Global font change to imported Google font

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.

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!

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.

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.

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.

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

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

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

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

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