How to load google font in LitElement - lit-element

Question

I am using LitElement and I am trying to load google-font at the element level.
I have tried returning it in an HTML literal in the connectedCallback event, but it does not work.
I could not manage to do it in the get styles() method.
Where should the <link...> statement be placed in the code?

Answer 1

You can import an external style sheet by adding a <link> element to your template, For details, see Import an external stylesheet.
Here's the demonstrate on StackBlitz.

Answer 2

You could import the google font in index.html easily:
<link href="https://fonts.googleapis.com/css?family=Kaushan+Script&display=swap" rel="stylesheet">
or you could create a common style.js file and include it:
const $_documentContainer = document.createElement('template');
$_documentContainer.innerHTML = `<style>
#import url('https://fonts.googleapis.com/css?family=Kaushan+Script');
html,
body {
font-family: 'Roboto', Arial, sans-serif;
height: 100%;
margin: 0;
}
...
</style>`;
document.head.appendChild($_documentContainer.content);
var importDoc = window.document;
var style = importDoc.querySelector('style');
document.head.appendChild(style);
or:
class MyElement extends LitElement {
render() {
return html`
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Kaushan+Script">
`;
}
}
demo ( See the red a tag as I imported Kaushan+Script )