Fundamentos do CSS

prof. Ricardo Artur

Fontes no CSS

Com o desenvolvimento das fontes para a web ampliou-se muito a oferta de fontes passíveis de serem usadas online

Anteriormente, só era possível utilizar uma lista limitada de fontes comuns à maioria dos sistemas baseados em Windows. Usar outras fontes implicava o risco da página parecer diferente em cada computador.

Atualmente, uma grande gama de famílias tipográficas, variações de estilos e pesos que podem ser acessadas no próprio servidor ou remotamente e que ampliam em muito a possibilidade de uso das fontes.

Abaixo alguns tópicos a serem desenvolvidos

Como vincular fontes

Para usar fontes para a web é possível fazê-lo de dois modos: incluindo as fontes no próprio servidor ou vinculando as fontes de um servidor externo.

As duas opções são válidas, sendo que usar o próprio servidor é mais indicado quando há um fluxo grande e a necessidade de soluções personalizadas. Já o uso de servidores externos oferecem maior agilidade e facilidade na hora utilizar as fontes.

Fontes no próprio servidor

Para adicionar fontes ao próprio servidor é recomendável criar uma pasta onde ficam todos os arquivos das fontes utilizadas.

pasta da fonte Merriweather
Exemplo de pastas com arquivos de fontes no formato WOFF (Web Open Font Format)

Também é preciso criar um arquivo CSS no qual se estabeleça a associação entre a fonte e seu respectivo arquivo. Para isso, recorre-se ao seletor @font-face.

@font-face {
	font-family: 'Merriweather';
	font-style: normal;
	font-weight: 300;
	src: local('Merriweather Light'), local('Merriweather-Light'), 
	url(merriweather/merriweather_light.woff) format('woff');
	}

Em seguida, é importante vincular o arquivo CSS da fonte ao arquivo HTML por meio da tag <link>:

<link href="merriweather.css" rel="stylesheet" type="text/css">

Por fim, basta incluir a fonte no código CSS, como no título h1, por exemplo:

h2 {
    font-family: 'Merriweather', serif;
    font-style: normal;
    font-weight: 300;
  }

Exemplo do código aplicado abaixo

Exemplo de <h2> com a fonte Merriweather Light

Fontes de um servidor externo

Alguns servidores como o Typekit da Adobe, ou Fonts do Google, oferecem um serviço de hospedagem de fontes e um amplo catálogo de fontes para a web.

É possível estabelecer um vínculo direto com o servidor, copiando o código da fonte para a sua página, como no exemplo:

<link href="https://fonts.googleapis.com/css?family=Merriweather:300&display=swap" rel="stylesheet">

Depois, basta incluir a fonte no código CSS, como no título h1, por exemplo:

h2 {
    font-family: 'Merriweather', serif;
    font-style: normal;
    font-weight: 300;
  }

Exemplo do código aplicado abaixo

Exemplo de <h2> com a fonte Merriweather Light

Propriedades das fontes

As fontes possuem diversas propriedades que podem ser alteradas pelo CSS, são elas:

Abaixo um exemplo com a propriedade font:

font: italic bold 18px Georgia, serif;

Isso resultará em algo assim:

Parágrafo <p> com a fonte Georgia (ou serifada), no estilo itálico, peso bold, tamanho do corpo 18px

Nota-se que por meio do seletor font é possível elencar diversas propriedades (estilo, peso, corpo, família, etc.)

Como usar as fontes no CSS

As fontes podem ser declaradas universalmente ou especificamente ao longo do código CSS. No caso do documento todo, pode-se apelar ao seletor da tag <body>.

body{
  font-family: 'Merriweather', serif;
  font-style: normal;
  font-weight: 300;
  }

Também é possível atribuir as propriedades de fontes a elementos mais específicos da página HTML tais como:

Veja também

Voltar ao topo