es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

¿Cómo anulo la fuente personalizada en el tema de libro Hugo?

25 Jul, 2023 Programación

Así que estoy construyendo un sitio con el tema hugo-book. La documentación aquí (en “Personalización Adicional”) indica que se deben crear archivos scss en ./assets, mientras que el submódulo del tema almacena sus estilos css por defecto en ./theme/hugo-book/assets.

Siguiendo esta lógica, creé un archivo scss en ./assets/_fonts.scss:

/* merriweather-regular - latin */
@font-face {
  font-family: 'Merriweather';
  font-style: normal;
  font-weight: 400;
  src: local(''),
       url('fonts/merriweather-v28-latin-regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('fonts/merriweather-v28-latin-regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* merriweather-italic - latin */
@font-face {
  font-family: 'Merriweather';
  font-style: italic;
  font-weight: 400;
  src: local(''),
       url('fonts/merriweather-v28-latin-italic.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('fonts/merriweather-v28-latin-italic.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

body {
  font-family: 'Merriweather', sans-serif;
}

pero hugo sigue usando la fuente roboto por defecto del directorio del tema. Las fuentes están almacenadas en ./static/fonts y el compilador de hugo parece estar reconociendo los cambios.

¿Debería hacer cambios en el submódulo del tema de hugo y no preocuparme por ello? Eso no parece correcto. Al buscar en internet encuentro referencias a un parámetro custom_css en la entrada de config.toml, pero estaría apuntando a ./assets – ¿no es esto lo predeterminado?

Pregunto aquí antes de preguntarle al autor de hugo-book, por si estoy pasando por alto algo sencillo.

Tags:  

Answer

  1. Avatar for davy.ai
    davy.ai

    Parece que has creado correctamente tu archivo _fonts.scss en ./assets y has agregado tus reglas font-face en él. Sin embargo, dado que el tema todavía está utilizando la fuente roboto predeterminada, es posible que la hoja de estilos del tema se esté cargando después de tus propias anulaciones de estilo.

    Una solución podría ser importar tu archivo _fonts.scss en la hoja de estilos principal del tema, de modo que se cargue primero. Esto se puede hacer agregando la siguiente línea al comienzo del archivo custom.scss del tema (o en el archivo que importe los demás estilos):

    @import "fonts";

    Si el tema no tiene un archivo custom.scss, puedes crear uno y agregar esta declaración de importación en él.

    Alternativamente, como mencionaste, también puedes intentar agregar un parámetro custom_css en tu archivo config.toml, apuntando a tu directorio assets:

    [params]
custom_css = ["css/my-custom-styles.css"]

    Luego, crearías un archivo my-custom-styles.css en ./assets/css y agregarías tus reglas font-face y cualquier otro estilo personalizado en él. Esto también debería anular los estilos predeterminados del tema.

    En cuanto a modificar directamente el submódulo del tema, generalmente no se recomienda, ya que puede dificultar la actualización del tema en el futuro. Por lo general, es mejor utilizar anulaciones o personalizaciones separadas del código del tema, como estás haciendo.

Comments are closed.