Añadir una fuente personalizada a mi tema a través del repositorio de assets

[Joart]

Hola,
Estoy intentando agregar una fuente personalizada a mi tema pero no funciona… Ciertamente hice algo mal pero no encuentro dónde.

• Estoy desarrollando mi propio tema que instalé a través de GitHub.
• En el repositorio de assets, subí mis fuentes que no son de Google Fonts:

• En about.json, importé los archivos:

• En mi repositorio scss, creé mis familias de fuentes:

Intenté agregar: format(‘woff2’) pero tampoco funcionó.

• Y luego:

Bueno, no funciona… ¿Alguna idea?

[pfaffman (Jay Pfaffman)]

No estoy seguro de cuál podría ser el problema. Revisaría Incluir activos (por ejemplo, imágenes, fuentes) en temas y componentes. Disculpa si eso no es útil.

[southpaw]

Hola @Joart,

Estoy seguro de que lo estoy simplificando demasiado, pero noto que en tu fragmento de about.json, la ruta a las fuentes apunta a una carpeta assets, pero en tu css, la ruta apunta a una carpeta fonts. ¿Estás seguro de que la ruta de origen del css es correcta?

[awesomerobot (Kris)]

@southpaw

¿Estás seguro de que la ruta de origen de CSS es correcta?

Esta es una buena observación, pero no querrás usar la ruta en tu CSS de esta manera, deberías referenciar los archivos usando el nombre del activo como una variable:

@font-face {
   font-family: supply-light;
   src: url($supply-light);
}

Esto se cubre en Include assets (e.g. images, fonts) in themes and components

[Joart]

Bueno, lo intenté pero no funciona

[pfaffman (Jay Pfaffman)]

Es difícil adivinar por qué. Podrías subir tu tema a GitHub y enlazarlo o publicar tu código aquí.

¿Seguiste el ejemplo proporcionado por @awesomerobot?

[southpaw]

Hola @Joart,

Jugué un poco con esto en una instancia de Discourse bastante nueva y tuve algunos problemas con las primeras fuentes que probé. Las había convertido a .woff2 usando un convertidor en línea gratuito, y creo que tal vez no hizo un buen trabajo.

Cuando probé con una fuente .otf y nuevamente con otra fuente .woff2 convertida por un convertidor más reputado, pude agregar la fuente personalizada usando los pasos de la guía que @pfaffman y @awesomerobot vincularon.

Realmente solo tomó dos pasos: cargar el archivo usando el modal Agregar carga y agregar solo las líneas @font-face y body del SCSS de ejemplo al tema o componente.

Estoy seguro de que si puedes darnos más detalles y compartir tu código y las fuentes, podemos ayudarte a resolver esto.

[Joart]

¡Oh sí, gracias! ¡Probé con el formato ttf y funciona!