-
|
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: 2 comments 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.
-
|
This was helpful. For Material Web typography, moving the typography style import into the build file makes sense because it needs to be bundled like the other components. For visual testing, I also like checking different typography style ideas first, then choosing a clean font setup that stays readable in the UI. |
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…