This is a migrated thread and some comments may be shown as answers.

Change default Font

6 Answers 3420 Views
General Discussions
This is a migrated thread and some comments may be shown as answers.
Peter
Top achievements
Rank 1
Peter asked on 31 May 2016, 06:31 AM

Hi,

How can I change the default font of a MVC Project with all Kendo Controls / Widget i.e. to Segoe UI?

Peter

6 Answers, 1 is accepted

Sort by
0
Magdalena
Telerik team
answered on 31 May 2016, 08:24 AM
Hello Peter,

Font family is set by Kendo to the <boty> element of the page by our inbuilt selectors by using class names. The solution is to apply font-family to the <body> element using stronger selector, for example class name with tag name, or add an id to the <body> element and after that use it for a CSS selector.

html:
<body id="example">
  ... content ...
</body>

CSS:
#example {
    font-family: Seagoe UI, sans-serif;
}


Regards,
Magdalena
Telerik
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
0
Peter
Top achievements
Rank 1
answered on 31 May 2016, 08:51 AM

Hi Magdalena,

The html code I can put in Views\Shared\_Layout.cshtml.

The css in Content\Site.css?

Peter

 

 

0
Peter
Top achievements
Rank 1
answered on 31 May 2016, 10:10 AM

Hi Magdalena,

it doesn't  work. For better testing I added a serif font in Site.css or bootstrap.css:
#example {
    font-family:"Times New Roman", Times, serif;
}

The <body> tag in  _Layout.cshtml I changed to <body id="example">.

But the whole site and also the Kendo grid is in Arial.

I use Nova theme, but want change the font family.

Peter
0
Accepted
Magdalena
Telerik team
answered on 01 Jun 2016, 08:33 AM
Hi Peter,

Styles can be applied in the both views - in content site, or _Layout.schtml as well. We tested the solution on our side and it worked properly. We are sending you also sample pages in the attachment. The "Grid.cshtml" is our content page. Please test these views if they will work on your side as well.

Regards,
Magdalena
Telerik
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
0
Peter
Top achievements
Rank 1
answered on 01 Jun 2016, 09:18 AM

Hi Magdalena,

I've added in Views\MyView\Index.cshtml:

<style>
    #example {
        font: 20px "Times New Roman", Times, serif;
    }
</style>

before:

@(Html.Kendo().Grid()
      .Name("grid") 

 

Now all is in "Times New Roman", also the Grid Filter with  Datepicker , Comboboxes ...

Thank you!

Peter

0
Peter
Top achievements
Rank 1
answered on 01 Jun 2016, 10:06 AM

The _Layout.cshtml has a style for the body, which also can contain the font-family:

<head>
...
   <style>
...
        body {
            /* Margin bottom by footer height */
            margin-bottom: 60px;
            font-family:'Times New Roman', Times, serif;
        }

Tags
General Discussions
Asked by
Peter
Top achievements
Rank 1
Answers by
Magdalena
Telerik team
Peter
Top achievements
Rank 1
Share this question
or