Solved

How can I successfully add custom fonts to Dawn 6.0.2 theme?

cars_and_planes
Tourist
10 0 5

howdy,

 

theme: Dawn 6.0.2

 

I'm trying to add fonts for custom branding. I've added to assets .woff and .woff2

 

I've added font-face code to the bottom of the base.css which looks like this:

 

@font-face {font-family: "Jam Pact V1";
src: url("bb567dfaef81d336d330d92e38a4b0e4.eot"); /* IE9*/
src: url("bb567dfaef81d336d330d92e38a4b0e4.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */
url("bb567dfaef81d336d330d92e38a4b0e4.woff2") format("woff2"), /* chrome、firefox */
url("bb567dfaef81d336d330d92e38a4b0e4.woff") format("woff"), /* chrome、firefox */
url("bb567dfaef81d336d330d92e38a4b0e4.ttf") format("truetype"), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
url("bb567dfaef81d336d330d92e38a4b0e4.svg#Jam Pact V1") format("svg"); /* iOS 4.1- */
}

 

I'm not able to pull any fonts up in the dropdown. 

 

Do I need to write extra code?

 

what am I missing?

 

thank you.

 

 

Accepted Solution (1)

made4Uo
Shopify Partner
3821 716 1151

This is an accepted solution.

Hi @cars_and_planes,

 

Please follow the video tutorial below.

If this fixed your issue Likes and Accept as Solution is highly appreciated. Coffee tips fuels my dedication.
Get EXPERIENCED Shopify developers at affordable rates—visit Made4Uo.com for quick quote!
Do not lost your Shopify store! Get FREE trial with ✔️ Rewind Backup: Automatic, reliable, stress-free

View solution in original post

Replies 20 (20)

made4Uo
Shopify Partner
3821 716 1151

This is an accepted solution.

Hi @cars_and_planes,

 

Please follow the video tutorial below.

If this fixed your issue Likes and Accept as Solution is highly appreciated. Coffee tips fuels my dedication.
Get EXPERIENCED Shopify developers at affordable rates—visit Made4Uo.com for quick quote!
Do not lost your Shopify store! Get FREE trial with ✔️ Rewind Backup: Automatic, reliable, stress-free
cars_and_planes
Tourist
10 0 5

Finally had time to deal with this: it worked! Thank you very much!

 

Question though: I can't really make the font appear in the dropdown under the theme edit-->typography, only through the code, correct?

 

made4Uo
Shopify Partner
3821 716 1151

@cars_and_planes 

No, you cannot unfortunately since it is a custom font

If this fixed your issue Likes and Accept as Solution is highly appreciated. Coffee tips fuels my dedication.
Get EXPERIENCED Shopify developers at affordable rates—visit Made4Uo.com for quick quote!
Do not lost your Shopify store! Get FREE trial with ✔️ Rewind Backup: Automatic, reliable, stress-free
cars_and_planes
Tourist
10 0 5

Hi @made4Uo, I followed your tutorial and the site looks correct when I pull it up but on my computer only. 

 

However, when I share it with someone, it doesn't work.

 

Does it have something to do with the fact that I haven't connected it to the intended domain yet?

made4Uo
Shopify Partner
3821 716 1151

Hi @cars_and_planes 

 

The font might not be available with other browsers

If this fixed your issue Likes and Accept as Solution is highly appreciated. Coffee tips fuels my dedication.
Get EXPERIENCED Shopify developers at affordable rates—visit Made4Uo.com for quick quote!
Do not lost your Shopify store! Get FREE trial with ✔️ Rewind Backup: Automatic, reliable, stress-free
cars_and_planes
Tourist
10 0 5

Any other suggestions? Because I used 3 different fonts and none of them registered. I suspect this is not it.

KetanKumar
Shopify Partner
36855 3637 11980

@cars_and_planes 

can you please confirm did you added all custom font all font type for example TTF, OTF, WOFF, WOFF2, SVG

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
cars_and_planes
Tourist
10 0 5

@KetanKumar I only uploaded WOFF2 into my assets. 

KetanKumar
Shopify Partner
36855 3637 11980

@cars_and_planes 

oh sorry, please upload all this TTF, OTF, WOFF, WOFF2, SVG

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
cars_and_planes
Tourist
10 0 5

@KetanKumar okay, I definitely will (later) and update how it went and if THAT was the problem here. Thanks a lot!

KetanKumar
Shopify Partner
36855 3637 11980

@cars_and_planes 

yes, please upload and let me know if any issue 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
cars_and_planes
Tourist
10 0 5

@KetanKumar 

I uploaded WOFF and SVG. I couldn't find OTF for the font in question. I've got TTF but that file type cannot be uploaded into Assets - they are not selectable. Uploading WOFF,  WOFF2 and SVG did not solve my problem.

 

Here is the site in progress:https://decorate-your-car.myshopify.com/?_ab=0&_fd=0&_sc=1

This is what I see on my screen though (and this is what I am trying to accomplish so that it can be seen on anybody's screen):

site goal.png

 

One of the fonts that I am trying to feature on my home page prominently is called Former Airline.

This is the code that I am using in base.css

 

There is another font that I want to use in the footer and on product pages, but for now, I just want to. figure how this works.

 

/*Home Page*/
#Banner-template--15019049353261__image_banner > div.banner__content.banner__content--bottom-center.page-width > div > h2 {
font-family: "Former Airline";
color: #ffffff;
}

#shopify-section-template--15019049353261__rich_text > div > div > div > div > h2 {
font-family: "Former Airline";
color: #0e6c52;
}

