Gostou do nosso conteúdo? Te ajudou?
Nos ajude também! Faça um PIX, de qualquer valor:
programacao.progressiva@gmail.com

Fontes em CSS: A propriedade font-family - Tutorial

Neste tutorial de CSS sobre formatação de texto, vamos aprender como escolher as fontes de um site, família de fontes, bem como aprender sobre as fontes mono espaçadas (monospace), serif, sans-serif, cursivas e outras características de uma font em CSS.


Fontes em CSS - A propriedade font-family

A escolha de uma fonte para seu site é um dos assuntos mais importantes quando estamos falando em design e identificação visual para suas páginas.
Neste tutorial de nossa apostila, não iremos apenas citar as fontes existentes, mas também falar dos conceitos de família de fontes, fontes serif, sans serif, monoespaçadas e dar uma ideia sobre design.

Na época do domínio dos jornais impressos e revistas, era comum as empresas buscarem sua identidade visual através das fontes, e acabavam por desenvolver sua próprias fontes, ou usar estilos bem definidos. As fontes de revistinhas em quadrinhos, por exemplo, era bem diferente das fontes de jornais.

Porém, na internet, as coisas não funcionam assim.
Você só consegue visualizar uma fonte em um site, se aquela fonte (um arquivo de extensão .ttf) estiver salva no seu computador.

Ou seja, se você quiser usar a fonte do Iron Maiden no seu site, bacana, mas provavelmente seus leitores não terão essa fonte instalada, e não poderão ver a fonte que você usou, e sim outra (provavelmente uma do tipo Times):

Tutorial de CSS sobre fontes - Apostila completa online para download

Por isso, é importante conhecermos as fontes mais conhecidas e usadas, as mais profissionais e indicadas para cada tipo de trabalho que você venha a desenvolver como webmaster ou webdesigner, em CSS.




Como usar uma fonte em CSS: font-family

Para definir que tipo de fonte vamos usar em qualquer trecho de nosso código HTML, através do CSS, devemos usar a propriedade font-family com o nome da fonte como o valor.

Assim, a sintaxe para se definir e usar uma fonte em CSS é:
font-family: "Nome da Fonte"

Por exemplo, para definir a fonte Times New Roman para todo os parágrafos, o código CSS é:
p {
 font-family: "Times New Roman";
}

O estilo CSS definindo o tipo de fonte também pode ser aplicado diretamente na tag desejada.
Por exemplo, para que uma tag de cabeçalho H3 use a fonte "Arial", podemos fazer:

<H3 style="font-family: Arial ">Esta fonte é do tipo Arial</H3>

Cujo resultado seria:

Esta fonte é do tipo Arial




Lista de fontes em CSS com a font-family

Como dissemos no início deste tutorial, você pode construir todo o design de seu site baseado em uma fonte, e o seu leitor simplesmente não vai ver a fonte porque ela não está instalada ou não veio no sistema operacional, ou browser, dele.

E agora, José?

A solução para isso é dar uma lista de fontes como valor, para atributo "font-family", separadas por vírgula.
Por exemplo:
font-family: "Colibri", "Comic Sans";

Note que citamos duas fontes, a 'colibri' e a 'comic sans'.
O CSS vai tentar estilizar primeiramente com a fonte "Colibri", se ela existir no computador do leitor, maravilha, vai ela mesmo.
E se ela não estiver presente, o estilo CSS tentará ser feito com a fonte "Comic Sans".
E por fim, se não tiver a Comic Sans no computador do usuário, o browser renderiza uma fonte padrão do sistema.

Vamos supor que o webdesigner planejou um site para ser usado com a fonte "Courier".
Porém, notou que ele também fica bacana se usar a fonte "Verdana", e se for o jeito, pode ser com a fonte "Arial", praticamente presente em todos sistemas.

O que o webmaster deve fazer para se certificar que a ordem dos gostos de fonte do designer?
Ora, usar uma lista de preferência como valores para o atributo "font-family":

p {
    font-family: "COURIER", 'Verdana', arial;
}

Note que você pode colocar o nome de uma fonte em maiúsculo, minúsculo, entre aspas duplas, entre aspas simples ou sem nada, apenas separadas entre vírgulas.

Famílias de Fontes e Fontes Genéricas: Sans-Serif, Serif e Monospace

Se você já usou qualquer editor de textos, como o Microsoft Word, sabe do absurdo de fontes existentes. Se pesquisar na internet, vai achar (sem exagero) dezenas de milhares de tipos de fontes.
O motivo disso é simples: qualquer um pode criar sua fonte e compartilhar pela internet.

Em termos de Webdesigner e Webmaster, é fácil prever que usar fontes não conhecidas é um baita de um risco. Por isso, o atributo "font-family" nos permite usar valores especial, que definem família de fontes que, embora diferente, tem alguns detalhes em comum que fazem ser possível agrupar algumas destas fontes.

