Best practice to add fonts into a web component #2125
-
|
I'm using: |
Beta Was this translation helpful? Give feedback.
Replies: 5 comments 17 replies
-
|
From https://www.npmjs.com/package/@material/mwc-icon: <link href="https://fonts.googleapis.com/css?family=Material+Icons&display=block" rel="stylesheet">
<mwc-icon>shopping_cart</mwc-icon>
<script type="module">
import '@material/mwc-icon';
</script>Just a |
Beta Was this translation helpful? Give feedback.
-
|
or use https://developer.mozilla.org/en-US/docs/Web/API/Document/fonts |
Beta Was this translation helpful? Give feedback.
-
|
Thanks! :) |
Beta Was this translation helpful? Give feedback.
-
|
Before loading the fonts use to verify that the domains are accessible. <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> |
Beta Was this translation helpful? Give feedback.
-
|
like |
Beta Was this translation helpful? Give feedback.
-
|
if (!document.head.querySelector('[href="https://fonts.googleapis.com/css?family=Material+Icons&display=block"]')) { |
Beta Was this translation helpful? Give feedback.
-
|
Before loading the fonts use to verify that the domains are accessible. <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> |
Beta Was this translation helpful? Give feedback.
-
|
fine |
Beta Was this translation helpful? Give feedback.
-
|
if (!document.head.querySelector('[href="https://fonts.googleapis.com/css?family=Material+Icons&display=block"]')) { |
Beta Was this translation helpful? Give feedback.
-
|
hello |
Beta Was this translation helpful? Give feedback.
-
|
fine |
Beta Was this translation helpful? Give feedback.
-
|
fine! |
Beta Was this translation helpful? Give feedback.
-
|
fine |
Beta Was this translation helpful? Give feedback.
-
|
very good |
Beta Was this translation helpful? Give feedback.
-
|
fine! |
Beta Was this translation helpful? Give feedback.
-
|
fine |
Beta Was this translation helpful? Give feedback.
From https://www.npmjs.com/package/@material/mwc-icon:
Just a
<link>in the<head>ofindex.htmlis enough