Why doesnt my fonts have the given google font weight?

It’s true, that you can give font weights at the google fonts:

google(@import url(http://fonts.googleapis.com/css?family=Roboto:300);)

But almost every template and theme is specifying font weights for everything, and other extensions too, which could affect our menu item’s texts, so we can’t let the fonts to use this 300 font weight in this example, but their font weight is normal by default. You can choose bold next to it. If you want to give other values, you need to specify it with css code. For example:

.nextend-accordion-menu-inner dt, .nextend-accordion-menu-inner span{
    font-weight: 300!important;
}

only for the active menu item:

.nextend-accordion-menu-inner dt, .nextend-accordion-menu-inner .active span{
    font-weight: 300!important;
}

or only for the opened + active menu items:

.nextend-accordion-menu-inner dt, .nextend-accordion-menu-inner dt.opened span{
    font-weight: 300!important;
}

Here is an example for css code priorities, if you want one to be stronger, than the other:

HTML code structure:

<div class="main">
     <div class="container">
          <div class="mydiv" id="textid">
               Text
          </div>
     </div>
</div>

And the css codes, starting with the weakest one:

1
div{
     color:blue;
}
	
2
.mydiv{
     color:blue;
}
	
3
div .mydiv{
     color:blue;
}
	
4
.container .mydiv{
     color:blue;
}
	
5
div .container .mydiv{
     color:blue;
}
	
6
.main .container .mydiv{
     color:blue;
}
	
7
#textid{
     color:blue;
}
	
8
div #textid{
     color:blue;
}
	
9
.container #textid{
     color:blue;
}
	
10
div .container #textid{
     color:blue;
}
	
11
.main .container #textid{
     color:blue;
}
	
12
inline css:
<div class="main">
     <div class="container">
          <div class="mydiv" id="textid" style="color:blue;">
               Text
          </div>
     </div>
</div>
	
13
.mydiv{
     color:blue!important;
}
	
14
.container .mydiv{
     color:blue!important;
}
	
15
.main .container .mydiv{
     color:blue!important;
}
	
16
#textid{
     color:blue!important;
}
	
17
div #textid{
     color:blue!important;
}
	
18
.container #textid{
     color:blue!important;
}
	
19
div .container #textid{
     color:blue!important;
}
	
20
.main .container #textid{
     color:blue!important;
}
	
21
<div class="main">
     <div class="container">
          <div class="mydiv" id="textid" style="color:blue!important;">
               Text
          </div>
     </div>
</div>