aplicando font-weight light semi-bold e extra-bold na css

Existe muitos tipos de fontes espalhadas pela web, o problema é que muitos programadores ao usar a css para aplicar uma fonte prefere realizar a montagem da logo no photoshop.
Claro que isso ajuda bastante a muitos em uma boa apresentação de um bom trabalho.
Mas pesquisando em sites pude ver como aplicar a fonte direto ao site apenas com códigos.
Na web existe o Google fonts.


Basta acessar Google Fonts.
Procure pela fonte clique nessa seta  

Depois role a página.

Aparecerá esse código.

<link href='https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>

Insirá ele junto com esses códigos.

<meta>


Depois na css use o seguinte código para aplicação da font


font-family: 'Open Sans', sans-serif;

Mas ao perceber pude ver  que existe as seguintes font-weight

light
light 300 italic
normal 400
semi-bold 600
semi-bold 600 italic
bold 700
bold 700 italic
extra-bold 800
extra-bold 800 italic

E como aplicar ela em font-weight?

Simples basta digitar

font-weight: extra-bold 800;  /*------ nesse caso 800 seria a expessura da font ------*/


Para adicionar uma font própria.


Você terá que colocar todo caminho da font exemplo.

/site/fonts/ BebasNeue-webfont.ttf

font-family: BebasNeue-webfont;
src: url(BebasNeue-webfont);