Como Mudar A Fonte No Css?

Como Mudar A Fonte No Css?

Para mudar a fonte no CSS, você deve utilizar a propriedade font-family, que permite especificar a fonte que será aplicada ao texto em um site. Essa propriedade pode ser utilizada em seletores de CSS para alterar a fonte de elementos HTML, como parágrafos, cabeçalhos e links. Por exemplo, para mudar a fonte de um parágrafo, você pode usar o seguinte código:

p {
    font-family: 'Arial', sans-serif;
}

Além disso, é importante considerar a hierarquia de fontes, que consiste em listar várias fontes em ordem de preferência. Isso garante que, caso a primeira fonte não esteja disponível no dispositivo do usuário, uma alternativa será utilizada. Um exemplo de hierarquia de fontes seria:

font-family: 'Helvetica Neue', Arial, sans-serif;

Outra prática recomendada é utilizar fontes do Google Fonts, que oferece uma vasta biblioteca de fontes gratuitas e otimizadas para a web. Para usar uma fonte do Google Fonts, você deve primeiro incluir o link da fonte no cabeçalho do seu HTML e, em seguida, referenciá-la no seu CSS. Por exemplo:

<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">

Em seguida, você pode aplicar a fonte Roboto no seu CSS da seguinte maneira:

body {
    font-family: 'Roboto', sans-serif;
}

É fundamental também considerar o tamanho da fonte, que pode ser ajustado com a propriedade font-size. O tamanho pode ser definido em pixels (px), em (em) ou porcentagem (%). Por exemplo:

h1 {
    font-size: 2em; /* Tamanho relativo */
}

Além do tamanho, o peso da fonte pode ser alterado utilizando a propriedade font-weight. Isso permite que você defina se o texto deve ser normal, negrito ou em um peso específico. Veja um exemplo:

h2 {
    font-weight: bold;
}

Para um controle ainda mais refinado, você pode utilizar a propriedade font-style para definir se o texto deve ser normal, itálico ou oblíquo. Isso é especialmente útil para destacar citações ou ênfases no texto. Um exemplo de uso seria:

em {
    font-style: italic;
}

Por último, mas não menos importante, a cor da fonte pode ser alterada usando a propriedade color. A cor pode ser definida em diferentes formatos, como hexadecimal, RGB ou nomes de cores. Aqui está um exemplo de como mudar a cor do texto:

p {
    color: #333333; /* Cor hexadecimal */
}

Em resumo, mudar a fonte no CSS envolve o uso de várias propriedades que permitem personalizar a aparência do texto em um site. Ao dominar essas propriedades, você pode criar uma tipografia atraente e funcional que melhora a experiência do usuário e a estética do seu site.