Original CSS-

@media(min-width:720px) {
  .class {
    font-family: "EB Garamond", serif;
  }
}

This would render as-

@media(min-width:720px) {
  .class {
    font-family: "EB Garamond", serif;
  }
  .eb-garamond @media(min-width:720px) {
    font-family: "EB Garamond", serif;
  }
}

This isn't correct CSS, so fonts being set inside a media query weren't being set correctly when they loaded. Correct CSS would be-

@media(min-width:720px) {
  .class {
    font-family: "EB Garamond", serif;
  }
  .eb-garamond .class{
    font-family: "EB Garamond", serif;
  }
}

Patch filters out selectors that start with "@media" and looks for the selector inside.

CommentFileSizeAuthor
#2 filter-media-queries-2553445-1.patch816 bytesjamessw
Support from Acquia helps fund testing for Drupal Acquia logo

Comments

jamessw created an issue. See original summary.

jamessw’s picture

Issue summary: View changes
FileSize
816 bytes
mikeytown2’s picture

Status: Active » Needs review
mikeytown2’s picture

Status: Needs review » Fixed

Thanks for the patch! It's been committed. Also added a couple of inline comments.

  • mikeytown2 committed 834cfab on 7.x-2.x authored by jamessw
    Issue #2553445 by jamessw: CSS selectors for fonts not generated...

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.