Try Now
More in this section

Forums / Designing & Styling / Changing font from Embedded to Desired site-wide?`

Changing font from Embedded to Desired site-wide?`

2 posts, 0 answered
  1. Matt
    Matt avatar
    1 posts
    01 Mar 2011
    20 Sep 2011
    Link to this post
    Right or wrong, our corporate entity had defined Arial as the font for all web sites.  After reading this thread: http://blogs.telerik.com/aspnetmvcteam/posts/08-06-17/how_to_override_styles_in_a_radcontrol_for_asp_net_ajax_embedded_skin.aspx, it would appear that changing fonts requires more css specificity.  I get it but man, changing an entire site, for all Telerik and hand-built controls, is going to be extremely painful.  Is there no other way to scrub or override the embedded themes in a less complicated way?  I would have thought that by having themes, this would have been a 30 minute task for a site-wide change.  Part of the value of Sitefinity, IMO, is the ability to set themes/styles for site instances easily.  If I cannot change the font easily, it devalues Sitefinity as a true CMS utility.

    On a side-note, why is it that styles needed to be built into the assembly in the first place if building themes with the theme builder is so easy?


  2. Jen Peleva
    Jen Peleva avatar
    568 posts
    10 Sep 2016
    26 Sep 2011
    Link to this post
    Hello Matt,

    Thank you for contacting Telerik Support.

    I've got two possible solutions for you. The first one is to include the following css rule in your theme:

    body {font-family: Arial}

    As you probably guess, it sets a default font to all elements. Controls don't have font rules with greater specificity so it will apply font Arial to them as well.

    A more invasive approach is also possible. Examine the snippet below, where #wrapper is the id of the page container (you should look up its name in your case) :
    #wrapper body, #wrapper div, #wrapper span, #wrapper object, #wrapper iframe,
    #wrapper h1, #wrapper h2, #wrapper h3, #wrapper h4, #wrapper h5, #wrapper h6, #wrapper p, #wrapper blockquote, #wrapper pre, #wrapper a, #wrapper abbr, #wrapper acronym, #wrapper address, #wrapper code, #wrapper del, #wrapper dfn,
    #wrapperem, #wrapper img, #wrapper q, #wrapper dl, #wrapper dt, #wrapper dd, #wrapper ol, #wrapper ul, #wrapper li,#wrapper fieldset, #wrapper form, #wrapper label, #wrapper legend, #wrapper table, #wrapper caption, #wrapper tbody, #wrapper tfoot, #wrapper thead, #wrapper tr, #wrapper th, #wrapper td
    {font-family: inherit !important}
    html {font-family: Arial}

    What it does in a nut shell is to make every element look to its parent and ask what’s the parent’s font family; the parent looks upon its parent and so on, until the HTML element is reached and it “says” “use Arial.

    Note: There might be some elements that have a more specific selector and !important directive, but it’s highly unlikely.

    Regarding your second question, the default theme is built into an assembly, but you can create your own theme and register it in Sitefinity. Follow the link for more information on the subject.

    Should you have more questions regarding this, or any other aspects of Sitefinity, do not hesitate to contact us back.

    Kind Regards,
    Zheyna Peleva
    the Telerik team
    Do you want to have your say in the Sitefinity development roadmap? Do you want to know when a feature you requested is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
2 posts, 0 answered