Better explanation for font-face

Hey guys,

I spent a few minutes trying to inject a custom font-face for the first time and thought that there is some scope for improvement in the docs. The only example on font-face I’ve found uses a relative path to a font inside ``, which suggests to a newbie like me that the paths are somehow magically resolved by webpack from the given string (like this is done in standard webpack-controlled css files). Despite such expectations, that magic path replacement does not seem to happen.

Instead, the code should look like this:

import { injectGlobal } from 'styled-components';
import MyFont from './MyFont.otf';

injectGlobal`
  @font-face {
    font-family: MyFont;
    src: url('${MyFont}') format('opentype');
  }
`

It should be probably also noted that webpack needs to have a special loader for the fonts, e.g.:

{
test: /\.(eot|svg|ttf|woff|woff2|otf)$/,
loader: 'file-loader',
}

Perhaps an explanation like the one above can also be useful for those who want to embed background images etc. (I suspect that they don’t resolve magically too).

Hope this helps! styled-components is an awesome idea!

[gabeweaver]

@mxstbr I just burned several hours on this same issue. I sort of understand not wanting to promote webpack, but a lot of people use styled-components with Webpack and intentionally not adding examples to some sort of FAQ results in a poor user experience.

The same argument could be said for not promoting TypeScript…or Flow…yet there is explicit documentation and examples on using styled-components with them.

I’m happy to write the docs - because I’m thankful for you and all the work you’ve done here. I politely ask you to reconsider inclusion of this issue in the docs somewhere, primarily because enabling end-developers to ship value more quickly, with less waste should be our first and foremost goal. I don’t want to have to sift through stack overflow and github issues to try and find answers to a common scenario.

Overall, converting from css-modules and post-css to styled-components has been a breeze up until the font issue 😃

[mxstbr]

I like this! We probably won’t add this to the docs, since we don’t want to promote anything webpack specific. (since nothing about styled-components is webpack specific)

That being said, this is a great reference issue that people will find. Thank you!