Aplicar uma única fonte a um site inteiro com CSS

91

Desejo usar uma única fonte chamada "Algerian" em todo o meu site. Portanto, preciso alterar todas as tags HTML e não quero escrever códigos diferentes para tags diferentes, como:

button{font-family:Algerian;}
div{font-family:Algerian;}

O método escrito abaixo também é altamente desencorajado:

div,button,span,strong{font-family:Algerian;}
html css fonts font-face Michelle Smith
fonte
3
font-family é um valor herdado, então por que não defini-lo apenas no corpo?
Você pode escolher a resposta de Jukka K. Korpela. É anterior à resposta escolhida atualmente, por cerca de um mês, e tem quase o mesmo conteúdo, de qualquer maneira.
okm
possível duplicata de Como aplicar a fonte global a todo o documento HTML
davidcondrey
Eu sugiro que você nunca use a resposta de (Jan Hančič) porque ela aplica sua fonte a todas as tags html, mesmo a tag que você não gosta de alterar. por exemplo: se você fizer uma tag img dentro de uma tag td e alinhá-la com texto: centro e alinhamento vertical: meio. usando desta forma, sua tag img nunca será o centro do TD. a melhor maneira: verifique o seu documento e apenas aplique o formato da fonte às tags que contêm textos
Mahdi Jazini

Respostas:

109

Coloque a font-familydeclaração em um bodyseletor:

body {
  font-family: Algerian;
}

Todos os elementos em sua página herdarão esta família de fontes (a menos, é claro, que você a substitua mais tarde).

Jan Hančič
fonte
11
Um elemento herda font-familyde seu pai apenas quando nenhuma folha de estilo define a família da fonte para o elemento. Folhas de estilo navegador normalmente definido família da fonte, pelo menos, para input, textarea, code, tt, e preelementos.
Jukka K. Korpela
Você está certo. Trabalho com redefinições CSS há tanto tempo que esqueço esse tipo de coisa :)
Jan Hančič
Ou melhor ainda, combine as duas principais respostas ... body, * {font-family: Algerian;}
james ace
105 
*{font-family:Algerian;}

melhor solução abaixo Aplicando uma única fonte a um site inteiro com CSS

Salam El-Banna
fonte
3
Curiosamente, isso não funciona ao usar a redefinição CSS de Eric Meyer
ianbeks
Isso não se aplica à família da fonte a cada elemento? Parece que isso se aplicaria a elementos desnecessários (como <img>) e seria ineficiente. Eu definitivamente posso estar errado, mas li para ter cuidado ao aplicar um estilo a tudo.
Max Strater
Visto que a regra universal não pode ser substituída, você não poderá usar uma segunda fonte em seu site.
Julian F. Weinert
Já que noboy mencionou isso, o seletor universal é conhecido por ser lento. mais sobre isso aqui: clairecodes.com/blog/…
Terje Solem
Ou melhor ainda, combine as duas principais respostas ... body, * {font-family: Algerian;}
james ace
48

O seletor universal *se refere a todos os elementos, este css fará isso por você:

*{
  font-family:Algerian;
}

Mas, infelizmente, se você estiver usando ícones FontAwesome ou quaisquer ícones que requeiram sua própria família de fontes, isso simplesmente destruirá os ícones e eles não mostrarão a visualização necessária.

Para evitar isso, você pode usar o :notseletor, um exemplo de ícone de fonte incrível <i class="fa fa-bluetooth"></i>, então simplesmente você pode usar:

*:not(i){
  font-family:Algerian;
}

isso aplicará esta família a todos os elementos no documento, exceto os elementos com o nome da tag <i>, você também pode fazer isso para as classes:

*:not(.fa){
  font-family:Algerian;
}

isso irá aplicar esta família a todos os elementos no documento, exceto os elementos com a classe "fa" que se refere à classe padrão fontawesome, você também pode direcionar mais de uma classe como esta:

