Custom font - DAWN Theme

artemmriya
New Member
4 0 0

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

Replies 11 (11)

Peter_D_
Shopify Partner
6 0 0

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.

Peter D. | RoarTheme
Check out our Be Yours - The first Shopify OS 2.0 Theme built based on Dawn.
You can reach us through our website https://RoarTheme.Co

layoutbase
Pathfinder
111 13 24

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

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

Please let us know if you find it helpful by giving us a LIKE and Mark as Solution. Layoutbase is a leading Shopify page builder. Give us a try!
artemmriya
New Member
4 0 0

Added font as an asset  download.png

@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
Pathfinder
111 13 24

Hi @artemmriya,

Please try copy/paste below:

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

 

Please let us know if you find it helpful by giving us a LIKE and Mark as Solution. Layoutbase is a leading Shopify page builder. Give us a try!
artemmriya
New Member
4 0 0

11.png

 

 

Didn't work 😞

EBOOST
Shopify Partner
574 172 179

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.

Hope can help

If you find my reply helpful, please hit Like and Mark as Solution

EBOOST
charlessmid
Visitor
1 0 0

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
Shopify Partner
7865 1785 3042

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



banned
artemmriya
New Member
4 0 0

nope 😞 nothing

mmjjanssen
Shopify Partner
15 2 3

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
Shopify Partner
15750 2357 3059

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/

Get pass your Store Core Web Vital Free Speed Optimization Audit, Chat on WhatsApp | Skype : oscprofessionals-87 | Email: pallavi@oscprofessionals.com | Custom Pricing Wholesale App : Free | Hire us | Guaranteed Site Speed Optimization | Website Free Audit | Shopify Theme Customization | Build Shopify Private App | Shopify SEO | Digital Marketing