Aplicar una sola fuente a todo un sitio web con CSS

Question 1

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;}

Question 2

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).

Question 3

*{font-family:Algerian;}

mejor solución a continuación Aplicar una sola fuente a todo un sitio web con CSS

Question 4

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 , 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 , 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;
}

Question 5

Asegúrese de que los dispositivos móviles no cambien la fuente con su fuente predeterminada usando importante junto con el selector universal *:

* { font-family: Algerian !important;}

Question 6

* { font-family: Algerian; }

El selector universal se *refiere a cualquier elemento.

Question 7

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.

Question 8

Coloque esto en el encabezado de su (s) página (s) si el "cuerpo" necesita el uso de 1 y la misma fuente:

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

Todo entre las etiquetas <body>y </body>tendrá la misma fuente.

Question 9

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

Question 10

en Bootstrap, el inspector web dice que los encabezados están configurados para 'heredar'

todo lo que necesitaba para configurar mi página con la nueva fuente era

div, p {font-family: Algerian}

eso está en .scss

Question 11

*{font-family:Algerian;}

este html funcionó para mí. Agregado a la configuración del lienzo en wordpress.

Se ve genial, ¡gracias!

Answer 1

92

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;}

html css fonts font-face Michelle Smith
fuente

3

font-family es un valor heredado, así que ¿por qué no definirlo en el cuerpo?

Es posible que desee elegir la respuesta de Jukka K. Korpela. Es anterior a la respuesta elegida actual, durante aproximadamente un mes, y de todos modos tiene casi el mismo contenido.

okm

posible duplicado de Cómo aplicar fuente global a todo el documento HTML

davidcondrey

Le sugiero que nunca use la respuesta de (Jan Hančič) porque aplica su fuente a todas las etiquetas html, incluso a la etiqueta que no le gusta cambiar. por ejemplo: si crea una etiqueta img dentro de una etiqueta td y la convierte en text-align: center y vertical-align: middle. de esta manera, su etiqueta img nunca será el centro del TD. la mejor manera: verifique su documento y simplemente aplique el formato de fuente a las etiquetas que tienen texto en ellas

Mahdi Jazini

Answer 2

3

font-family es un valor heredado, así que ¿por qué no definirlo en el cuerpo?

Answer 3

Es posible que desee elegir la respuesta de Jukka K. Korpela. Es anterior a la respuesta elegida actual, durante aproximadamente un mes, y de todos modos tiene casi el mismo contenido.

okm

Answer 4

posible duplicado de Cómo aplicar fuente global a todo el documento HTML

davidcondrey

Answer 5

Le sugiero que nunca use la respuesta de (Jan Hančič) porque aplica su fuente a todas las etiquetas html, incluso a la etiqueta que no le gusta cambiar. por ejemplo: si crea una etiqueta img dentro de una etiqueta td y la convierte en text-align: center y vertical-align: middle. de esta manera, su etiqueta img nunca será el centro del TD. la mejor manera: verifique su documento y simplemente aplique el formato de fuente a las etiquetas que tienen texto en ellas

Mahdi Jazini

Answer 6

113

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).

Jan Hančič
fuente

11

Un elemento hereda 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.

Jukka K. Korpela

Tienes razón. He estado trabajando con restablecimientos de CSS durante tanto tiempo que olvido este tipo de cosas :)

Jan Hančič

O mejor aún, combine las dos respuestas principales ... body, * {font-family: Algerian;}

james ace

Answer 7

11

Un elemento hereda 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.

Jukka K. Korpela

Answer 8

Tienes razón. He estado trabajando con restablecimientos de CSS durante tanto tiempo que olvido este tipo de cosas :)

Jan Hančič

Answer 9

O mejor aún, combine las dos respuestas principales ... body, * {font-family: Algerian;}

james ace

Answer 10

105

*{font-family:Algerian;}

mejor solución a continuación Aplicar una sola fuente a todo un sitio web con CSS

Salam El-Banna
fuente

3

Curiosamente, esto no funciona cuando se usa el restablecimiento de CSS de Eric Meyer

ianbeks

¿No aplica eso la familia de fuentes a cada elemento? Esto parece que lo aplicaría a elementos innecesarios (como <img>) y sería ineficiente. Definitivamente podría estar equivocado, pero he leído para tener cuidado al aplicar un estilo a todo.

Max Strater

Dado que la regla universal no se puede anular, no podrá utilizar una segunda fuente en su sitio.

Julian F. Weinert

Como nadie ha mencionado esto, se sabe que el selector universal es lento. más sobre eso aquí: clairecodes.com/blog/…

Terje Solem

O mejor aún, combine las dos respuestas principales ... body, * {font-family: Algerian;}

james ace

Answer 11

3

Curiosamente, esto no funciona cuando se usa el restablecimiento de CSS de Eric Meyer

ianbeks

Answer 12

¿No aplica eso la familia de fuentes a cada elemento? Esto parece que lo aplicaría a elementos innecesarios (como <img>) y sería ineficiente. Definitivamente podría estar equivocado, pero he leído para tener cuidado al aplicar un estilo a todo.

Max Strater

Answer 13

Dado que la regla universal no se puede anular, no podrá utilizar una segunda fuente en su sitio.

Julian F. Weinert

Answer 14

Como nadie ha mencionado esto, se sabe que el selector universal es lento. más sobre eso aquí: clairecodes.com/blog/…

Terje Solem

Answer 15

O mejor aún, combine las dos respuestas principales ... body, * {font-family: Algerian;}

james ace

Answer 16

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 , 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 , 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;
}

Answer 17

Esta respuesta brinda un detalle muy necesario según el uso actual del estilo en las páginas web debido al uso de íconos de bootstrap (glifos) y fuente impresionante

Lakshman

Answer 18

tenga en cuenta que: (no selector) es CSS3 que no es compatible con todos los navegadores. IE 9+ debemos esperar al menos 10 años para que todas las personas de todo el mundo dejen las familias de IE -9 para siempre: D: '(

Mahdi Jazini

Answer 19

Asegúrese de que los dispositivos móviles no cambien la fuente con su fuente predeterminada usando importante junto con el selector universal *:

* { font-family: Algerian !important;}

Answer 20

18

* { font-family: Algerian; }

El selector universal se *refiere a cualquier elemento.

Jukka K. Korpela
fuente

Answer 21

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.

Answer 22

Coloque esto en el encabezado de su (s) página (s) si el "cuerpo" necesita el uso de 1 y la misma fuente:

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

Todo entre las etiquetas <body>y </body>tendrá la misma fuente.

Answer 23

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

Answer 24

en Bootstrap, el inspector web dice que los encabezados están configurados para 'heredar'

todo lo que necesitaba para configurar mi página con la nueva fuente era

div, p {font-family: Algerian}

eso está en .scss

Answer 25

-1

*{font-family:Algerian;}

este html funcionó para mí. Agregado a la configuración del lienzo en wordpress.

Se ve genial, ¡gracias!

intelijenjah
fuente

Aplicar una sola fuente a todo un sitio web con CSS

Respuestas: