Why isn't my Adobe font working on Dawn 2.0 headings?

Shopify Discussion
1

Hi all,

I want to use an adobe font on my store.

I followed the instructions on the adobe website (https://help.outofthesandbox.com/hc/en-us/articles/360016052873-Adobe-Fonts) and it’s working on all of the body text, but not on the headings.

this is the code i have on my base.css:

p, h1, h2, h3, h4, h5, ol, li, ul { font-family: ‘aileron’ ; font-weight:300}

what am i missing here? why isn’t it working?

In the screen shot below you can see the the body text is in the correct font but the heading is not.

Shauletay_0-1643795005799.png
Shauletay_0-1643795005799.png997×240 16.5 KB

Thanks!

2

@Shauletay

Upload the font files in the Asset folder.

Then in the base.css file at the end. Paste the below

Then to assign it to another class using font-family: ‘FONT NAME’;

@font-face {
  font-family: 'FONT NAME';
  src: url("FILE NAME.woff2") format("woff2"),
       url("FILE NAME.woff") format("woff"),
       url("FILE NAME.otf") format("opentype");
  font-weight: normal;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: antialiased;
}
3

Sorry but it doesnt work

4

use this website to help convert to a web font

https://transfonter.org/

5

I recorded a step-by-step video for you

https://youtu.be/3votINJ2bR8

Steps

  1. Create your font kit in fonts.adobe.com/fonts

  2. Create a webfont kit.

  3. Name it.

  4. Copy The Adobe Font Snippet and copy it to your theme.liquid inside the tag.
    Line 41 looks like a nice for it.

  5. Open base.css. Scroll to bottom and copy-paste this there

/* Shopify Dawn Custom Adobe Fonts
   Make sure to add the Font snippet to theme.liquid
*/
:root {
  --font-body-family: "Helvetica", sans-serif !important;
  --font-heading-family: "Helvetica", sans-serif;
}

  1. Replace the “Helvetica” with your adobe font name.

  2. Save.

8 ) You can do fine tunings. Maybe you want the announcement bar to have the body font instead of heading font. Go to base.css again and use this

.announcement-bar__message.h5 {
    font-family: "Helvetica" !important;
}

…again replacing “Helvetica” with your Adobe Font name.

(These forum replies can’t be edited/improved. In case I missed something and can’t edit, here’s a constantly updating tutorial in my blog. I’ll will update it as people have more questions :slightly_smiling_face: )

Feel free to DM me for help.

6

If you already have some Adobe fonts working (body but not headings) you can just add this to your base.css and edit accordingly.

/* Shopify Dawn Custom Adobe Fonts
   Make sure to add the Font snippet to theme.liquid
*/
:root {
  --font-body-family: "Helvetica", sans-serif !important;
  --font-heading-family: "Helvetica", sans-serif;
}

Dawn theme uses these CSS Custom Properties we can take advantage of. It will smartly apply our fonts to all the different parts of the theme.