Change Username Font.

Pics:

Anyone know how to create an effect like this?

Add to your CSS:

Code:

@font-face {
  font-family: 'Open Sans Condensed';
  font-style: normal;
  font-weight: 700;
  src: local('Open Sans Condensed Bold'), local('OpenSans-CondensedBold'), url(http://themes.googleusercontent.com/static/fonts/opensanscondensed/v7/gk5FxslNkTTHtojXrkp-xONSK5BxN3NFS4EJkViHIqo.woff) format('woff');
}

.body {
 font-family: 'Open Sans Condensed';
}

Nothing happened.

Add it to the top of your CSS stylesheet.

Still the same result, nothing happened.

Code:

@font-face {
  font-family: 'Open Sans Condensed';
  font-style: normal;
  font-weight: 700;
  src:
 local('Open Sans Condensed Bold'), local('OpenSans-CondensedBold'),
url(http://themes.googleusercontent.com/static/fonts/opensanscondensed/v7/gk5FxslNkTTHtojXrkp-xONSK5BxN3NFS4EJkViHIqo.woff)
 format('woff');
}

.body {
 font-family: 'Open Sans Condensed' !important;

''Detected error
We have counted a different number of "{" and of "}". It means your CSS risks to be not valid and will not be posted correctly on your forum.

We advise you to reread your code.''

That popped up after I put in the code.

Hello,

SLGray forgot to close the last code. Please replace his code with the below:

Code:

@font-face {
  font-family: 'Open Sans Condensed';
  font-style: normal;
  font-weight: 700;
  src:
 local('Open Sans Condensed Bold'), local('OpenSans-CondensedBold'),
url(http://themes.googleusercontent.com/static/fonts/opensanscondensed/v7/gk5FxslNkTTHtojXrkp-xONSK5BxN3NFS4EJkViHIqo.woff)
 format('woff');
}

.body {
 font-family: 'Open Sans Condensed' !important;
}

The error is gone, but there is still no change. I think maybe I'm doing something wrong. My CSS stylesheet looks like this.

Code:

    @font-face {
      font-family: 'Open Sans Condensed';
      font-style: normal;
      font-weight: 700;
      src:
    local('Open Sans Condensed Bold'), local('OpenSans-CondensedBold'),
    url(http://themes.googleusercontent.com/static/fonts/opensanscondensed/v7/gk5FxslNkTTHtojXrkp-xONSK5BxN3NFS4EJkViHIqo.woff)
    format('woff');
    }

    .body {
    font-family: 'Open Sans Condensed' !important;
    }

.circular {
   width: 75px;
   height: 75px;
   border-radius: 150px;
   -webkit-border-radius: 150px;
   -moz-border-radius: 150px;
   background: url(http://link-to-your/image.jpg) no-repeat;
   box-shadow: 0 0 8px rgba(0, 0, 0, .8);
   -webkit-box-shadow: 0 0 8px rgba(0, 0, 0, .8);
   -moz-box-shadow: 0 0 8px rgba(0, 0, 0, .8);
   }



Do you have that font in your font library on your computer?

This is how it should look - https://www.google.com/fonts/specimen/Open+Sans+Condensed .

Yes, I'm sure I have the font. Is there anything else that could be the problem?

Code:

    @font-face {
      font-family: 'Open Sans Condensed';
      font-style: normal;
      font-weight: 700;
    }

    .body {
     font-family: 'Open Sans Condensed' !important;
    }



Still nothing. Does this mean I don't have the original font installed?

Have you tried adding the font here?

Administration Panel > Display > Colors & Pictures > Colors
The font options are in the first section box.

Try this :

Code:

@font-face {
  font-family: 'Open Sans Condensed';
  font-style: normal;
  font-weight: 300;
  src: local('Open Sans Cond Light'), local('OpenSans-CondensedLight'), url(http://themes.googleusercontent.com/static/fonts/opensanscondensed/v7/gk5FxslNkTTHtojXrkp-xF1YPouZEKgzpqZW9wN-3Ek.woff) format('woff');
}

* { font-family:'Open Sans Condensed' }

That worked, although it changed the entire font of the forum, not only the usernames. Is there any way for it to work only on usernames and not the whole forum?

Just a suggestion but this method will be slightly tedious.
You can add everyone into a certain group and give them all a certain hex color.
With that, add in

Code:

a span[style="color:#000000"] strong {
  /* font-family and other styles go here */
}

The downside to this is that everyone's username will be under the strong font-weight, and you might have to repeat the code for users who already have another color to their usernames.

As I said, this is just a suggestion. Hopefully the someone else can come up with a better idea from this.

Of course

Replace the CSS I gave you by :

Code:

@font-face {
  font-family: 'Open Sans Condensed';
  font-style: normal;
  font-weight: 300;
  src: local('Open Sans Cond Light'), local('OpenSans-CondensedLight'), url(http://themes.googleusercontent.com/static/fonts/opensanscondensed/v7/gk5FxslNkTTHtojXrkp-xF1YPouZEKgzpqZW9wN-3Ek.woff) format('woff');
}

a[href^="/u"] { font-family:'Open Sans Condensed' }

Thanks! Just one more thing though - is there a way to make the letters in capitals like in the original post without having to manually change every name to caps?

Code:

a[href^="/u"]::first-letter {
text-transform:capitalize;
}

See if this works

It didn't work, unfortunately.

Hmm... Then try this.
Create a new javascript file and apply it to all pages.

Code:

$(document).ready(function(){
    $('a[href^="/u"]').addClass("capitalize");
});

Then go to your CSS stylesheet

Code:

.capitalize {
text-transform: capitalize;
}

Here's a sample of it working
http://jsfiddle.net/JnY65/

Nothing happened. But wouldn't your solution only make the first letter capitalized since it says "Test" rather than "TEST"?

Oh, ahaha. Sorry. My bad.
Then you won't need all the jQuery.
Just change

Code:

a[href^="/u"] {
  font-family:'Open Sans Condensed';
}

to

Code:

a[href^="/u"] {
  font-family:'Open Sans Condensed';
  text-transform: capitalize;
}

will do.

Hope this helps now.

I did a quick google search. If I change it from 'capitalize' to 'uppercase', it works. Thanks for the help guys, you can lock this now!

Topic archived

Have a good day. ^^