Fontes em CSS

Fontes em CSS

As fontes são um elemento importante em qualquer design, e em CSS não é diferente. A escolha da fonte certa pode fazer uma grande diferença na legibilidade e na aparência geral de um site. Felizmente, CSS oferece muitas opções para trabalhar com fontes.

Fontes padrão

Quando se trata de fontes, é importante lembrar que nem todos os usuários terão as mesmas fontes instaladas em seus computadores. Para garantir que o texto do seu site seja legível para todos, é importante incluir fontes padrão em sua folha de estilo. As fontes padrão são aquelas que vêm pré-instaladas na maioria dos sistemas operacionais, como Arial, Times New Roman e Verdana.

Para usar fontes padrão em seu site, basta especificar o nome da fonte em sua folha de estilo:

body {
    font-family: Arial, sans-serif;
}

Neste exemplo, a fonte Arial será usada se ela estiver instalada no computador do usuário. Caso contrário, o navegador usará a fonte sans-serif padrão do sistema operacional.

Fontes personalizadas

Se você quiser usar uma fonte que não seja padrão, é possível usar fontes personalizadas em seu site. Existem duas maneiras de fazer isso: incorporando a fonte em seu site ou usando uma fonte hospedada.

Incorporando a fonte

Para incorporar uma fonte em seu site, você precisará baixar a fonte e adicioná-la à pasta do seu site. Em seguida, você precisará especificar a fonte em sua folha de estilo usando a regra @font-face:

@font-face {
    font-family: 'MinhaFonte';
    src: url('minhafonte.ttf');
}

Neste exemplo, a fonte MinhaFonte será incorporada ao site e poderá ser referenciada pelo nome 'MinhaFonte' em sua folha de estilo.

Usando uma fonte hospedada

Se você não quiser incorporar a fonte em seu site, também é possível usar uma fonte hospedada. Existem muitos serviços de hospedagem de fontes disponíveis, como o Google Fonts e o Adobe Fonts.

Para usar uma fonte hospedada, basta adicionar o link para a fonte em sua folha de estilo:

Neste exemplo, a fonte Roboto será hospedada pelo Google Fonts e poderá ser referenciada em sua folha de estilo.

Especificando fontes

Depois de ter suas fontes disponíveis, é hora de especificá-las em sua folha de estilo. Existem várias propriedades CSS que você pode usar para especificar fontes:

font-family

A propriedade font-family especifica a fonte que será usada para o texto. Você pode especificar várias fontes para garantir que o texto seja legível em diferentes sistemas operacionais:

body {
    font-family: Arial, sans-serif;
}

font-size

A propriedade font-size especifica o tamanho da fonte em pixels, emems ou porcentagem:

h1 {
    font-size: 36px;
}

font-weight

A propriedade font-weight especifica a espessura da fonte. Os valores comuns são normal e bold:

h1 {
    font-weight: bold;
}

font-style

A propriedade font-style especifica o estilo da fonte. Os valores comuns são normal e italic:

em {
    font-style: italic;
}

text-transform

A propriedade text-transform especifica como o texto deve ser transformado. Os valores comuns são uppercase, lowercase e capitalize:

h1 {
    text-transform: uppercase;
}

Conclusão

Em resumo, as fontes são um elemento importante em qualquer design e em CSS há muitas opções para trabalhar com elas. É importante lembrar de incluir fontes padrão em seu site para garantir que o texto seja legível para todos os usuários. Se você quiser usar uma fonte personalizada, pode incorporá-la em seu site ou usar uma fonte hospedada. E, finalmente, existem várias propriedades CSS que você pode usar para especificar a fonte, incluindo font-family, font-size, font-weight, font-style e text-transform.

Próxima página do Ebook Gratuito:

11Estilização de texto em CSS

4 minutos