Custom font - DAWN Theme

Store Design
,
1

Hello, trying to customize Dawn version 7.0.1
and I’ve tried many solutions for Dawn theme, but nothing works on my end.
I want to add a custom font basically_a_sans_serif

Website URL - https://shop.mriya.nyc/password
Pass - seethu

Thanks

2

Hi there,

I have an article about custom fonts here https://roartheme.co/blogs/beyours/add-custom-fonts-to-your-shopify-theme

The article is for Be Yours theme. However, Be Yours was built based on Dawn, so you can also refer to it. :grinning_face:

I hope this helps.

Regards.

3

Hi @artemmriya ,

To use a custom font you will have to upload your font file and do some code change.

Step 1: Upload your font

  1. Go to Online Store > Actions > Edit Code
  2. Find the folder Asset > Add a new asset
  3. Select file and click Upload file
![Screenshot 2022-10-13 151847.png|1272x880](upload://4qtZRpaNczJyDLOnvsNvWLakfPL.png)

Step 2: Applying the custom font

  1. Locate Assets > base.css
  2. Add the code below to the bottom of this file, replacing the elements specified in point 3:
@font-face {
    font-family: "Font name";
    src: url({{ "Filename" | asset_url }}) format("Format");
}
  • Replace:
    • “Font name” => Your font name - include quotation if name is longer than 1 word
    • “Filename” => File name quoted exactly as listed (e.g. san_serif.ttf)
    • “Format” => The format of the font (woff", “woff2”, “truetype”, “opentype”, “embedded-opentype” or"svg)

Hope this is helpful, best of luck!

Best regards,

Layoutbase - Homepage & Blog Page-builder

4

Added font as an asset

download.png
download.png1086×610 90.3 KB

@font-face {
font-family: “BasicallyASansSerif-Regular”;
src: url({{ “BasicallyASansSerif-Regular.woff2” | https://cdn.shopify.com/s/files/1/0615/6599/3143/files/BasicallyASansSerif-Regular.woff2?v=1665135016 }}) format(“woff2”);
}

Didn’t work :disappointed_face: Please recheck if i entered code correctly

5

Hi @Artemmriya

This is PageFly - Advanced Page Builder. I would love to give you some recommendations

You can try add

@font-face {

font-family: ‘BasicallyASansSerif-Regular’;

src: url(‘https://cdn.shopify.com/s/files/1/0615/6599/3143/files/BasicallyASansSerif-Regular.woff2?v=1665135016’) format(‘woff2’), url(‘https://cdn.shopify.com/s/files/1/0615/6599/3143/files/BasicallyASansSerif-Regular.woff2?v=1665135016’) format(‘woff’);

}

Hope my solution works perfectly for you!

Best Regards;

PageFly

6

nope :disappointed_face: nothing

7

I’ve used the following app to add a custom font; https://apps.shopify.com/fontify-change-customize-font-for-your-store?locale=nl. It’s free of charge and easy to use.

8

Hi @artemmriya ,

Please try copy/paste below:

@font-face {
font-family: "BasicallyASansSerif-Regular";
src: url({{ "BasicallyASansSerif-Regular.woff2" | asset_url }}) format("woff2");
}
9

11.png
11.png2398×1242 469 KB

Didn’t work :disappointed_face:

10

Hello @artemmriya

This guide will be helpful to you; please refer to it -

https://www.oscprofessionals.com/blog/how-to-add-and-edit-a-custom-fonts-to-your-shopify-store/

11

You should be move code on top of base.css

@font-face {
font-family: "BasicallyASansSerif-Regular";
src: url("BasicallyASansSerif-Regular.woff2") format("woff2");
}

Hope can help you.

12

I’ve added the following to my base.css file, but I am having no luck. Is it obvious what I’ve doing wrong?

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

h1,h2,h3,h4,h5,h6,.headline,.subtitle {font-family: ‘TekoBold’!important;}