Google font won't work

Technical Details

Forum version : #PunBB
Position : Administrator
Concerned browser(s) : Mozilla Firefox, Google Chrome
Who the problem concerns : All members
When the problem appeared : Today, when i tried to switch the font
Forum link : www.vielamort.net

Description of problem

Hello, i've been trying to use the google fonts on my website.

The code is:

Code:

<link href="https://fonts.googleapis.com/css?family=News+Cycle|Open+Sans+Condensed:300|Poiret+One" rel="stylesheet">

font-family: 'Open Sans Condensed', sans-serif;
font-family: 'News Cycle', sans-serif;
font-family: 'Poiret One', cursive;

I've tried to put everything together, but it seems like it doesn't work, the html is in the template header and the font-family in the css.

What am i doing wrong?

Hi there, what is the CSS code you are putting in your CSS? Because if it is just this.

Code:

font-family: 'Open Sans Condensed', sans-serif;
font-family: 'News Cycle', sans-serif;
font-family: 'Poiret One', cursive;


It won't be valid. You need to put a selector and the one you need is the 'body'.

Code:

body {
  font-family: 'Open Sans Condensed', sans-serif;
  font-family: 'News Cycle', sans-serif;
  font-family: 'Poiret One', cursive;
}

I tried what you did, and the font have changed.. but not into the right one?

Oh.. okay. I see the issue. Why do you have three fonts? You can only set one.

EDIT: Are you trying to set these as a selectable font in the posts or as a single one for the entire site?

Nope, i want a specific font for the menu, and one for the mini profile on the right, and a third as the header for the main font o.o.. is that possible?

Yes, all of that is possible as long you place the correct 'font-family' on the correct selector.

Now I would love to assist you but I am a little puzzled at where you want each. Is it possible you can provide a screenshot of where you would like each and which font you would like there?

Thanks!

Add this to your CSS.

Code:

body {
  font-family: 'News Cycle', sans-serif;
}

.user-info {
  font-family: 'Open Sans Condensed', sans-serif !important;
}

#primary_nav {
  font-family: 'Poiret One', cursive !important;
}

I'm not excatly sure if that did the trick..
Would it be possible for you to go in and check with a test user?
Also the mini profile seems to behave odd now :s

Yes, PM me the account info.

Done (:

In your CSS, find the following selector.

Code:

.pun .post .user {
width: 155px;
font-size: 12px;
text-align: center;
line-height: 150%;
margin-left: -160px;
margin-top: -0.6em;
}

And change it to this.

Code:

.pun .post .user {
width: 155px;
font-size: 12px;
text-align: center;
line-height: 150%;
margin-left: -140px;
margin-top: -0.6em;
}

All you simply have to do is change the value of '-160px' to '-140px' on the property 'margin-left' so it doesn't go off the page.

I'm having a bit of problem with the text in the foras.. they don't appear besides the user info, but instead at the bottom?
Edit: nvm, got it to work (:

Hello,

Is this solved? If so, please mark it solved by hitting the 'Mark solved' button at the top of the topic.

-Brandon