We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
close icon

custom font in all controls

If possible teach an example of how to customize blazor controls font.
hosted core 
preview 7

7 Replies

SM Saranya Murugasamy Syncfusion Team August 8, 2019 06:10 AM

Hi Ebi torabi, 
  
Greetings from Syncfusion. 
  
Yes, it is possible to customize the blazor controls font by using below code snippet. 
  
<style> 
   .e-control { 
      font-family: Arial !important; 
   } 
</style> 
  
For your convenience, we have created the sample with hosted core with preview 7. Please find the sample in below link. 
  
 
  
Regards, 
Saranya M 



ET ebi torabi August 8, 2019 08:58 AM

Hi Saranya
Thank you very much for your good support. The custom font works in the grid, but it doesn't work in multiselect , dropdownlist,switch and listbox.
please see the atached video

Attachment: font_bcf76d5e.rar


SM Saranya Murugasamy Syncfusion Team August 9, 2019 09:30 AM

  
Hi Ebi torabi, 

Switch Control: 
 
We have checked your reported issue and we would like to let you know that, and we don’t have a label property for switch control. The label is customized separately for switch, so that only the class “e-control” is not added. And we have created the sample based on your scenario, and the font-family (Arial) declared in body is applied properly for label element. 

ListBox- control:  

The class “e-control” is applied for the input element not for the wrapper element. So we would suggest you to use CssClass property and customize the listbox as like in the below code example to achieve your requirement. 

.e-listbox-wrapper.e-custom {  
    font-family: Arial !important;  
}  
body{  
    font-family: Arial !important;  
}   
<EjsListBox Value=@Value DataSource="@Data" TValue="string[]" CssClass="e-custom"></EjsListBox> 
 


DropDown list and Multiselect

We would like to inform you that input wrapper is the dropdownlist and multiselect element. Because in single input component, multiple selected items are not displayed. Customize the font color to the  .e-input-group class for your scenario. If you want to customize the font to the pop-up list means, get the class of .e-list items and apply the font-family. We have prepared samples based on your necessity, kindly discover your reference code snippet and sample. 

<h4>DropDownList</h4> 
 
<EjsDropDownList Placeholder="Select a country" TValue="string" DataSource="@Country"> 
    <DropDownListFieldSettings Value="Code" Text="Name"></DropDownListFieldSettings> 
</EjsDropDownList> 
 
 
<h4>MultiSelect</h4> 
 
<EjsMultiSelect Placeholder="Select a country" TValue="string[]" DataSource="@Country"> 
    <MultiSelectFieldSettings Value="Code" Text="Name"></MultiSelectFieldSettings> 
</EjsMultiSelect> 
 
<style> 
    .e-control, .e-input-group, .e-multi-select-wrapper .e-dropdownbase, .e-dropdownbase .e-list-item { 
        font-family: Arial !important; 
    } 
</style> 

 

For your convenience we have prepare the samples. Please find the below links. 


 
Please let us know if you have any concerns. 
 
Regards, 
Saranya M 



ET ebi torabi August 10, 2019 01:29 AM

Hi Saranya
Thank you very much for your excellent support. It works very well


SM Saranya Murugasamy Syncfusion Team August 12, 2019 02:14 AM

Hi Ebi torabi, 

Most Welcome, Please let us know, if you need any further assistance. 

Regards, 
Saranya M 



ET ebi torabi August 22, 2019 06:43 AM

Hi Saranya
Is there a way to change the font of all components in one place?
Tabs have not changed fonts right now


SM Saranya Murugasamy Syncfusion Team August 26, 2019 12:22 AM

Hi Ebi torabi, 

Query 1: Is there a way to change the font of all components in one place? 
 
Currently we don’t have support to override the font for our components using common class. However, we are working on override the font of our components using common class and we will complete in Volume 3, 2019 main release. 
 
Query 2: Tabs have not changed fonts right now 
 
The font-family for content of tab items can be changed by making use of ‘e-control’ class. Since the ‘e-control’ class is not applied for tab header, we request you to use the following code to apply font family to tab control.  
 
<EjsTab>  
    <TabItems>  
        <TabItem Header="@Header1" Content="Twitter is an online social networking service that enables users to send and read short 140-charactermessages called tweets.Registered users can read and post tweets, but those who are unregistered can only readthem.Users access Twitter through the website interface, SMS or mobile device app Twitter Inc. is based in SanFrancisco and has more than 25 offices around the world.Twitter was created in March 2006 by Jack Dorsey,Evan Williams, Biz Stone, and Noah Glass and launched in July 2006. The service rapidly gained worldwide popularity,with more than 100 million users posting 340 million tweets a day in 2012.The service also handled 1.6 billionsearch queries per day."></TabItem>  
        <TabItem Header="@Header2" Content="Facebook is an online social networking service headquartered in Menlo Park, California. Its website waslaunched on February 4, 2004, by Mark Zuckerberg with his Harvard College roommates and fellow students EduardoSaverin, Andrew McCollum, Dustin Moskovitz and Chris Hughes."></TabItem>  
        <TabItem Header="@Header3" Content="WhatsApp Messenger is a proprietary cross-platform instant messaging client for smartphones that operatesunder a subscription business model.It uses the Internet to send text messages, images, video, user location andaudio media messages to other users using standard cellular mobile numbers. As of February 2016, WhatsApp had a userbase of up to one billion,[10] making it the most globally popular messaging application.WhatsApp Inc., based inMountain View, California, was acquired by Facebook Inc.on February 19, 2014, for approximately US$19.3 billion."></TabItem>  
    </TabItems>  
</EjsTab>  
<style>  
    .e-control {  
        font-family: Arial !important;  
    }  
  
    .e-tab .e-tab-header .e-toolbar-item .e-tab-text {  
        font-family: Arial !important;  
    }  
</style>  
 
  
Please let us know if you have any concerns. 
 
Regards, 
Saranya M 


Loader.
Live Chat Icon For mobile
Up arrow icon