Para adicionar uma fonte personalizada num site, podes seguir estes passos:
<head> no teu documento HTML. Por exemplo:
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto|Open+Sans">
Agora, podes usar essa fonte no teu CSS, especificando-a na propriedade font-family. Por exemplo:
.titulo {
font-family: 'Roboto', sans-serif;
}
.paragrafo {
font-family: 'Open Sans', sans-serif;
}
Assim, o elemento com a classe .titulo terá a fonte 'Roboto' aplicada, enquanto o elemento com a classe
.paragrafo terá a fonte 'Open Sans'.
Pessoalmente considero que tem setido adicionar uma fonte personalizada num site através do css, assim fica tudo no seu espaço de responsabilidade:
Funciona assim:
Por exemplo, se escolheste as fontes 'Roboto' e 'Open Sans', o código CSS fornecido pelo Google Fonts seria:
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Open+Sans&display=swap');
Depois de obter o código CSS, cola-o no início do ficheiro CSS externo.
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Open+Sans&display=swap');
html {
font-family: 'Roboto', sans-serif;
}
.paragrafo {
font-family: 'Open Sans', sans-serif;
}
Assim, todo o documento terá a fonte roboto, à exceção de quando usas a classe .paragrafo que atribui a Open Sans.
O Box Model em CSS é um modelo de design que descreve como os elementos HTML são renderizados na página. Consiste em quatro partes principais:
O tamanho total de um elemento é calculado como a soma dessas partes: conteúdo + padding + border + margin.
Por exemplo, se tivermos um elemento com as seguintes propriedades:
.caixa {
width: 200px;
height: 100px;
padding: 20px;
border: 2px solid #007bff;
margin: 20px;
background-color: #f0f0f0;
box-sizing: border-box;
}
O elemento terá uma largura de 200px (incluindo padding e borda), uma altura de 100px (incluindo padding e borda), uma borda sólida de 2px de largura, um espaçamento interno (padding) de 20px e um espaçamento externo (margin) de 20px. O modelo de caixa está definido como "border-box", o que significa que o tamanho total da caixa incluirá o padding e a borda.
Se retirarmos a propriedade box-sizing: border-box o elemento terá uma width (200px + 20px + 20px).
Utilizar a propriedade box-sizing: border-box permite ao elemento absorver o padding e a border, tornando o elemento
mais consistente.
A propriedade font-size em CSS define o tamanho do texto dentro de um elemento. Existem várias unidades de medida que podem ser usadas para especificar o tamanho do texto, entre várias destacam-se:
<html>). 1rem
é igual ao tamanho da fonte do elemento raiz.
Fonte: MDN Web Docs
O MDN Web Docs é uma excelente fonte de documentação sobre o modelo de caixa em CSS, abrangendo todos os elementos, atributos e conceitos importantes, incluindo padding, borda e margem.
font-size em CSS:
Fonte: MDN Web Docs
O MDN Web Docs fornece informações detalhadas sobre a propriedade font-size em CSS, incluindo exemplos práticos e
diretrizes de uso.
Fonte: CSS-Tricks
O CSS-Tricks oferece tutoriais detalhados sobre como adicionar fontes personalizadas em CSS, incluindo métodos usando @font-face e Google Fonts.
Fonte: CSS-Tricks
O CSS-Tricks explica claramente como funciona a relação entre elementos filhos posicionados absolutamente e elementos pais posicionados relativamente em CSS.