*:not(i):not(.fa):not(.YourClassName){
  font-family:Algerian;
}
Salam El-Banna
fonte
Esta resposta fornece um detalhe muito necessário de acordo com o uso atual de estilo em páginas da web devido ao uso de ícones de bootstrap (glifos) e fonte incrível
Lakshman
observe que: (não o seletor) é CSS3, que não é compatível com todos os navegadores. IE 9+ devemos esperar pelo menos 10 anos para que todas as pessoas ao redor do mundo deixem as famílias IE -9 para sempre: D: '(
Mahdi Jazini
19

Certifique-se de que os dispositivos móveis não alterem a fonte com a fonte padrão usando importante junto com o seletor universal *:

* { font-family: Algerian !important;}
gabitzish
fonte
18 
* { font-family: Algerian; }

O seletor universal *se refere a qualquer elemento.

Jukka K. Korpela
fonte
3

Como uma fonte diferente provavelmente já está definida pelo navegador para os elementos do formulário, aqui estão duas maneiras de usar essa fonte em qualquer lugar:

body, input, textarea {
    font-family: Algerian;
}

body {
    font-family: Algerian !important;
}

Ainda haverá uma fonte monoespaçada em elementos como pré / código, kbd, etc, mas, caso você use esses elementos, é melhor usar uma fonte monoespaçada lá.

Observação importante: se muito poucas pessoas tiverem essa fonte instalada em seus sistemas operacionais, a segunda fonte da lista será usada. Aqui você não definiu uma segunda fonte, então a fonte serif padrão será usada, e será Times, Times New Roman, exceto talvez no Linux.
Duas opções: use @ font-face se sua fonte estiver livre para download ou adicione fallback (s): uma segunda, uma terceira, etc e, finalmente, uma família padrão (sem serifa, cursiva (*), monoespaçada ou serif). Será usado o primeiro da lista que existe no SO do usuário.

(*) cursiva padrão no Windows é Comic Sans. Exceto se você quiser enganar os usuários do Windows, não faça isso :) Esta fonte é terrível, exceto para os aniversários de seus filhos, onde é bem-vinda.

FelipeAls
fonte
2

Por favor, coloque isso no cabeçalho de suas páginas se o "corpo" precisar usar 1 e a mesma fonte:

<style type="text/css">
body {font-family:FONT-NAME ;
     }
</style>

Tudo entre as tags <body>e </body>terá a mesma fonte

PICwebs
fonte
1

Ok, então eu estava tendo esse problema em que tentei várias opções diferentes.

A fonte que estou usando é Ubuntu-LI, criei uma pasta de fontes no meu diretório de trabalho. sob as fontes da pasta

Consegui aplicá-lo ... eventualmente, aqui está meu código de trabalho

Eu queria que isso se aplicasse a todo o meu site, então coloquei no topo do documento css. acima de todas as tags Div (não que isso importe, apenas saiba que quaisquer fontes individuais que você atribuir ao seu script terão precedência)

@font-face{
    font-family: "Ubuntu-LI";
    src: url("/fonts/Ubuntu/(Ubuntu-LI.ttf"),
    url("../fonts/Ubuntu/Ubuntu-LI.ttf");
}

*{
    font-family:"Ubuntu-LI";
}

Se eu quisesse que todas as minhas tags H1 fossem outra coisa, digamos sans sarif, eu faria algo como 

h1{
   font-family: Sans-sarif;
}

Nesse caso, apenas minhas tags H1 seriam a fonte sans-sarif e o resto da minha página seria a fonte Ubuntu-LI

Lee Alderman
fonte
0

no Bootstrap, o inspetor da web diz que os títulos estão configurados para 'herdar'

tudo que eu precisava para definir minha página para a nova fonte era 

div, p {font-family: Algerian}

isso está em .scss

Austin
fonte
-1 
*{font-family:Algerian;}

este html funcionou para mim. Adicionado às configurações de tela no wordpress.

Parece legal - obrigado!

intelijenjah
fonte