Why isn't my custom font displaying on the DawnDawn version 4.0.0 theme?

Store Design
1

Hi,

I am using the Dawn Dawn version 4.0.0 theme. I have uploaded my two font files into /assets and have added the following code into the bottom of base.css but it is not pulling through:

@font-face {
font-family: ‘Wished’;
src: url(‘{{ ‘Wished.otf?’ | asset_url }}’);
src: url(‘{{ ‘Wished.otf??#iefix’ | asset_url }}’) format(‘opentype’),
font-weight: normal;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: antialiased;
}

@font-face {
font-family: ‘WishedTwo’;
src: url(‘{{ ‘WishedTwo.otf?’ | asset_url }}’);
src: url(‘{{ ‘WishedTwo.otf??#iefix’ | asset_url }}’) format(‘opentype’),
font-weight: normal;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: antialiased;
}

Can anyone advise?

2

@sinfieldlaura

  1. Upload the font files in the Asset folder.

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

@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

Hi, thank you for coming back to me. I just tried it though and it’s not working for me, perhaps the brackets are wrong?

@media screen and (min-width: 749px) {
.grid–peek .grid__item {
padding-left: var(–grid-mobile-horizontal-spacing);
}
}

.product-grid .grid__item {
padding-bottom: var(–grid-mobile-vertical-spacing);
}

@media screen and (min-width: 750px) {
.product-grid .grid__item {
padding-bottom: var(–grid-desktop-vertical-spacing);
}
}
}
@font-face {
font-family: ‘Wished’;
src: url(“Wished.woff2”) format(“woff2”),
url(“Wished.woff”) format(“woff”),
url(“Wished.otf”) format(“opentype”);
font-weight: normal;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: antialiased;
}

@font-face {
font-family: ‘WishedTwo’;
src: url(“WishedTwo.woff2”) format(“woff2”),
url(“WishedTwo.woff”) format(“woff”),
url(“WishedTwo.otf”) format(“opentype”);
font-weight: normal;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: antialiased;
}