-
How do I do something as simple as change the font style for a FluentHeader in Blazor? I have followed the documentation verbatim and the font does not change. I've used the documentation to guide me through the steps using design tokens from code as well and does not work. The only way I can get the font to change on a FluentHeader is to change --body-font in the css, but it changes the font for everything else. What should I do? |
Beta Was this translation helpful? Give feedback.
Replies: 4 comments 2 replies
-
FYI @chrisdholt |
Beta Was this translation helpful? Give feedback.
-
I wonder which documentation you followed... |
Beta Was this translation helpful? Give feedback.
-
Yes. This is the documentation I followed. I tried using BodyFont to change the font style for a FluentHeader and it does not work. It seems it works for buttons though. Here is my code that attempts to change the font of a header and a button, and only the button works. @page "/" <FluentHeader @ref="@headerRef">Header
} |
Beta Was this translation helpful? Give feedback.
-
Ok, I found out what was going wrong... The A small suggestion...if you would like to change the font for the whole application, you could just call:
This is a fix also coming with the 3.2.1 release. |
Beta Was this translation helpful? Give feedback.
Ok, I found out what was going wrong...
The
FluentHeader
component is an addition to the Blazor library that doesn't have an underlying web component (whichFluentButton
does have). When adding theFluentHeader
to the library (as well as others likeFluentBodyContent
andFluentFooter
), we forgot to put the ref element (yourheaderRef.Element
) in the rendered element. This means the Design Tokens never get 'connected' to the component. After adding the needed@ref= Element
to the components, everything works as expected.We are rolling out a fix for this with 3.2.1 release of the Blazor library.
A small suggestion...if you would like to change the font for the whole application, you could …