Stuck on an issue?
Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.
And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.
bug(typography): Typography is not applied
See original GitHub issueReproduction
Steps to reproduce:
- Create a theme file
my-theme.scss
$kids-typography: mat.define-typography-config(
$font-family: "Comic Sans",
);
$my-theme: mat.define-light-theme(
(
typography: $kids-typography,
color: (
primary: mat.define-palette($primary-palette, 600),
accent: mat.define-palette($primary-palette, 200),
)
)
);
@include mat.core-theme($my-theme);
@include mat.button-theme($my-theme);
- Update
angular.jsonwith the theme file
"styles": ["src/styles/theme/my-theme.scss", "src/styles.scss"],
- Content of
style.scss
@use "~@angular/material" as mat;
@include mat.core();
- Content of
index.html
<body class="mat-typography">
<p class="mat-h1">Introductory text</p>
<app-root></app-root>
</body>
- Content of
app.component.html
<button mat-raised-button color="primary">Primary</button>
<button mat-raised-button color="accent">Accent</button>
<button mat-raised-button color="warn">warn</button>
<router-outlet></router-outlet>
Expected Behavior
I would expect that all elements including the Material Components (button in this case) to have the supplied font in $kids-typography
Actual Behavior
The font is not applied to any item.
However if in angular.json I reverse the array to have styles.scss as the first file and my-theme.scss as the second file, then the Font Family is applied, but only to the Button component.
Environment
- Angular: 12.2.0
- CDK/Material: 12.2.8
- Browser(s): All
- Operating System (e.g. Windows, macOS, Ubuntu): Windows
Issue Analytics
- State:
- Created 2 years ago
- Comments:6 (5 by maintainers)
Top Results From Across the Web
Angular Material Typography not being set correctly
I would like if possible to have it apply throughout the application without having to set 100s of classes for typography alone. I...
Read more >Font style not applying correctly - Illustrator UserVoice
Font style not applying correctly. Using the character window. When trying to alter pre-typed text, changing using Font Family menu in ...
Read more >Working around the viewport-based fluid typography bug in ...
I am using a fluid typography system and scale that I've been using for almost two years with no issues to be mentioned....
Read more >Manage missing fonts – Figma Help Center
Missing font warning in some files ↓; Text shifts or changes format ↓; Icon fonts turn into text ↓; Ligatures not working ↓....
Read more >FONT STYLES BUG! - Pixelmator Community
When text is selected and the font library is activated from within the 'text' panel, several of the fonts listed show as HELVETICA...
Read more >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Yes, that appears to be correct.
This issue has been automatically locked due to inactivity. Please file a new issue if you are encountering a similar or related problem.
Read more about our automatic conversation locking policy.
This action has been performed automatically by a bot.