Custom font - DAWN Theme

[artemmriya]

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

[Peter_D_]

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. 😀

I hope this helps.

Regards.

[layoutbase]

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

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

[artemmriya]

Added font as an asset  

@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=166513501... }}) format("woff2");
}

Didn't work 😞 Please recheck if i entered code correctly

[layoutbase]

Hi @artemmriya,

Please try copy/paste below:

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

[artemmriya]

Didn't work 😞

[EBOOST]

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.

[charlessmid]

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;}

[PageFly-Victor]

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=166513501...') format('woff2'),         url('https://cdn.shopify.com/s/files/1/0615/6599/3143/files/BasicallyASansSerif-Regular.woff2?v=166513501...') format('woff');

}

Hope my solution works perfectly for you!

Best Regards;

PageFly

[artemmriya]

nope 😞 nothing

[mmjjanssen]

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.

[oscprofessional]

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/