Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Isolated styled-components with @font-face

I'm using https://github.com/styled-components/styled-components.

I'm trying to work out the best strategy for components that require @font-face. I want to make sure each component is independent of its context, so I'm defining font-family styles on each them. But if I use injectGlobal in multiple components, I get multiple @font-face rules for the same font.

Should I just define the @font-face rules in my ThemeProvider entry-point component and live with the fact that the desired font might not be loaded by the browser?

like image 211
Aaron Mc Adam Avatar asked Mar 08 '17 15:03

Aaron Mc Adam


People also ask

How do I add font face to styled-components?

We'll call this file fontStyles. js and place it in the src/ file of our React app. The global style contains the font-face declaration and looks something like this: import { createGlobalStyle } from "styled-components"; import RobotoWoff from "./fonts/roboto-condensed-v19-latin-regular.

Is styled-components deprecated?

As of styled-components v4 the withComponent API is now a candidate for deprecation. In all likelihood, you probably want to use the new "as" prop to simply switch what element/component being rendered since the withComponent API is destructive toward styles if the lowest-wrapped component is a StyledComponent.


2 Answers

That's exactly why we made injectGlobal. If you take a look at our docs they say:

We do not encourage the use of this. Use once per app at most, contained in a single file. This is an escape hatch. Only use it for the rare @font-face definition or body styling.

So what I'd do is create a JS file called global-styles.js which contains this code:

// global-styles.js

import { injectGlobal } from 'styled-components';

injectGlobal`
  @font-face {
     font-family: 'My custom family';
     src: url('my-source.ttf');
  }
`

As you can see, all we do here is inject some global styling-in this case @font-face. The last thing necessary to make this work is to import this file in your main entry point:

// index.js

import './global-styles.js'

// More stuff here like ReactDOM.render(...)

This will mean your font-face is only injected once, but still all of your components have access to it with font-family: 'My custom family'!

Doing it this way will give you a flash-of-invisible-text (FOIT), but that has nothing to do with styled-components-it'd be the same if you were using vanilla CSS. To get rid of the FOIT requires a more advanced font loading strategy rather than just @font-faceing.

Since this has nothing to do with styled-components, I highly recommend watching these two Front End Center episodes to learn more about how to best do this: "Crafting Web Font Fallbacks" and "The Fastest Webfont Loader in the West"!

like image 85
mxstbr Avatar answered Sep 20 '22 00:09

mxstbr


And on the other side of the same coin in Chrome:

do not use @font-face inside injectGlobal if using e.g. react-router. You will get re-paint of all of you app on each newly loaded route. And this is why: enter image description here

Same font-files downloaded on each new route. As soon as you include font-face in a separate .css file - problem solves as stated in the last comment in this github issue.

like image 42
Serge Nikolaev Avatar answered Sep 22 '22 00:09

Serge Nikolaev