Skip to Questions

Guide FAQ - Your LibGuides v1 Questions. Answered!


How can I customize my guides' font / text styles?

Last Updated: Jan 08, 2015  |  7660 Views

Was this helpful? 6   13



  • You must be an admin-level user to make these changes.
  • These changes will be made system wide.
    (If you have LibGuides CMS [formerly CampusGuides], see note in General Instructions on how to make changes to 1 group or 1 guide.) 

General Instructions

  1. Go to Admin Stuff > Look & Feel.
  2. On the System Wide tab, scroll down to the Custom JS/CSS Code box.
  3. Add the appropriate CSS from the information in this FAQ.
    Make sure all styles are wrapped in <style></style> tags. 
  4. Click Save Custom JS/CSS.

If you have LibGuides CMS, you can make these changes for a Group or a single guide as well.
Click to see how... (Click again to hide.)

Standard Font Style

Changing this CSS will change the majority of the text in your system - it changes text in Rich Text boxes and the rich text portion of every other box type.

body, .innerbox p, .innerbox div, .innerbox font, .innerbox span, .innerbox td { font: normal 12px Arial, Helvetica, sans-serif !important; }

  • Change the normal to bold if you want the text to be bold.
  • Change the 12px to whatever size you want.
  • Change the Arial, Helvetica, sans-serif; to whatever font families you want.

The individual HTML tags (p, div, font, span, td) are included (even the deprecated ones) to help with copied/pasted content. If someone copies and pastes content into the Rich Text Editor, having this CSS in your system should help overwrite most/all of the pasted content.

Note: Many of the box types have their own set of styles in addition to the styles above. Please see the Changing Box Styles section below.

Changing Guide Styles

Did you know you can change the font for the guide title/description, tabs/subpage list, and box headers?

Click to see the CSS classes for these items. (Click again to hide them.)

Changing Box Styles (Links, Documents & Files)

Certain box types have their own font size/style definitions associated with them.

The style in the Overall Font Styles will set the style of the font at the top of the box (the Rich Text portion), but not the bottom of the box.

Click to see CSS classes. (Click again to hide them.)

Changing Printer Friendly Fonts

  1. Go to Admin Stuff > Look & Feel.
  2. On the System Wide page, scroll down to the Custom JS/CSS for Printer Friendly Pages box.
  3. Add this CSS, replacing 110% with whatever font size you want:
    html, body, table, td, div, p, li, a, span { font-size: 110% !important; }
  4. Click Save Custom JS/CSS for Printer Friendly Pages.

Need More?

You can use your browser to find the right classes to change! :)

  • Chrome: right click on an item and choose Inspect Element.
  • Firefox: install the Firebug add on.
  • Internet Explorer: press F12 to open the Developer Tools, then drill down through the HTML to find the right area.
Answered by Anna BurkeBookmark and Share

Other Answers / Comments (0)

    Need Help?

    This site contains FAQs for LibGuides v1 only.

    LibGuides v2 Documentation
    (You must have a LibApps account to access that site.)

    Or click HELP in the orange command bar of your v2 system.


    Follow LibGuidesFAQ on Twitter Follow us on Twitter!
     Your questions, answered!

    Browse by Popular Topics

    Accounts  –  Admin Area  –  API / Widgets  –  Boxes  –  Catalog / Database Integration  –  CSS  –  Customization  –  E-Reserves  –  Embedding Objects  –  General System Questions  –  Group Management  –  Guides  –  Holiday Closures  –  How To...  –  Images  –  LibGuides CMS  –  Links  –  Mobile  –  Pages / Tabs  –  Profiles  –  RSS  –  Search  –  Security  –  Statistics  –  Subject Categories  –  Survey/Form Tool  –  System Administrators  –  Tags  –  Webinar  
    View All Topics

    Related content from Springshare v1 Help