The forum of the forums
Would you like to react to this message? Create an account in a few clicks or log in to continue.

Global font change to imported Google font

3 posters

Go down

Global font change to imported Google font Empty Global font change to imported Google font

Post by Espectra Tue Feb 10, 2015 6: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
Espectra
Forumember

Female Posts : 48
Reputation : 1
Language : English

View user profile http://rivals-of-trust.forumotion.com

Back to top Go down

Global font change to imported Google font Empty Re: Global font change to imported Google font

Post by Amber Sweet Tue Feb 10, 2015 10: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
Amber Sweet
New Member

Posts : 20
Reputation : 1
Language : English

View user profile http://www.ruth-rpg.com/

Back to top Go down

Global font change to imported Google font Empty Re: Global font change to imported Google font

Post by Espectra Tue Feb 10, 2015 10: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
Espectra
Forumember

Female Posts : 48
Reputation : 1
Language : English

View user profile http://rivals-of-trust.forumotion.com

Back to top Go down

Global font change to imported Google font Empty Re: Global font change to imported Google font

Post by Amber Sweet Wed Feb 11, 2015 2: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
Amber Sweet
New Member

Posts : 20
Reputation : 1
Language : English

View user profile http://www.ruth-rpg.com/

Back to top Go down

Global font change to imported Google font Empty Re: Global font change to imported Google font

Post by Espectra Wed Feb 11, 2015 4: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.

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

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

Female Posts : 48
Reputation : 1
Language : English

View user profile http://rivals-of-trust.forumotion.com

Back to top Go down

Global font change to imported Google font Empty Re: Global font change to imported Google font

Post by SLGray Wed Feb 11, 2015 6:06 pm

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


Global font change to imported Google font Slgray10

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

Male Posts : 50443
Reputation : 3478
Language : English
Location : United States

View user profile https://forumsclub.com/gc/128-link-directory/

Back to top Go down

Global font change to imported Google font Empty Re: Global font change to imported Google font

Post by Espectra Wed Feb 11, 2015 6:10 pm

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

Female Posts : 48
Reputation : 1
Language : English

View user profile http://rivals-of-trust.forumotion.com

Back to top Go down

Global font change to imported Google font Empty Re: Global font change to imported Google font

Post by SLGray Wed Feb 11, 2015 6:14 pm

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


Global font change to imported Google font Slgray10

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

Male Posts : 50443
Reputation : 3478
Language : English
Location : United States

View user profile https://forumsclub.com/gc/128-link-directory/

Back to top Go down

Back to top

- Similar topics

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