Quiero usar una única fuente llamada "Algerian" en todo mi sitio web. Entonces, necesito cambiar todas las etiquetas HTML y no quiero escribir código diferente para etiquetas diferentes como:
button{font-family:Algerian;}
div{font-family:Algerian;}
El método escrito a continuación también está muy desaconsejado:
div,button,span,strong{font-family:Algerian;}Respuestas:
Ponga la font-familydeclaración en un bodyselector:
body {
font-family: Algerian;
}
Todos los elementos de su página heredarán esta familia de fuentes en ese momento (a menos que, por supuesto, la anule más adelante).
font-familyde su padre solo cuando ninguna hoja de estilo establece la familia de fuentes para el elemento. Las hojas de estilo del navegador normalmente establecen familia de fuentes, al menos, para input, textarea, code, tt, y preelementos.
*{font-family:Algerian;}mejor solución a continuación Aplicar una sola fuente a todo un sitio web con CSS
El selector universal *hace referencia a todos los elementos, este css lo hará por ti:
*{
font-family:Algerian;
}
Pero, desafortunadamente, si está utilizando íconos de FontAwesome , o cualquier ícono que requiera su propia familia de fuentes, esto simplemente destruirá los íconos y no mostrarán la vista requerida.
Para evitar esto puedes usar el :notselector, una muestra de fontawesome icon es <i class="fa fa-bluetooth"></i>, así que simplemente puedes usar:
*:not(i){
font-family:Algerian;
}
esto aplicará esta familia a todos los elementos del documento excepto a los elementos con el nombre de la etiqueta <i>, también puede hacerlo para las clases:
*:not(.fa){
font-family:Algerian;
}
esto aplicará esta familia a todos los elementos del documento, excepto a los elementos con la clase "fa" que se refiere a la clase predeterminada fontawesome, también puede apuntar a más de una clase como esta:
*:not(i):not(.fa):not(.YourClassName){
font-family:Algerian;
}
* { font-family: Algerian; }El selector universal se *refiere a cualquier elemento.
Como es probable que el navegador ya haya definido una fuente diferente para los elementos de formulario, aquí hay 2 formas de usar esta fuente en todas partes:
body, input, textarea {
font-family: Algerian;
}
body {
font-family: Algerian !important;
}
Todavía habrá una fuente monoespaciada en elementos como pre / code, kbd, etc. pero, en caso de que use estos elementos, será mejor que use una fuente monoespaciada allí.
Nota importante: si muy pocas personas tienen esta fuente instalada en su sistema operativo, se utilizará la segunda fuente de la lista. Aquí no definió una segunda fuente, por lo que se usará la fuente serif predeterminada, y será Times, Times New Roman excepto tal vez en Linux.
Hay dos opciones: use @ font-face si su fuente no se puede usar como fuente descargable o agregue alternativas: una segunda, una tercera, etc. y finalmente una familia predeterminada (sans-serif, cursive (*), monospace o serif). Se utilizará el primero de la lista que existe en el sistema operativo del usuario.
(*) la cursiva predeterminada en Windows es Comic Sans. Excepto si quieres engañar a los usuarios de Windows, no hagas eso :) Esta fuente es terrible, excepto para los cumpleaños de tus hijos donde es bienvenida.
Ok, estaba teniendo este problema en el que probé varias opciones diferentes.
La fuente que estoy usando es Ubuntu-LI, creé una carpeta de fuentes en mi directorio de trabajo. debajo de la carpeta fuentes
Pude aplicarlo ... eventualmente aquí está mi código de trabajo
Quería que esto se aplicara a todo mi sitio web, así que lo puse en la parte superior del documento css. sobre todas las etiquetas Div (no es que importe, solo sepa que cualquier fuente individual que asigne a la publicación de su script tendrá prioridad)
@font-face{
font-family: "Ubuntu-LI";
src: url("/fonts/Ubuntu/(Ubuntu-LI.ttf"),
url("../fonts/Ubuntu/Ubuntu-LI.ttf");
}
*{
font-family:"Ubuntu-LI";
}Si luego quisiera que todas mis etiquetas H1 fueran otra cosa, digamos sans sarif, haría algo como
h1{
font-family: Sans-sarif;
}En cuyo caso, solo mis etiquetas H1 serían la fuente sans-sarif y el resto de mi página sería la fuente Ubuntu-LI
*{font-family:Algerian;}este html funcionó para mí. Agregado a la configuración del lienzo en wordpress.
Se ve genial, ¡gracias!