Add more than one custom font to the narrative theme

Technical Q&A

Topic summary

Añadir dos fuentes personalizadas (una para encabezados y otra para texto) en temas de Shopify (Narrative y luego Dawn).

Puntos clave y pasos:

  • Se recomienda subir los archivos de las fuentes a Assets y declararlas con @font-face en el CSS del tema.
  • En Narrative se indicó hacerlo en assets/theme.scss.liquid (cerca de settings.type_header_font) y luego aplicar font-family a selectores concretos o reemplazar variables de header/body font.
  • Aclaración importante: las fuentes importadas así no aparecen como opción en el panel de personalización (Typography); hay que llamarlas desde CSS.

Problemas encontrados y soluciones:

  • Error por nombres inconsistentes: los archivos subidos no coincidían con los nombres usados en el código (uso innecesario de sufijos _1/_2). Al corregir rutas/nombres, funcionó.
  • En Dawn no existe theme.scss.liquid; se usa base.css y/o el bloque {% style %}. Se puede aplicar por clases (.h1, etc.) o en los ajustes globales de tipografías del CSS.
  • El texto de cuerpo no tomaba la fuente “Renown” aunque el código lo indicaba; se resolvió ajustando @font-face para .otf usando format(‘opentype’).

Estado: resuelto; la usuaria confirma que el último cambio arregló el problema.

Summarized with AI on February 25. AI used: gpt-5.2.
7

Hi @NaomiRD ,

Go to assets/theme.scss.liquid file. You can add the CSS code here, everything will work fine.

Do you want it to replace Headings font and Body text font? https://i.imgur.com/466jODr.png

If you want, you go to assets/theme.scss.liquid file, find ‘header_font.family’ and replace ‘Think-Pink-Regular_1’.

Refer: https://i.imgur.com/ZBcEuLP.png => https://i.imgur.com/yJifap1.png

You can also reverse it if you need the Headings font to be ‘Renown-Monoline-Sans_2’.

Hope it clear to you.

1 Like