Font styles aren't working

krainboltgreene commented 7 years ago

Here's the DOM node:

<h1 data-component="Heading" data-kind="page" class="ff-'Handlee'__cursive">Lacqueristas</h1>

Here's the styling sheet per Chrome:

element.style {
}
@media (min-width: 550px)
h1 {
  font-size: 5.0rem;
}
h1 {
  font-size: 4.0rem;
  line-height: 1.2;
  letter-spacing: -.1rem;
}
h1, h2, h3, h4, h5, h6 {
  margin-top: 0;
  margin-bottom: 2rem;
  font-weight: 300;
}
h1 {
  font-size: 2em;
  margin: 0.67em 0;
}

Here's the style object:

const headingsStyle = {
  page: {fontFamily: "'Handlee', cursive"},
}

Here's the static CSS generated server side:

.ff-'Handlee'__cursive {
  font-family: 'Handlee', cursive
}

lachlanjc commented 7 years ago

@krainboltgreene While it is definitely a bug in cxs to not remove those apostrophes, since the name is just one word, you should be able to remove the inner quotes in your original object and get it working :+1:

krainboltgreene commented 7 years ago

Sadly I have another font that is two words :(

jxnblk commented 7 years ago

This should no longer be an issue in the latest version

cxs-css / cxs

Font styles aren't working #55