Cambiar la fuente predeterminada en tu sitio

[Discourse]

Esta guía explica cómo cambiar la fuente predeterminada en su sitio de Discourse, ya sea para elementos específicos o utilizando una biblioteca de fuentes distinta de Google Fonts.

Nivel de usuario requerido: Administrador

Esta guía solo es necesaria si desea integrarse con una biblioteca de fuentes diferente a Google Fonts o cambiar la fuente de solo algunos elementos del sitio. Si está utilizando Google Fonts y desea cambiar la fuente globalmente en todo su sitio, pruebe este componente de tema en su lugar: Google Fonts.

Esta guía cubrirá:

• Uso de la configuración de fuentes incorporada
• Cambio de la fuente del sitio con una fuente personalizada
• Aplicación de diferentes fuentes a elementos específicos

Configuración de fuentes incorporada

Discourse incluye un selector de fuentes incorporado con una selección de fuentes empaquetadas. Esta es la forma más sencilla de cambiar la fuente de su sitio sin ningún CSS personalizado.

Navegue a Admin > Appearance > Fonts para acceder a la página de configuración de fuentes. Desde aquí puede configurar:

• Fuente base — utilizada para la mayor parte del texto del sitio (predeterminado: Inter)
• Fuente de encabezado — utilizada para los encabezados (predeterminado: Inter)
• Tamaño de texto predeterminado — el tamaño de texto predeterminado para todos los usuarios

Estas configuraciones utilizan las propiedades personalizadas de CSS --font-family y --heading-font-family en segundo plano, que los temas también pueden anular.

Cambio de la fuente con una fuente personalizada

Si desea utilizar una fuente que no se incluye en la lista integrada (por ejemplo, de Google Fonts o un archivo de fuente autoalojado), puede hacerlo a través de un componente de tema.

1. Crear un nuevo componente de tema

Navegue a Admin > Appearance > Themes & Components > Install > Create New. Elija un nombre y seleccione “Component”.

2. Editar CSS/HTML

Haga clic en el botón “Edit CSS/HTML”.

3. Añadir la fuente usando Google Fonts

Si desea utilizar una fuente web de Google, añada lo siguiente a su pestaña Common > CSS:

@import url(https://fonts.googleapis.com/css?family=Oswald);

html {
    --font-family: 'Oswald', sans-serif;
    --heading-font-family: 'Oswald', sans-serif;
}

Asegúrese de que la línea @import url se coloque en la parte superior de la hoja de estilo.

En este ejemplo, Oswald es el nombre de la fuente.

Si hay un problema con el método @import url, alternativamente puede usar el método <link> insertando la línea apropiada dentro de la pestaña Common > /head de su componente de tema:

<link href="https://fonts.googleapis.com/css?family=Oswald" rel="stylesheet">

Este método cambiará la fuente del sitio globalmente.

4. Aplicar fuentes a elementos específicos
   Puede cambiar la fuente del sitio solo a algunos elementos.

Para cambiar la fuente solo a algunos elementos, como la barra de navegación o los títulos de los temas, añada:

@import url('https://fonts.googleapis.com/css?family=Oswald:200,300');

.navigation-container, .link-top-line {
    font-family: 'Oswald', sans-serif;
}

Alternativamente, para cambiar la fuente de una categoría específica, use:

body.category-CATEGORY-NAME {
    font-family: 'YOUR-NEW-FONT';
}

6. Añadir el nuevo componente a los temas principales

Asegúrese de añadir el componente de tema recién creado a todos los temas principales que los usuarios pueden seleccionar: