Why is Foundation media queries not working when i use a breakpoint name?

[mannclay]

  I have tested other JS components like accordions and they work fine. For some reason media queries are not working as expected. 

For example:
.header-first, .header-second { @include breakpoint(medium) { background: $cerulean; } }

compiles to the below where the name of the breakpoint is added but not the size of 640px as in the _settings.scss:

@media (min-width: medium) { .header .header-first, .header .header-second { background: #0098db;} }

I have tested that _settings.scss is working by customizing other components. I have also tested that the JS is working with:
console.log('Current: ' + Foundation.MediaQuery.current)

Any hints on what going on?

Originally posted by @mannclay in https://github.com/foundation/foundation-sites/discussions/12516

[L1quid]

I am having this issue with Javascript, too.

Unknown breakpoint "medium" passed to MediaQuery.next(). Ensure it is present in your Sass "$breakpoints" setting.

medium definitely exists as a breakpoint...

[L1quid]

Most likely you have an external font failing to load, and this seems to prevent Foundation from passing the breakpoints to Javascript via CSS font-family directive.