CODEWITHSUNDEEP
javascripthtmlcssreactjsgoogle-font-api
Dog
Dog

Reputation: 2906

How to use Google fonts in a window.open in React

I have a React app and in an onClick handler a window opens. I then add text and styles to this window through the method below:

var myWindow = window.open("", "MsgWindow", "width=200,height=100");
myWindow.document.write("<html><head><style>CUSTOM CSS STYLES HERE</stye></head><p>This is 'MsgWindow'. I am 200px wide and 100px tall!</p></html>")

While this works for traditional CSS, if I want to add a custom font type that I have downloaded from Google Fonts the window will not recognize the font. Similarly, adding a stylesheet link to the head does not work seemingly because the window does not have reference to the React stylesheets.

How can I use Google that aren't typically available in window.open in such situations?

I know there is a React package for opening windows, but I wanted to avoid that.

Upvotes: 2

Views: 576

Answers (2)

Manu
Manu

Reputation: 10964

If you want to use it in base application pages as well, you may add those in index.html head section itself:

<link href="https://fonts.googleapis.com/css?family=Source+Serif+Pro" rel="stylesheet">

Now in anywhere in your app/ popup, just add it in font-family attribute as follows:

font-family: 'Source Serif Pro', serif;

Upvotes: 2

Anees
Anees

Reputation: 579

This would do the trick

var myWindow = window.open("", "MsgWindow", "width=200,height=100");

myWindow.document.write("<html><head><link href='https://fonts.googleapis.com/css?family=Roboto' rel='stylesheet'> <style>body {font-family: 'Roboto', sans-serif;}</stye></head><p>This is 'MsgWindow'. I am 200px wide and 100px tall!</p></html>")

Upvotes: 2

Related Questions