Change default Font

7 posts, 1 answers
  1. Peter
    Peter avatar
    35 posts
    Member since:
    May 2016

    Posted 31 May Link to this post

    Hi,

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

    Peter

  2. Magdalena
    Admin
    Magdalena avatar
    421 posts

    Posted 31 May Link to this post

    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
  3. UI for ASP.NET MVC is VS 2017 Ready
  4. Peter
    Peter avatar
    35 posts
    Member since:
    May 2016

    Posted 31 May in reply to Magdalena Link to this post

    Hi Magdalena,

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

    The css in Content\Site.css?

    Peter

     

     

  5. Peter
    Peter avatar
    35 posts
    Member since:
    May 2016

    Posted 31 May Link to this post

    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
  6. Answer
    Magdalena
    Admin
    Magdalena avatar
    421 posts

    Posted 01 Jun Link to this post

    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
  7. Peter
    Peter avatar
    35 posts
    Member since:
    May 2016

    Posted 01 Jun in reply to Magdalena Link to this post

    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

  8. Peter
    Peter avatar
    35 posts
    Member since:
    May 2016

    Posted 01 Jun Link to this post

    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;
            }

Back to Top
UI for ASP.NET MVC is VS 2017 Ready