Mam czionkę "Exo", może ona mieć style takie jak Medium, Demi Bold, Thin, Light etc.
font-family:Exo
działa dobrze, ale jak wybrać jej styl np. Medium?

font-weight

Z google fonts?

Zobacz sobie font-face

np:

[CSS] pobierz, plaintext 
@font-face {
  font-family: 'Exo';
  font-style: normal;
  font-weight: 400;
  src: local('Exo Regular'), local('Exo-Regular'), url(http://themes.googleusercontent.com/static/fonts/exo/v1/wocyXRLWPo2Av-yUTmmbTA.woff) format('woff');
}
@font-face {
  font-family: 'Exo';
  font-style: normal;
  font-weight: 500;
  src: local('Exo Medium'), local('Exo-Medium'), url(http://themes.googleusercontent.com/static/fonts/exo/v1/yLVQVmQgTSUkafMu4HoVJA.woff) format('woff');
}
@font-face {
  font-family: 'Exo';
  font-style: normal;
  font-weight: 700;
  src: local('Exo Bold'), local('Exo-Bold'), url(http://themes.googleusercontent.com/static/fonts/exo/v1/RokIQ-knd7LT9uhmuUjL2g.woff) format('woff');
}
[CSS] pobierz, plaintext 

i raczej powinno zadziałać

[CSS] pobierz, plaintext 
font-family: Exo;
font-weight: XXX
[CSS] pobierz, plaintext 

XXX dla wybranej grubości.

Czcionki mam w folderze

[CSS] pobierz, plaintext 
 @font-face {
    font-family: 'Exo';
    font-style: normal;
    font-weight: 500;
    src: local('Exo Medium'), local('Exo-Medium'), url(../exo/Exo-Medium_0.otf) format('otf');
    }
[CSS] pobierz, plaintext 

[CSS] pobierz, plaintext 
font-family:Exo;font-weight:500;
[CSS] pobierz, plaintext 

Coś takiego? Efekt w porównaniu z photoshopem raczej nie ten

Mam w .otf

Wpisz sobie font-weight: Najmniejszy i obok tekst font-weight: największy i będziesz widzieć czy działa. Żadna czcionka nie wygląda jak w photoshopie, chyba, że ją sobie wkleisz jako obrazek.

A tutaj czemu nie mogę zmienić koloru czcionki .active ?

[CSS] pobierz, plaintext 
#menu{
padding-top:20px;
}
#menu ul {
    margin: 0;
    padding: 0;
    list-style: none;
}
 
#menu ul li {
    float:right;
}
 
#menu ul li a {
	font-family:Exo;font-weight:500;
	padding:0 15px 0 15px;
    display: block;
	font-size:15px;
    text-decoration: none;
	padding-top:15px;
    color:#454545;
	text-shadow:1px 1px 1px #f8f8f8;
}
.active{
background:url(../img/triangle.png);
background-repeat:no-repeat;
background-position:50% 0px,top center;color:#1c71a4;
}
.active a{color:#1c71a4;}
[CSS] pobierz, plaintext 

[HTML] pobierz, plaintext 
<ul>
<li class="active"><a href="#1">HOME</a></li>
</ul>
[HTML] pobierz, plaintext 

Nie przyjmuje koloru klasy active...

Odświeżam

[CSS] pobierz, plaintext 
#menu ul li.active a {...}
[CSS] pobierz, plaintext