#shopify-section-template--15019049353261__featured_collection > div > div > div > h2 {
font-family: "Former Airline";
color: #0e6c52;
}

 

This is what I wrote in the theme.liquid file: 

 

@font-face {
font-family: "Former Airline";
src: url{{("Former Airline V2.woff2" | asset_url )}} format("woff2");
}

 

What did I do wrong here?

KetanKumar
Shopify Partner
36855 3637 11980

@cars_and_planes 

Sorry you are facing this issue, it would be my pleasure to help you.

Welcome to the Shopify community!😊
Thanks for your good question.

Please share your site URL,
I will check out the issue and provide you a solution here.

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
redsmithgs
Tourist
3 0 3

Good day! I'm having the same issue and really have tried everything, but now the website is just looking weird. 

KetanKumar
Shopify Partner
36855 3637 11980

@redsmithgs 

if have issue solved site issue please send url

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
redsmithgs
Tourist
3 0 3

Still having the same issue. I've tried several options and now I'm thinking of using the Fontify app, since it's not working. 

KetanKumar
Shopify Partner
36855 3637 11980

@redsmithgs 

can you please send store url

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing

faisalxe
Shopify Partner
17 0 4

 

Hi, I have tried to make it much easier.

 

1- Create a section with the name of "custom-font"

2- Replace below code with it.

{% if section.settings.enable_custom-font %}

<style>

    @font-face {

  font-family: '{{section.settings.name-font}}';

  src: url({{ section.settings.custom-font }}) format('woff2');

 

}

 

h1, h2, h3, h4, h5, h6,p,a,span,body,ul,li,small,div{

font-family: '{{section.settings.name-font}}' !important;

 

}

</style>

      {% endif %}

{% schema %}

  {

    "name": "Custom Font",

    "settings": [

      {

        "type":"checkbox",

        "id":"enable_custom-font",

        "label":"Enable Custom Font Link",

        "default":false

      },

      {

        "type":"text",

        "id":"custom-font",

        "label":"Add Custom Font Link",

        "info":"Upload font file in woff2 format in shopify files"

      },

      {

        "type":"text",

        "id":"name-font",

        "label":"Custom Font Name"

      }

    ]

  }

{% endschema %}

 

3- Then you go to the file layout/theme.liquid and call this section there by this code "{% section 'custom-font' %}"

4- Now upload your desired font having woff2 extension into shopify files area from settings.

5- Now copy uploaded font link and click on "Online Store" from dashboard and then click on customize. At very top of customizer you will see "Custom Font" section paste the font link and enable this feature by writing name for new font and that is it. Now you don't need to do coding work again and again. You can change font so easily whenever you want and it won't disturb shopify default settings.

 
Confused? Busy? Get the solution you need faisalmahmood56@gmail.com
or buy me a coffee on Coffee
Poothambi
Visitor
2 0 0

Hey, thanks for this. It worked! However, I'm unable to see the changes on my password protected page. Can you please help me out in changing the custom font for all pages throughout my website?

MRamzan
Shopify Partner
165 1 21

You can add custom fonts. Here is the solution.

Fonts will reflect in your settings.

 

Hire Me:

WhatsApp: +91-9145985880
Email: mohdramzaan112@gmail.com
Skype: mohdramzaan112