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.

Custom HTML for iframe (was 'Using Typekit')

See original GitHub issue

At work we use typekit to load fonts for our components. They are loaded using the simple Typekit embed code (as seen here: https://helpx.adobe.com/typekit/using/embed-codes.html).

The embed code is two script tags like the following:

<script src="https://use.typekit.net/xxxyyy.js"></script>
<script>try{ Typekit.load(); }catch(e){}</script>

I’m not sure of the best route for adding these script tags in to React Storybook, and wondered if anyone had any ideas!

Would React Storybook be interested in supporting customising the HTML of the iframe to enable the script tags to be added. This would also be useful for loading some external CSS that our components currently depend on.

Issue Analytics

State:
Created 7 years ago
Comments:7 (5 by maintainers)

Top GitHub Comments

4reactions

arunodacommented, Apr 6, 2016

Yes. This would be something great. We could have a file in the .storybook directory as base.html and use it in the iframe.

2reactions

jeef3commented, Apr 6, 2016

Also useful for any other CDN links, e.g. Font Awesome.

Top Results From Across the Web

Custom HTML for iframe (was 'Using Typekit') #61 - GitHub

At work we use typekit to load fonts for our components. They are loaded using the simple Typekit embed code (as seen here:...

Using CSS in iframe / Adobe fonts - Stack Overflow

I am trying to use Adobe fonts in Wix. As other posts have noted, you can't simply upload those fonts. Instead, you have...

Embed codes - Adobe Support

The embed code is how the web fonts are loaded into your website in the browser or into an HTML email in the...

Using The HTML Tag To Create Inline Frames: Here's How »

A complete step-by-step tutorial on creating frames for your web page. Includes plenty of examples and demonstrates some of the popular techniques for ......

Story rendering - Storybook

Or you can load custom head-tag JavaScript: --> <script src="https://use.typekit.net/xxxyyy.js"></script> <script>try{ Typekit.load(); } catch(e){ }</script>.