Need info on Metro Touch fonts

3 posts, 1 answers
  1. Tomica
    Tomica avatar
    147 posts
    Member since:
    Apr 2008

    Posted 17 Sep 2012 Link to this post

    I have been playing around with the new Metro Touch skin and having great success.

    I am curious as to the font families used, as well as the sizes and any other CSS embellishments. (if any)

    I tried to reverse-engineer from Visual Style Builder, but it's apparently too soon to use this skin as a base for a new one, as it is not listed.

    Can anybody tell me how to determine the fonts used by this or any other skin?

    I don't see any options in Style Builder, so maybe all of the attributes are inherited from the base CSS that I would define.

    Basically what I want to do is to make sure that my menus and other controls match the text fonts in the site.

    The solution may be obvious to many, but I don't see where I should look...
  2. Answer
    Ivan Zhekov
    Admin
    Ivan Zhekov avatar
    540 posts

    Posted 18 Sep 2012 Link to this post

    Hello, Thomas.

    The Metro Touch skin, as well as most of the other skins uses Segoe UI font as default, then Arial then a generic font.

    The only difference between the Metro Touch and other skins, in terms of fonts, is that Metro Touch is using slightly thinner font weight e.g. 100 instead of 400 and slightly taller fonts e.g. 16 instead of 12 pixels.

    The final snippet looks like this:

    selector {
        font: 100 16px/20px "Segoe UI", Arial, sans-serif;
    }
     
    /** Or longer version */
    selector {
        font-family: "Segoe UI", Arial, sans-serif;
        font-size: 16px;
        line-height: 20px;
        font-weight: 100;
    }

    As for determining the fonts, just use any console / inspector tool you like -- F12 (developer tools) for IE, Web Inspector for Chrome /  Safari, DragonFly for Opera, FireBug for FireFox. Then find your way to the font styles and you have it.

    Alternatively, you may use services like What the Font by taking a screenshot and uploading it there.

    And of course, you may ask here in the forums, or the support threads.

    All the best,
    Ivan Zhekov
    the Telerik team
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Tomica
    Tomica avatar
    147 posts
    Member since:
    Apr 2008

    Posted 18 Sep 2012 Link to this post

    Ivan, you are absolutely correct, all I needed was a few pointers on where to look.

    I am a programmer, not a web designer, so these things were often a mystery to me.

    The good news is that the RAD controls do almost all of that for me, most of the time, one of the great reasons to use them!
Back to Top