1. Home
  2. Forum
  3. Blazor
  4. Blazor SfButton change font-family with CSS

Blazor SfButton change font-family with CSS

Hello,

I want to change the font-family of a Blazor SfButton, but it does not work as expected. It works on a "normal" HTML button.

<link rel='nofollow' href="_content/Syncfusion.Blazor/styles/material-dark.css" rel="stylesheet" />

CSS:

@font-face
{
    font-family: 'BebasNeue';
    src: url(/fonts/BebasNeue.otf);
}

.menuItem
{
    font-family:'BebasNeue' !important;
    color: white;
}

HTML:

<button class="menuItem">Normal Button</button>
<SfButton CssClass="menuItem">Test</SfButton>

My question: How can I change the font-family in a Blazor SfButton?


3 Replies 1 reply marked as answer
AS Aravinthan Seetharaman Syncfusion Team February 5, 2021 10:23 AM UTC

Hi Carlokalo, 
 
Thanks for contacting Syncfusion Support. 
 
We have checked your reported query, and we can achieve your reported requirement as like in the below code snippet. 
 
 
@using Syncfusion.Blazor.Buttons 
 
<SfButton CssClass="menuitem">Button</SfButton> 
 
<style> 
    .menuitem { 
        font-family: 'Bebas Neue'; 
    } 
</style> 
 
 
For your reference we have created sample and video demo here. 
 
 
 
Could you please check the above details, and get back to us if you need assistance on this. 
 
Regards, 
Aravinthan S 


Marked as answer
CA carlokalo February 5, 2021 10:47 AM UTC

Hello,

your support seems to be really excellent.

1. Does that mean,  I have to put the style into the *.razor file, instead of into the *.razor.css file?

2. Does that mean, I can not use css isolation at all with Syncfusion controls? That would be....not so good....

Thank you



AS Aravinthan Seetharaman Syncfusion Team February 8, 2021 05:12 PM UTC

Hi Carlokalo, 
 
Thanks for the update. 
 
We have checked your query. We can achieve CSS isolation in Syncfusion controls as like in the below code snippets 
 
Index.razor.css 
 
::deep .menuitem { 
    font-family: 'Bebas Neue'; 
} 
 
 
 
_Host.cshtml 
 
<html lang="en"> 
<head> 
     …  
    <link rel='nofollow' href="CssIsolation.styles.css" rel="stylesheet" /> 
</head> 
 <body></body> 
</html> 
 
 
Index.razor 
 
@using Syncfusion.Blazor.Buttons 
 
<SfButton CssClass="menuitem">Button</SfButton> 
 
 
For your reference we have created sample here. 
 
 
Note: 
Our components should be added within block/inline containers and we need to add '::deep' CSS pseudo-selector to add the scoped CSS for all descendant components. Use !important in CSS style attributes for modifying all the child and nested components. 
 
Could you please check the above details, and get back to us, if you need assistance on this 
 
Regards, 
Aravinthan S 


Loader.
Up arrow icon