-
|
Hi, I'm writing a very simple web app for which I need to use material design. After struggling I finally managed to get a working form with a text field and a button. However I can't get the typography working for anything else than the material components. Here's what I have done so far: Installed import '@material/web/button/filled-button.js';
import '@material/web/textfield/outlined-text-field.js';
import '@material/web/typography/md-typescale-styles.js';Ran <head>
<script src='./bundle.js'></script>
</head>
<body>
<h1 class="md-typescale-display-large">Welcome</h1>
<form>
<md-filled-text-field label="Label" value="Value">
</md-filled-text-field>
<md-filled-button>Complete</md-filled-button>
</form>
</body>The text field and the button use Roboto but the h1 element uses the browser's default font. I have to manually set the <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap" rel="stylesheet">`Also this script: <script>
import {styles as typescaleStyles} from '@material/web/typography/md-typescale-styles.js';
document.adoptedStyleSheets.push(typescaleStyles.styleSheet);
</script>What am I doing wrong? The typography documentation has been useless so far... |
Beta Was this translation helpful? Give feedback.
Replies: 1 comment 1 reply
-
|
Hi! Sorry for the slow response. I put a reproduction of this issue in a jsbin, which seems to work. The last script your posted is the right way to set up typography, but it needs to be part of the build process. I think it might be outside of your Two extra things I noticed:
|
Beta Was this translation helpful? Give feedback.
-
|
Thank you so much @asyncliz I had to move the import line to index.js. The documentation on typography is misleading, in fact typography simply needs to be imported just like any other component and then bundled. |
Beta Was this translation helpful? Give feedback.
Hi! Sorry for the slow response. I put a reproduction of this issue in a jsbin, which seems to work.
The last script your posted is the right way to set up typography, but it needs to be part of the build process. I think it might be outside of your
index.jsfile since it's in<script>tags. If you move those two lines within the<script>into yourindex.jsfile and re-build, I think that will fix your issue.Two extra things I noticed:
outlined-text-field.jsin your script but using<md-filled-text-field>in your html.import '@material/web/typography/md-typescale-styles.js';in yourindex.js. Importing that file won't perform side-effects. You need to im…