Tipografia | HTML e CSS

Olá Daniel, tudo bem?

Temos duas formas de fazermos isso, explicarei a seguir!

- Utilizando fontes nativas do editor

Para selecionar a família de fontes que você deseja, você pode utilizar a propriedade font-family. No VS Code, utilizando essa propriedade, uma caixa irá abrir com as opções podem ser utilizadas, veja:

a imagem mostra o editor de código, com a font-family sendo aplicada na tag p e uma caixa de de seleção que surge com várias opções de fonte para escolher

- Importando fontes externas

Caso queira utilizar fontes que não tenham no editor, você poderá importar do Google Fonts e incorporar no seu projeto, ensinarei o passo a passo a seguir!

PARTE 1. No local sinalizado com a seta, pesquise o nome da fonte que deseja utilizar. Utilizarei como exemplo a Playfair Display.

a imagem mostra o campo de pesquisa do nome da fonte sendo preenchido e as opções sendo mostradas abaixo

PARTE 2. Pesquise pela configuração regular 400 e clique em select this style

a imagem mostra os resultados da pesquisa e indica clicar no botão "selec this style" do regular 400 da fonte

PARTE 3. Selecione o último trecho de código, referente ao href da fonte.

a imagem mostra o href da fonte que deve ser selecionado e clicado

PARTE 4. No arquivo HTML do seu projeto, acrescente na tag <head> o link copiado.

<head>
    <meta charset="UTF-8">
    <title>Nome do projeto</title>

    <link rel="stylesheet" href="reset.css">
    <link rel="stylesheet" href="style.css">
    <link href="https://fonts.googleapis.com/css2?family=Playfair+Display&display=swap" rel="stylesheet"> <!--href da fonte-->
</head>

PARTE 5. No CSS, chame a fonte no local que deseja aplicar. Caso seja uma fonte que será utilizada na página como um todo, ao invés de chamar no p como no exemplo, chame no body diretamente.

p {
    font-family: "Playfair Display"
}

Espero ter ajudado, em caso de dúvidas fique a vontade para perguntar. Bons estudos!