Recomendo que o @import
seja colocado logo após @charset "UTF-8";
.
Depois você deve especificar o caminho da fonte fornecido no Google Fonts, logo após a fonte estará instalada e pronta para ser utilizada. Importante ressaltar que temos que utilizar o nome específico que o site fornece para funcionar corretamente. No meu exemplo, usei a fonte Titillium
pelo Google Web Fonts.Veja:
@charset "UTF-8";
@import url('https://fonts.googleapis.com/css?family=Titillium+Web');
h1 {
font-family: 'Titillium Web', sans-serif;
}
Vale lembrar que o @import
é um elemento CSS
, então pode ficar dentro de uma tag <style>
no head
do seu HTML
. Nesse exemplo, usei a fonte Dancing Script
pelo Google Fonts, o código fica assim:
<style type="text/css">
@import url(http://fonts.googleapis.com/css?family=Dancing+Script);
</style>
Obs: Além da segurança de usar fontes do Google Web Fonts, temos também a facilidade, sem precisar fazer download de nada, apenas copiando o caminho da fonte desejada que já está hospedada nos servidores do google e especificando o seu nome no seu arquivo CSS
.
Refencia: