How do I use a custom font on the Dawn theme?

Store Design
, ,
1

Hi there - I’m trying to use a custom font on a draft site, which is using Dawn 7.0.1. I added the .woff2 file for my font in the Assets, then the code below in the theme.liquid file:

@font-face {
font-family: “Afrah-Light”;
src: url({{ “Afrah-Light.woff2” | asset_url }}) format(“woff2”);

The font, Afrah Light, does not show as an option to select in the dropdown menu of my site. Can someone please help me with this? Thank you!

1 Like
2

Hi @thestrandedshop

Please try the solution provided in the video

3

Hi @made4Uo - Thank you for your reply. I have started this process from your video and have added the font file and code to the theme.liquid file, but from what I understand in your video, you have to highlight everywhere you want to update the font and add that to the code? I’d rather make the custom font an option for all h2s for example. Is that possible?

4

@thestrandedshop ,

You can try to highlight if you want to apply the font to an specific code, but you can also use the code below as reference if you want h2.

  1. From your Admin Page, click Online Store > Themes >Actions > Edit code
  2. In the Asset folder, open the base.css
  3. Paste the code below at the very bottom of the file.
h2 {
font-family: "My font" !important;
}