Font Size

[Ken]

How do I increase the font size for both the content and tab titles?

[Marin Bratanov]

Hello Ken,

Such a small font is not expected and is not the default Kendo stylesheet. This indicates that a stylesheet from the application is changing the font and the following blog post can help you find out where this override comes from so you can determine how to fix, avoid or remove it: https://www.telerik.com/blogs/improve-your-debugging-skills-with-chrome-devtools#see-the-applied-styles.

That said, here is an example I made for you that shows a few tricks to target tab strip and its contents with CSS selectors. Of course, the selector specificity determines what rule will take effect, so you may need to add something like the !important modifier to the rules so they can override the current ones you have (although I would recommend determining where the current ones come from and fixing them).

<style>
    html body .k-tabstrip {
        font-size: 40px;
    }
    .specialFontSize {
        font-size: 8px;
    }
</style>
@(Html.Kendo().TabStrip()
                  .Name("tabstrip")
                  .Items(tabstrip =>
                  {
                      tabstrip.Add().Text("Tab one")
                          .Selected(true)
                          .Content(@<text>
                            first tab contents
                        </text>);

                        tabstrip.Add().Text("second tab")
                            .Content(@<text>
                            <div class="specialFontSize">lorem ipsum dolor sit amet</div>
                        </text>);
                  })
)

Regards,
Marin Bratanov
Progress Telerik

[Ken]

Thanks.  Turns out I did have a problem with another CSS file, that cleaned up a lot of things I was seeing with the controls.