Família de fontes

Como sempre, para facilitar nossa vida, o CSS nos apresenta uma série de valores que podem sempre simplificar nossas vidas.

Um desses recursos são as "Famílias de Fontes" ou "Font Family", como diz o nome da propriedade que é alvo de estudos deste tutorial de nossa apostila de CSS.

Assim, podemos usar apenas o nome da família de fonte, como:
font-family: "times";
font-family: "arial";
font-family: "courier";
font-family: "helvetica";

Fontes Sans-serif - font-family: sans-serif

As fontes do tipo Sans-Serif são as mais simples, direitas e limpas possíveis.
Elas são retas, bem quadradas mesmo, são 'sérias'.

Não é por menos que ela é usada para textos formais e em títulos de jornais ou revistas.
Como podem ver na figura abaixo, ela praticamente não tem detalhes (é costume dizer que as fontes sans-serif não tem pé).

Tutorial de CSS - Curso completo grátisAs fontes do tipo sans-serif mais comuns são:
  • Arial
  • Verdana
  • Helvetica
  • Calibri
  • Impact
  • Tahoma
  • Trebuchet MS

Se você quiser usar fontes sans-serif em seu projeto, como Arial e Verdana, é comum definir estas fontes e em seguida usar o valor "sans-serif", só para garantir que se as fontes que você definiu não sejam usadas, sejam usada alguma do tipo Sans-serif:

font-family: "arial", "verdana", "sans-serif";

Fontes Serif - font-family: serif

Ao contraŕio das fontes sans (que significam sem), as fontes do tipo SERIF tem um certo design, não são retas e limpas, elas possuem algumas saliências e detalhes.
Tutorial de CSS
Note que elas possuem 'pé', uma base em toda ponta da fonte.
São geralmente aconselhadas para textos mais longos e menos formais.

As fontes do tipo SERIF mais comuns são:
  • Times New Roman
  • Georgia
  • Garamond
  • Cambria
  • Palatino
  • Lucida Bright

Caso queira garantir, e definir, que seu site terá sempre fontes do tipo SERIF, use códigos CSS com as fontes desejadas e em seguida escreva "serif" para dizer ao browser que caso não tenha aquelas fontes no computador do leitor, ele deverá renderizar uma do tipo SERIF:
font-family: "Georgia", "Palatino", "serif";

Fontes monoespaçadas - font-family: monospace

Ao contrário dos dois tipos de fontes anteriores, SERIF e SANS-SERIF, as do tipo monospace não focam no design ou estilo de letra, e sim no tamanho delas. Mais especificamente, na largura de cada caractere de uma fonte (se acostume, o CSS é uma ferramenta super poderosa que nos permite alterar até os menores detalhes de um site HTML).

Por exemplo, é de esperar que a letra "i" seja mais fina que a letra "o" ou "L".
Mas nas fontes mono espaçadas não.
Veja:

Fonte Arial     -> oioioi
Fonte Courier -> oioioi.

Note que a fonte Arial é menor, e a Courier é mais larga, embora tenham mesma altura de fonte e mesmo número de caracteres. Isso ocorre porque a fonte Courier é do tipo "monospace".

O principal uso deste tipo de fonte é quando você tem que controlar a largura e tamanho de um texto, como em uma sessão de classificados de um jornal.

As fontes do tipo mono espaçadas mais comuns são:
  • Courier
  • Courier New
  • Monaco
  • Consolas
  • Lucida Console
Para garantir que vai usar uma fonte monoespaçada, você pode usar o código:
font-family: "Courier New", "Monaco", "monospace";

Afinal, que fonte usar em CSS ? - Fontes Seguras

Com tantos tipos de fontes, como serif, sans-serif, monospace e outras, que tipo usar?
Como usar uma fonte original, diferente, mas garantir que o usuário vá ter?

Existem determinados tipos de fontes que são ditas seguras, que são aquelas que se você usar, é praticamente certeza que o usuário vá ter, pois são fontes usadas em diversos sistemas operacionais e em todos os navegadores (browsers), indicamos:


  • Serif: Times New Roman, da família Times
  • Sans-serif: Arial
  • Monospace: Courier New, da família Courier

Algumas fontes que são multiplataforma (existentes em diversos sistemas operacionais, como Mac OS, Windows e Linux):
  • Avant Garde
  • Palatino
  • Bookman
  • Garamond

Algumas fontes, como Verdana, Georgia, Comic Sans MS e Impact, não estão nos sistemas do tipo Unix (Linux, FreeBSD, NetBSD etc).

Lista de Fontes para usar em CSS e HTML

A seguir, veja as figuras sobre como são as mais diversas fontes (do site Wavian):
Tutorial de CSS

Tutorial completo de CSS

CSS Tutorial

Tutoriais de HTML e CSS