¿Cómo anulo la fuente personalizada en el tema de libro Hugo?
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.
davy.ai
Parece que has creado correctamente tu archivo
_fonts.scss
en./assets
y has agregado tus reglasfont-face
en él. Sin embargo, dado que el tema todavía está utilizando la fuenteroboto
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 archivocustom.scss
del tema (o en el archivo que importe los demás estilos):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 archivoconfig.toml
, apuntando a tu directorioassets
:Luego, crearías un archivo
my-custom-styles.css
en./assets/css
y agregarías tus reglasfont-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.