0

Why is it that monospace fonts on Google Fonts don't work on JSFiddle? Only sans-serif and serif fonts seem to work.

johnjullies
  • 745
  • 1
  • 8
  • 22
  • Interesting question, but people may be more receptive if you were to post an example along with your question, such as http://jsfiddle.net/3Lh2gbqz/ – Jwashton Aug 09 '15 at 19:01
  • 1
    Or, even better, a fiddle that actually works. https://jsfiddle.net/MrLister/3Lh2gbqz/2/ – Mr Lister Aug 09 '15 at 21:10
  • @mr-lister Very nice to see it working, but I'm not sure I see why the other failed. Is it a limitation of JSFiddle's External Resources tool, and if so why? I'm not really seeing any meaningful difference between the two other than the way the font is linked/imported. (btw, thanks for reminding me of @import) – Jwashton Aug 09 '15 at 21:54
  • @Jwashton If you look at your externals resources section, you might notice it looks a bit strange. I think you pasted the complete `` tag instead only the the CSS URL. Though, even if the URLs were correct entered, JSFiddle wouldn't load them. When I do so, I see errors like this in the JS console: `Refused to execute script from 'http://fonts.googleapis.com/css?family=Oxygen+Mono' because its MIME type ('text/css') is not executable, and strict MIME type checking is enabled.` For both fonts. Open Sans works here because it is installed on my system. – udondan Aug 10 '15 at 05:14
  • @Jwashton The "External Resources" tool does say it's for CSS, but that doesn't work properly. If you look in the resulting page source, you'll see that the CSS file is treated as a script; it is put inside a ` – Mr Lister Aug 10 '15 at 05:15
  • Does the following answer resolve the issue? – LCJ Jun 21 '17 at 21:32

1 Answers1

0

Importing the font as the first line in CSS section (as shown below) does the trick.

@import url(//fonts.googleapis.com/css?family=Cookie:400,700,300);

Take a look at

  1. Fiddle1
  2. Fiddle2
  3. Fiddle3
  4. Fiddle4

References

  1. How to import Google Web Font in CSS file?
LCJ
  • 22,196
  • 67
  • 260
  • 418