Improve CSS structure + fallback fonts

[Wolfr]

So, I noticed that we are not loading the right font on the detail pages. I already improved this by setting a fallback font, but we should fix how Overpass (the correct font for the heading) is not loaded on the detail pages.

I can't figure it out, it's something with the Google fonts plugin and the URL request being ./, which I guess then leads to an error on detail page routes.

@font-face {
--
  | font-family: 'Overpass';
  | font-style: normal;
  | font-weight: 400;
  | src: local('Overpass Regular'), local('Overpass-Regular'), url('./qFdH35WCmI96Ajtm81GrU9vyww.woff2') format('woff2');
  | unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
  | }

Signed-off-by: Wolfr johan.ronsse@gmail.com

[Wolfr]

FYI, this is what it looks like on Chrome for Mac right now: