Use font family on one element

HTML & CSS
1

Hi, I have a set font for the whole site, but have a certain I font I only want to use on one thing, which is the main navbar

This is my css

* {
font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif   
 }
@font-face {
font-family: 'carnivalee_freakshowregular';
src: url('carnevalee_freakshow.woff2') format('woff2'),
     url('carnevalee_freakshow.woff') format('woff');
font-weight: normal;
font-style: normal;
}

.blog-menu a {
font-family: "carnivalee_freakshowregular";
color: rgba(244, 218, 33, 1.0)!important;
font-weight: 700 !important;
}

But it seems that the main font want allow me to style that one element

2

Is your URL correct for your font? You have it sitting in the root folder of your site?

The element is not finding the font, so either the selector is incorrect, or the URL is incorrect.

3

Ye it must be, i thought that so what I did was grab the new font family code, the whole lot and stick it in the (*) everything style, and the whole website changed font, so its def not the path, would you agree with that?

4

I’m not sure of the specificity of the * selector in css, I wouldn’t think it overrides a class and element combination.
Normally I would set the default font on the body or html, this will have lesser specificity than .blog-menu a

To check if this is a specificity issue and not a @font-face issue, change it to some common system font to test it.

5

Ok sorry my last post was wrong,

It all changes when I do this to the new font

* {
    font-family: 'carnivalee_freakshowregular';
src: url('carnevalee_freakshow.woff2') format('woff2'),
     url('carnevalee_freakshow.woff') format('woff');
font-weight: normal;
font-style: normal;   
  }
@font-face {
font-family: 'carnivalee_freakshowregular';
src: url('carnevalee_freakshow.woff2') format('woff2'),
     url('carnevalee_freakshow.woff') format('woff');
font-weight: normal;
font-style: normal;

}

But when I do this

* {
    font-family: 'carnivalee_freakshowregular';
src: url('carnevalee_freakshow.woff2') format('woff2'),
     url('carnevalee_freakshow.woff') format('woff');
font-weight: normal;
font-style: normal;   
 }

It doesnt work, no special font appears it reverts to the very basic font, and I have deleted the @font-face bit too above

6

You need the @font-face declaration for the custom font to work, which is why your 2nd effort failed. But if your first worked, then your selector is probably wrong.

Just to be sure, you’ve got structure like this, correct? That’s what your selector is expecting…

<div class="blog-menu">
   <a href="http://www.somewhere.com">Link should be styled</a>
</div>
1 Like
7

Maybe better if I show you the site, its wordpress so it might be something there, but its the main nav in the red bar at the top that i want in the specialist font

live site

8

@SamA74 may be right and the * may be causing the issue…why I don’t know since the specificity on the .blog-menu a should be higher, but when I inspected the element, I had to disable that line (all three times - you need to figure out why your stylesheet loads three times).

Try changing that first line to use body, html instead.

@PaulOB - why would his generic selector be overriding the more specific selector - either way (identifier and math), it should be picking up the other line…

9

I’m a bit puzzled why lucida sans is winning over your custom font, you even have !important on it which should trump everything, and its on a later line.
I’m still a bit suspicious of the * selector, as it means everything.

10

It’s definitely the culprit as if I disable them in the css, it sets the style right. What I don’t understand is why the .blog-menu a (which is the same as *.blog-menu a) doesn’t override it

11

I changed * to body, html and it still didn’t over-ride it, and yes I added !important and that didn’t do anything either, strange isn’t it, seems to straight forward.

12

could it be that the navbar is fed its font style from another class perhaps, and that is over riding my special font, but I thought that at the start and thats why i have added the font style down to the lowest class or indentifier I could, its right on the ‘a’ class style

13

Well I learnt something new today about CSS.

3 Likes
14

I have changed it from * to body, html and it still does it

There is a ‘not’ option in css isnt there, maybe that would work, not sure how it works though

15

You have links to style.css in 4 places. Does this not confuse things a tad?

16

Hi gandalf, I cant work that out, I just picked up on that from a previous post and was looking, in the mean time, its probably miles off but tried this but didnt work

* not(.blog-menu a){
font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif;

}

Nope cant work out why its calling it 4 times, all the files in the child folder have no link to style.css in them, so thats checked, cant think anywhere else

17

Be sure to weed out all instances of * and replace with body, as my demo shows, it should be used with caution.

3 Likes
18

Ah cheers SamA74, thats done the trick, will remember that one.

Thank you

19

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.