How to add a custom font to a specific page in Liquid?

Technical Q&A
1

Hi, I was customizing this debut theme today and wanted to add my custom font family for a particular page only ( Password Page ). First off, i was confused about the right practice to introduce my own font family for only one particular page so i went to the layouts/passwordDOTliquid file and started there. I first looked how the fonts are being imported in the section of the liquid layout file and then tried importing my custom font the same way. It was doing it something as follows:

{%- assign header_font = settings.type_header_font -%}

and then in the styles:

{{ header_font | font_face: font_display: 'swap' }}

so what i did was that i uploaded my custom font .woff2 file inside the assets folder and followed the same way and end up getting the following error in the DOM developer chrome tools:

milyask_0-1630359122220.png
milyask_0-1630359122220.png928×132 5.65 KB

I googled about what this font drop thing is but got no results… Please help!!! thanks

2

Please follow the steps:

  • Step 1: Upload font in Assets. https://i.imgur.com/AqO9RnX.png

  • Step 2: Get font-face in the layout/password.liquid file. Ex: @font-face { font-family: ‘font-name’; src: url(‘{{ ‘font-name.woff2’ | asset_url }}’) format(‘woff2’); font-display: swap; }

  • Step 3: You can get it ‘font-name’ and use it. Hope it clear to you.