react-helmet is a module for managing the DOM document head within React.
react-helmet is a module for managing the DOM document head within React.
Questions tagged [react-helmet]
252 questions
4
votes
2 answers
Twitter card meta tags work in index.html, not in React Helmet
I have used below React Helmet code in App.js for rending Twitter card meta.
{`xxxxx`}
user11661871
4
votes
1 answer
Facebook - Open Graph not detecting meta tags (Gatsby + Netlify)
I deployed a blog using Gatsby + Netlify. I am currently using react-helmet to populate the proper meta tags on each blog post.
For some reason Facebook Open Graph is not detecting the meta tags that belong to the blog and it is defaulting to use…
Carlo Teran
- 89
- 8
4
votes
1 answer
How to test dynamic page titles?
I'm using react-helmet and change the documents page title depending on some conditions.
How can I test that behaviour with react-testing-library?
I tried something like
const { debug } = render(
LongFlick
- 1,129
- 1
- 12
- 21
4
votes
1 answer
including external javascript in Gatsby using Helmet
I have this code in the index.js of layout folder:
(
<>
…
stijn.aerts
- 6,026
- 5
- 30
- 46
4
votes
1 answer
How to do meta tag and title unit test in React for react-helmet?
How to do unit test in enzyme for checking and <meta /> exist and its content ?
index.test.js
describe('<Helmet />', () => {
it('should render an <Helmet> tag', () => {
let wrapper = mount(
<IntlProvider locale='en'>
…</div>
<div class="grid ai-start jc-space-between fw-wrap">
<div class="grid gs4 fw-wrap tags ">
<a href="../../questions/tagged/javascript" class="post-tag grid--cell" title="show questions tagged 'javascript'" rel="tag">javascript</a>
<a href="../../questions/tagged/reactjs" class="post-tag grid--cell" title="show questions tagged 'reactjs'" rel="tag">reactjs</a>
<a href="../../questions/tagged/unit-testing" class="post-tag grid--cell" title="show questions tagged 'unit-testing'" rel="tag">unit-testing</a>
<a href="../../questions/tagged/enzyme" class="post-tag grid--cell" title="show questions tagged 'enzyme'" rel="tag">enzyme</a>
<a href="../../questions/tagged/react-helmet" class="post-tag grid--cell" title="show questions tagged 'react-helmet'" rel="tag">react-helmet</a>
</div>
<div class="started mt0">
<div class="s-user-card s-user-card">
<time class="s-user-card--time" datetime="asked Jun 22 '18 at 17:18">asked Jun 22 '18 at 17:18</time>
<a href="../../users/884521/mo" class="s-avatar s-avatar__32 s-user-card--avatar">
<img class="s-avatar--image" src="../../users/profiles/884521.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="Mo." />
</a>
<div class="s-user-card--info">
<a href="../../users/884521/mo" class="s-user-card--link">Mo.</a>
<ul class="s-user-card--awards">
<li class="s-user-card--rep" title="reputation score">26,306</li>
<li class="s-award-bling s-award-bling__gold" title="36 gold badges">36</li>
<li class="s-award-bling s-award-bling__silver" title="159 silver badges">159</li>
<li class="s-award-bling s-award-bling__bronze" title="225 bronze badges">225</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="mln24">
<div class="question-summary" id="question-summary-50473518">
<div class="statscontainer">
<div class="stats">
<div class="vote">
<div class="votes">
<span class="vote-count-post"><strong>4</strong></span>
<div class="viewcount">votes</div>
</div>
</div>
<div class="status ">
<strong>0</strong> answers
</div>
</div>
</div>
<div class="summary">
<h3><a href="../../questions/50473518/how-to-share-images-and-posts-to-fb-using-react" class="question-hyperlink">How to share images and posts to fb using react</a></h3>
<div class="excerpt">I am using react-helmet to display the meta og tags and react-snap to prerender the html pages. I was able to render the proper display with the image description and title when i shared it on slack, but if I share it on facebook, the page does not…</div>
<div class="grid ai-start jc-space-between fw-wrap">
<div class="grid gs4 fw-wrap tags ">
<a href="../../questions/tagged/reactjs" class="post-tag grid--cell" title="show questions tagged 'reactjs'" rel="tag">reactjs</a>
<a href="../../questions/tagged/share" class="post-tag grid--cell" title="show questions tagged 'share'" rel="tag">share</a>
<a href="../../questions/tagged/socialshare" class="post-tag grid--cell" title="show questions tagged 'socialshare'" rel="tag">socialshare</a>
<a href="../../questions/tagged/react-helmet" class="post-tag grid--cell" title="show questions tagged 'react-helmet'" rel="tag">react-helmet</a>
</div>
<div class="started mt0">
<div class="s-user-card s-user-card">
<time class="s-user-card--time" datetime="asked May 22 '18 at 17:34">asked May 22 '18 at 17:34</time>
<a href="../../users/8076132/jdip88" class="s-avatar s-avatar__32 s-user-card--avatar">
<img class="s-avatar--image" src="../../users/profiles/8076132.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="jdip88" />
</a>
<div class="s-user-card--info">
<a href="../../users/8076132/jdip88" class="s-user-card--link">jdip88</a>
<ul class="s-user-card--awards">
<li class="s-user-card--rep" title="reputation score">427</li>
<li class="s-award-bling s-award-bling__gold" title="2 gold badges">2</li>
<li class="s-award-bling s-award-bling__silver" title="9 silver badges">9</li>
<li class="s-award-bling s-award-bling__bronze" title="23 bronze badges">23</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="mln24">
<div class="question-summary" id="question-summary-48986229">
<div class="statscontainer">
<div class="stats">
<div class="vote">
<div class="votes">
<span class="vote-count-post"><strong>4</strong></span>
<div class="viewcount">votes</div>
</div>
</div>
<div class="status ">
<strong>0</strong> answers
</div>
</div>
</div>
<div class="summary">
<h3><a href="../../questions/48986229/how-to-create-seo-friendly-react-application-created-from-create-react-app" class="question-hyperlink">How to create SEO friendly react application created from create react app?</a></h3>
<div class="excerpt"><meta property="og:url" content="mysite.com/" />
<meta property="og:type" content= "article"/>
<meta property="og:title" content="content title" />
<meta property="og:description" content="content description" />
<meta property="og:image"…</div>
<div class="grid ai-start jc-space-between fw-wrap">
<div class="grid gs4 fw-wrap tags ">
<a href="../../questions/tagged/reactjs" class="post-tag grid--cell" title="show questions tagged 'reactjs'" rel="tag">reactjs</a>
<a href="../../questions/tagged/seo" class="post-tag grid--cell" title="show questions tagged 'seo'" rel="tag">seo</a>
<a href="../../questions/tagged/create-react-app" class="post-tag grid--cell" title="show questions tagged 'create-react-app'" rel="tag">create-react-app</a>
<a href="../../questions/tagged/react-helmet" class="post-tag grid--cell" title="show questions tagged 'react-helmet'" rel="tag">react-helmet</a>
</div>
<div class="started mt0">
<div class="s-user-card s-user-card">
<time class="s-user-card--time" datetime="asked Feb 26 '18 at 10:25">asked Feb 26 '18 at 10:25</time>
<a href="../../users/6717634/mandip-tharu" class="s-avatar s-avatar__32 s-user-card--avatar">
<img class="s-avatar--image" src="../../users/profiles/6717634.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="Mandip Tharu" />
</a>
<div class="s-user-card--info">
<a href="../../users/6717634/mandip-tharu" class="s-user-card--link">Mandip Tharu</a>
<ul class="s-user-card--awards">
<li class="s-user-card--rep" title="reputation score">41</li>
<li class="s-award-bling s-award-bling__silver" title="1 silver badges">1</li>
<li class="s-award-bling s-award-bling__bronze" title="7 bronze badges">7</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="mln24">
<div class="question-summary" id="question-summary-48747425">
<div class="statscontainer">
<div class="stats">
<div class="vote">
<div class="votes">
<span class="vote-count-post"><strong>4</strong></span>
<div class="viewcount">votes</div>
</div>
</div>
<div class="status ">
<strong>1</strong> answer
</div>
</div>
</div>
<div class="summary">
<h3><a href="../../questions/48747425/react-helmet-server-side-correct-setup" class="question-hyperlink">React helmet server side correct setup</a></h3>
<div class="excerpt">Helmet right now is returning empty strings on server. I am not sure if the documentation explains it really well and the existing issues are rarely of any help !
Issue -
`console.log('title', helmet.title.toString());
console.log('meta',…</div>
<div class="grid ai-start jc-space-between fw-wrap">
<div class="grid gs4 fw-wrap tags ">
<a href="../../questions/tagged/reactjs" class="post-tag grid--cell" title="show questions tagged 'reactjs'" rel="tag">reactjs</a>
<a href="../../questions/tagged/server-side-rendering" class="post-tag grid--cell" title="show questions tagged 'server-side-rendering'" rel="tag">server-side-rendering</a>
<a href="../../questions/tagged/react-helmet" class="post-tag grid--cell" title="show questions tagged 'react-helmet'" rel="tag">react-helmet</a>
</div>
<div class="started mt0">
<div class="s-user-card s-user-card">
<time class="s-user-card--time" datetime="asked Feb 12 '18 at 13:17">asked Feb 12 '18 at 13:17</time>
<a href="../../users/1096194/halfwebdev" class="s-avatar s-avatar__32 s-user-card--avatar">
<img class="s-avatar--image" src="../../users/profiles/1096194.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="HalfWebDev" />
</a>
<div class="s-user-card--info">
<a href="../../users/1096194/halfwebdev" class="s-user-card--link">HalfWebDev</a>
<ul class="s-user-card--awards">
<li class="s-user-card--rep" title="reputation score">7,022</li>
<li class="s-award-bling s-award-bling__gold" title="12 gold badges">12</li>
<li class="s-award-bling s-award-bling__silver" title="65 silver badges">65</li>
<li class="s-award-bling s-award-bling__bronze" title="103 bronze badges">103</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="mln24">
<div class="question-summary" id="question-summary-47915906">
<div class="statscontainer">
<div class="stats">
<div class="vote">
<div class="votes">
<span class="vote-count-post"><strong>4</strong></span>
<div class="viewcount">votes</div>
</div>
</div>
<div class="status answered-accepted">
<strong>1</strong> answer
</div>
</div>
</div>
<div class="summary">
<h3><a href="../../questions/47915906/display-title-with-react-helmet" class="question-hyperlink">Display title with React Helmet</a></h3>
<div class="excerpt">I'm using Gatsby's inclusion of react-helmet to display <title /> and <meta /> tags in the <head />. What I'd really like to do is send the same title to my global <Header /> component so the title is displayed in the actual text of the page as well…</div>
<div class="grid ai-start jc-space-between fw-wrap">
<div class="grid gs4 fw-wrap tags ">
<a href="../../questions/tagged/javascript" class="post-tag grid--cell" title="show questions tagged 'javascript'" rel="tag">javascript</a>
<a href="../../questions/tagged/reactjs" class="post-tag grid--cell" title="show questions tagged 'reactjs'" rel="tag">reactjs</a>
<a href="../../questions/tagged/react-router-v4" class="post-tag grid--cell" title="show questions tagged 'react-router-v4'" rel="tag">react-router-v4</a>
<a href="../../questions/tagged/gatsby" class="post-tag grid--cell" title="show questions tagged 'gatsby'" rel="tag">gatsby</a>
<a href="../../questions/tagged/react-helmet" class="post-tag grid--cell" title="show questions tagged 'react-helmet'" rel="tag">react-helmet</a>
</div>
<div class="started mt0">
<div class="s-user-card s-user-card">
<time class="s-user-card--time" datetime="asked Dec 20 '17 at 23:44">asked Dec 20 '17 at 23:44</time>
<a href="../../users/53653/typeoneerror" class="s-avatar s-avatar__32 s-user-card--avatar">
<img class="s-avatar--image" src="../../users/profiles/53653.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="typeoneerror" />
</a>
<div class="s-user-card--info">
<a href="../../users/53653/typeoneerror" class="s-user-card--link">typeoneerror</a>
<ul class="s-user-card--awards">
<li class="s-user-card--rep" title="reputation score">55,990</li>
<li class="s-award-bling s-award-bling__gold" title="32 gold badges">32</li>
<li class="s-award-bling s-award-bling__silver" title="132 silver badges">132</li>
<li class="s-award-bling s-award-bling__bronze" title="223 bronze badges">223</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="mln24">
<div class="question-summary" id="question-summary-46283473">
<div class="statscontainer">
<div class="stats">
<div class="vote">
<div class="votes">
<span class="vote-count-post"><strong>4</strong></span>
<div class="viewcount">votes</div>
</div>
</div>
<div class="status ">
<strong>0</strong> answers
</div>
</div>
</div>
<div class="summary">
<h3><a href="../../questions/46283473/open-graph-crawler-not-waiting-for-react-component-mounting" class="question-hyperlink">Open Graph crawler not waiting for React component mounting</a></h3>
<div class="excerpt">The issue we are facing has to do with the meta tags being populated on individual pages. This is a common problem with single-page sites, but is exacerbated in our case due to the face that we do server side rendering of a chunk of our site for the…</div>
<div class="grid ai-start jc-space-between fw-wrap">
<div class="grid gs4 fw-wrap tags ">
<a href="../../questions/tagged/reactjs" class="post-tag grid--cell" title="show questions tagged 'reactjs'" rel="tag">reactjs</a>
<a href="../../questions/tagged/facebook-opengraph" class="post-tag grid--cell" title="show questions tagged 'facebook-opengraph'" rel="tag">facebook-opengraph</a>
<a href="../../questions/tagged/react-helmet" class="post-tag grid--cell" title="show questions tagged 'react-helmet'" rel="tag">react-helmet</a>
</div>
<div class="started mt0">
<div class="s-user-card s-user-card">
<time class="s-user-card--time" datetime="asked Sep 18 '17 at 15:50">asked Sep 18 '17 at 15:50</time>
<a href="../../users/1480036/stoicjester" class="s-avatar s-avatar__32 s-user-card--avatar">
<img class="s-avatar--image" src="../../users/profiles/1480036.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="StoicJester" />
</a>
<div class="s-user-card--info">
<a href="../../users/1480036/stoicjester" class="s-user-card--link">StoicJester</a>
<ul class="s-user-card--awards">
<li class="s-user-card--rep" title="reputation score">364</li>
<li class="s-award-bling s-award-bling__silver" title="2 silver badges">2</li>
<li class="s-award-bling s-award-bling__bronze" title="12 bronze badges">12</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="mln24">
<div class="question-summary" id="question-summary-45822925">
<div class="statscontainer">
<div class="stats">
<div class="vote">
<div class="votes">
<span class="vote-count-post"><strong>4</strong></span>
<div class="viewcount">votes</div>
</div>
</div>
<div class="status answered-accepted">
<strong>1</strong> answer
</div>
</div>
</div>
<div class="summary">
<h3><a href="../../questions/45822925/react-helmet-outputting-empty-strings-on-server-side" class="question-hyperlink">react-helmet outputting empty strings on server-side</a></h3>
<div class="excerpt">I am using react-helmet and on the client all is good in the inspect window and the tags are being outputted correctly. However, when I boot up in production and the SSR kicks in the tags aren't shown in the source and I'm getting no errors at…</div>
<div class="grid ai-start jc-space-between fw-wrap">
<div class="grid gs4 fw-wrap tags ">
<a href="../../questions/tagged/reactjs" class="post-tag grid--cell" title="show questions tagged 'reactjs'" rel="tag">reactjs</a>
<a href="../../questions/tagged/react-router" class="post-tag grid--cell" title="show questions tagged 'react-router'" rel="tag">react-router</a>
<a href="../../questions/tagged/server-side-rendering" class="post-tag grid--cell" title="show questions tagged 'server-side-rendering'" rel="tag">server-side-rendering</a>
<a href="../../questions/tagged/react-helmet" class="post-tag grid--cell" title="show questions tagged 'react-helmet'" rel="tag">react-helmet</a>
</div>
<div class="started mt0">
<div class="s-user-card s-user-card">
<time class="s-user-card--time" datetime="asked Aug 22 '17 at 16:35">asked Aug 22 '17 at 16:35</time>
<a href="../../users/6505931/luke-smetham" class="s-avatar s-avatar__32 s-user-card--avatar">
<img class="s-avatar--image" src="../../users/profiles/6505931.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="Luke Smetham" />
</a>
<div class="s-user-card--info">
<a href="../../users/6505931/luke-smetham" class="s-user-card--link">Luke Smetham</a>
<ul class="s-user-card--awards">
<li class="s-user-card--rep" title="reputation score">163</li>
<li class="s-award-bling s-award-bling__silver" title="2 silver badges">2</li>
<li class="s-award-bling s-award-bling__bronze" title="9 bronze badges">9</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="mln24">
<div class="question-summary" id="question-summary-75650065">
<div class="statscontainer">
<div class="stats">
<div class="vote">
<div class="votes">
<span class="vote-count-post"><strong>3</strong></span>
<div class="viewcount">votes</div>
</div>
</div>
<div class="status ">
<strong>0</strong> answers
</div>
</div>
</div>
<div class="summary">
<h3><a href="../../questions/75650065/react-helmet-async-returns-empty-string-if-am-fetching-data-from-an-api" class="question-hyperlink">react-helmet-async returns empty string if am fetching data from an api</a></h3>
<div class="excerpt">am fetching data from an api and I want some of whose data's content to be in meta tags inside of Helmet(react-helmet-async), however it returns empty string no matter what. if I statically write some text, its okay, its working on title too, but…</div>
<div class="grid ai-start jc-space-between fw-wrap">
<div class="grid gs4 fw-wrap tags ">
<a href="../../questions/tagged/html" class="post-tag grid--cell" title="show questions tagged 'html'" rel="tag">html</a>
<a href="../../questions/tagged/reactjs" class="post-tag grid--cell" title="show questions tagged 'reactjs'" rel="tag">reactjs</a>
<a href="../../questions/tagged/meta-tags" class="post-tag grid--cell" title="show questions tagged 'meta-tags'" rel="tag">meta-tags</a>
<a href="../../questions/tagged/react-helmet" class="post-tag grid--cell" title="show questions tagged 'react-helmet'" rel="tag">react-helmet</a>
</div>
<div class="started mt0">
<div class="s-user-card s-user-card">
<time class="s-user-card--time" datetime="asked Mar 06 '23 at 11:06">asked Mar 06 '23 at 11:06</time>
<a href="../../users/20121566/y-u-k-i-m-u-r-a" class="s-avatar s-avatar__32 s-user-card--avatar">
<img class="s-avatar--image" src="../../users/profiles/20121566.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="Y U K I M U R A" />
</a>
<div class="s-user-card--info">
<a href="../../users/20121566/y-u-k-i-m-u-r-a" class="s-user-card--link">Y U K I M U R A</a>
<ul class="s-user-card--awards">
<li class="s-user-card--rep" title="reputation score">488</li>
<li class="s-award-bling s-award-bling__bronze" title="19 bronze badges">19</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="mln24">
<div class="question-summary" id="question-summary-72483677">
<div class="statscontainer">
<div class="stats">
<div class="vote">
<div class="votes">
<span class="vote-count-post"><strong>3</strong></span>
<div class="viewcount">votes</div>
</div>
</div>
<div class="status ">
<strong>0</strong> answers
</div>
</div>
</div>
<div class="summary">
<h3><a href="../../questions/72483677/react-helmet-not-updating-meta-and-title-in-ssr-application" class="question-hyperlink">React-Helmet not updating meta and title in SSR application</a></h3>
<div class="excerpt">I have updated this to use react-helmet-async in place of react-helmet.
I have a React application that has implemented server side rendering. I am following the steps on this site: Documentation for react-helmet-async, to implement the…</div>
<div class="grid ai-start jc-space-between fw-wrap">
<div class="grid gs4 fw-wrap tags ">
<a href="../../questions/tagged/reactjs" class="post-tag grid--cell" title="show questions tagged 'reactjs'" rel="tag">reactjs</a>
<a href="../../questions/tagged/dynamic" class="post-tag grid--cell" title="show questions tagged 'dynamic'" rel="tag">dynamic</a>
<a href="../../questions/tagged/server-side-rendering" class="post-tag grid--cell" title="show questions tagged 'server-side-rendering'" rel="tag">server-side-rendering</a>
<a href="../../questions/tagged/meta-tags" class="post-tag grid--cell" title="show questions tagged 'meta-tags'" rel="tag">meta-tags</a>
<a href="../../questions/tagged/react-helmet" class="post-tag grid--cell" title="show questions tagged 'react-helmet'" rel="tag">react-helmet</a>
</div>
<div class="started mt0">
<div class="s-user-card s-user-card">
<time class="s-user-card--time" datetime="asked Jun 03 '22 at 00:53">asked Jun 03 '22 at 00:53</time>
<a href="../../users/5684361/j-terranova" class="s-avatar s-avatar__32 s-user-card--avatar">
<img class="s-avatar--image" src="../../users/profiles/5684361.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="j-terranova" />
</a>
<div class="s-user-card--info">
<a href="../../users/5684361/j-terranova" class="s-user-card--link">j-terranova</a>
<ul class="s-user-card--awards">
<li class="s-user-card--rep" title="reputation score">539</li>
<li class="s-award-bling s-award-bling__gold" title="1 gold badge">1</li>
<li class="s-award-bling s-award-bling__silver" title="10 silver badge">10</li>
<li class="s-award-bling s-award-bling__bronze" title="23 bronze badge">23</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="mln24">
<div class="question-summary" id="question-summary-72224534">
<div class="statscontainer">
<div class="stats">
<div class="vote">
<div class="votes">
<span class="vote-count-post"><strong>3</strong></span>
<div class="viewcount">votes</div>
</div>
</div>
<div class="status ">
<strong>1</strong> answer
</div>
</div>
</div>
<div class="summary">
<h3><a href="../../questions/72224534/helmetprovider-is-not-a-valid-jsx-element" class="question-hyperlink">'HelmetProvider' is not a valid JSX element</a></h3>
<div class="excerpt">I'm using typescript and react to develop dashboard. The code works fine in my laptop, but this error shows in pipeline, 'TypeScript error in App.tsx. HelmetProvider' is not a valid JSX element. Its instance type 'HelmetProvider' is not a valid JSX…</div>
<div class="grid ai-start jc-space-between fw-wrap">
<div class="grid gs4 fw-wrap tags ">
<a href="../../questions/tagged/reactjs" class="post-tag grid--cell" title="show questions tagged 'reactjs'" rel="tag">reactjs</a>
<a href="../../questions/tagged/typescript" class="post-tag grid--cell" title="show questions tagged 'typescript'" rel="tag">typescript</a>
<a href="../../questions/tagged/react-helmet" class="post-tag grid--cell" title="show questions tagged 'react-helmet'" rel="tag">react-helmet</a>
</div>
<div class="started mt0">
<div class="s-user-card s-user-card">
<time class="s-user-card--time" datetime="asked May 13 '22 at 04:40">asked May 13 '22 at 04:40</time>
<a href="../../users/18602658/madan-mahat" class="s-avatar s-avatar__32 s-user-card--avatar">
<img class="s-avatar--image" src="../../users/profiles/18602658.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="Madan Mahat" />
</a>
<div class="s-user-card--info">
<a href="../../users/18602658/madan-mahat" class="s-user-card--link">Madan Mahat</a>
<ul class="s-user-card--awards">
<li class="s-user-card--rep" title="reputation score">43</li>
<li class="s-award-bling s-award-bling__bronze" title="6 bronze badges">6</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="mln24">
<div class="question-summary" id="question-summary-66256645">
<div class="statscontainer">
<div class="stats">
<div class="vote">
<div class="votes">
<span class="vote-count-post"><strong>3</strong></span>
<div class="viewcount">votes</div>
</div>
</div>
<div class="status ">
<strong>1</strong> answer
</div>
</div>
</div>
<div class="summary">
<h3><a href="../../questions/66256645/dynamically-add-google-font-and-custom-font-reference-react" class="question-hyperlink">Dynamically add google font and custom font reference React</a></h3>
<div class="excerpt">I am building an application where people can create banners and I have a list of fonts. This list contains web-safe fonts, custom fonts and google fonts.
For each text element the user can choose a font.
For each of this selected fonts I need to…</div>
<div class="grid ai-start jc-space-between fw-wrap">
<div class="grid gs4 fw-wrap tags ">
<a href="../../questions/tagged/reactjs" class="post-tag grid--cell" title="show questions tagged 'reactjs'" rel="tag">reactjs</a>
<a href="../../questions/tagged/emotion" class="post-tag grid--cell" title="show questions tagged 'emotion'" rel="tag">emotion</a>
<a href="../../questions/tagged/google-fonts" class="post-tag grid--cell" title="show questions tagged 'google-fonts'" rel="tag">google-fonts</a>
<a href="../../questions/tagged/react-helmet" class="post-tag grid--cell" title="show questions tagged 'react-helmet'" rel="tag">react-helmet</a>
<a href="../../questions/tagged/webfont-loader" class="post-tag grid--cell" title="show questions tagged 'webfont-loader'" rel="tag">webfont-loader</a>
</div>
<div class="started mt0">
<div class="s-user-card s-user-card">
<time class="s-user-card--time" datetime="asked Feb 18 '21 at 08:59">asked Feb 18 '21 at 08:59</time>
<a href="../../users/11492745/machve" class="s-avatar s-avatar__32 s-user-card--avatar">
<img class="s-avatar--image" src="../../users/profiles/11492745.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="machve" />
</a>
<div class="s-user-card--info">
<a href="../../users/11492745/machve" class="s-user-card--link">machve</a>
<ul class="s-user-card--awards">
<li class="s-user-card--rep" title="reputation score">61</li>
<li class="s-award-bling s-award-bling__silver" title="1 silver badges">1</li>
<li class="s-award-bling s-award-bling__bronze" title="3 bronze badges">3</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="s-pagination pager fr">
<a class="s-pagination--item" href="../../questions/tagged/react-helmet_page=2" rel="prev" title="Go to page 2">Prev </a>
<a class="s-pagination--item" href="../../questions/tagged/react-helmet_page=1" rel="" title="Go to page 1">1</a>
<a class="s-pagination--item" href="../../questions/tagged/react-helmet_page=2" rel="" title="Go to page 2">2</a>
<div class="s-pagination--item is-selected">3</div>
<div class="s-pagination--item s-pagination--item__clear">…</div>
<a class="s-pagination--item" href="../../questions/tagged/react-helmet_page=16" rel="" title="Go to page 16">16</a>
<a class="s-pagination--item" href="../../questions/tagged/react-helmet_page=17" rel="" title="Go to page 17">17</a>
<a class="s-pagination--item" href="../../questions/tagged/react-helmet_page=4" rel="next" title="Go to page 4"> Next</a>
</div>
</div>
</div>
</div>
</div>
<script src="../../static/js/stack-icons.js"></script>
<script src="../../static/js/fromnow.js"></script>
</body>
</html>