Is @font-face working?

[nijk]

I'm probably being daft but I can't get @font-face rules working in Stylefy. Can you point to a working example?

[nijk]

I see this in <style id="_stylefy-constants-styles_>

@font-face {
  font-family: OpenSans;
  src: url('font/OpenSans-Regular.ttf') format('ttf');
}

body {
  font-size: 1.6rem;
  line-height: 1.5;
  color: #262626;
  font-family: OpenSans, "Helvetica Neue", Helvetica, Arial, sans-serif;
}

But the browser does not download the ttf file. When I access the URL http://localhost:8080/font/OpenSans-Regular.ttf the font is downloaded by the browser.

This might well be something obviously wrong with the styling but I can't see where the issue is. Any ideas?

[Jarzka]

I cannot see anything clearly wrong in your code.

There is a working example of using font-family with stylefy in the examples project: https://github.com/Jarzka/stylefy/blob/master/examples/src/stylefy/examples/styles.cljs

Can you try compiling the example project and, for example try to replace the used woff font with your own ttf font?

By the way, which browser are you using? Have you tried another browser?

[nijk]

Ok, so it seemed to be the .ttf font I was using. Google Chrome just didn't want to render the ttf. I've moved to woff & woff2 now.

[Jarzka]

Good to hear that the problem was solved by using woff. :)