question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Suggested way to inject font family?

See original GitHub issue

Hi, this is strictly a usage question that I think deserves an official answer.

injectGlobal has been deprecated, you can use Global now, but it is limited to the render phase.

If I have an Icon component (that I want to export so that my library consumers can use it) and I use Global to inject the font-face definition, I will end up with several css-global style elements, because the Icon component is used several times.

What if I want to inject it just once at component import/definition time?

Issue Analytics

  • State:closed
  • Created 5 years ago
  • Comments:5 (4 by maintainers)

github_iconTop GitHub Comments

1reaction
Andaristcommented, Dec 10, 2018

You can still use emotion package in your library and call injectGlobal from there. @emotion/core is on purpose react-only package, everything is associated with components, contexified etc.

1reaction
Andaristcommented, Dec 10, 2018

Can’t you recommend to people using your Provider (which would use Global inside it) at the top of their application?

Read more comments on GitHub >

github_iconTop Results From Across the Web

The Easy Way to Add Fonts to Your Website (Including ...
Step 3: Upload the font files to your website ... Using your FTP or file manager, upload all the font files found within...
Read more >
The Best Font Loading Strategies and How to Execute Them
Next, we want to load fonts via JavaScript. We'll inject a script into the <head> section since the code footprint is small, and...
Read more >
How To Load and Use Custom Fonts with CSS | DigitalOcean
In the body selector, add a font-family property, and make its value a comma-separated list of fonts known as a font stack: styles.css....
Read more >
Best practices for fonts - web.dev
Choose an appropriate font-display strategy # · If performance is a top priority: Use font-display: optional . · If displaying text quickly is...
Read more >
How to Setup Custom Fonts with CSS & @font-face
Step 1: Get all the font files you need for cross-browser support; Step 2: Add the font files to your project; Step 3:...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found