In This Article

How to customize the font on your public pages

By default, the LibGuides public pages are displayed using a font-family of Arial, Helvetica, and Verdana (with Arial being used first and the others used if a browser does not support the earlier fonts). But, as with all aspects of the public interface of LibGuides, Admin users can customize the fonts used in your site. 

In this article, we'll walk through getting the font(s) to use, how to embed/add the font in your site, some example CSS rules that you can use to change the fonts of specific elements, and where to add your code. 


Finding the fonts to use

The first step in customizing the fonts used in your LibGuides site is to determine what those fonts are. You may be planning to use the same fonts that are used by your institution's primary website, a font that's been purchased by your institution, or you are just looking to use something other than the default Arial font.

If you plan on using the same fonts as your institution, you will want to coordinate with your IT or Web Development department (or whoever manages your webpages) about getting access to the font files. If you plan on using a font of your own, one that you've purchased or an open source resource, you will also need to know where the font files live -- you may have to download the files so that you can upload them to LibGuides (more on that below) or if they're hosted on another site you will need to know their URLs. 

Once you have your font files, the actual files or their URLs, the next step is embedding those fonts into your site's custom code. 

Pro Tip: If you are looking for custom fonts to use, check out Google Fonts. This robust, open source collection of fonts is free to use on any webpages and very easy to use! And check out our Springy Tech Tip video on using Google Fonts here.

Embedding your fonts in your site's custom code

Before you can set up the CSS rules to change your site's fonts, you will need to embed the files for your fonts in your LibGuides site. While there are a number of methods for calling your font files in your custom code (exs: @import or @font-face rules), we recommend linking to them with a <link> tag added to your system-level custom -- from Admin > Look & Feel > Custom JS/CSS tab. 

Formatting a <link> tag

If your font files are hosted on another site, you'll either have been provided the full link tag already -- Google Fonts, for example, provides this automatically -- or you will have the URL for the font. With that URL, you'll add it to the href attribute of a <link> tag. For example: 

<link rel="stylesheet" type="text/css" href="https://springyfonts.com/fonts/yourcustomfont.woff">

Uploading your font files to LibGuides

If your font files are not hosted elsewhere, or you would prefer to host them in your LibGuides site, you can upload those files to the Upload Customization Files space -- from Admin > Look & Feel > Custom JS/CSS tab > Upload Customization Files panel. For complete instructions on uploading your own customization files, see our FAQ on that process

Once you've uploaded the file, LibGuides will automatically generate the appropriate HTML code you'll need to include it in your site's Custom JS/CSS code.

Adding the <link> tag to your custom code

With your tag in hand, paste the include code at the top of the JS/CSS Code text box above, and outside of any <style></style> or <script></script> tags already in your custom code.

Note: if you only plan on using this font in one group in your site and that group has been set up to exclude the system-level JS/CSS code, you should add the include code to the group-level JS/CSS code instead. 

custom code example with link tag added


How to customize the font for specific elements of your public pages

To adjust the font used by specific elements of your public page, you will need to add CSS rules to your custom code to set the appropriate font family. The rule(s) you set will depend on what elements you want to customize and what font(s) you will be using.  

Below are some examples of the most common areas/elements of the public pages where you can apply a custom font -- keeping in mind that the font families used in the examples will differ from those that you will be using.

Body of your public pages

To change the font for all of your public pages, the code you would need may look like this:

<style>
/* set the font-family for the entire body tag */
body {
   font-family: 'Font one', Arial, sans-serif;
}

/* override the font-family for the side-column headers on the homepage, AZ page, 
subject pages, profile pages, and E-Reserves pages*/
.s-lib-public-side-header h2 {
   font-family: 'Font one', Arial, sans-serif;
}
</style>

Public page and guide titles

To change the font for page titles for your public pages and your guide, the code you would need may look like this:

<style>
/* set the font-family for guide page titles */
#s-lg-guide-name {
   font-family: 'Font one', Arial, sans-serif;
}

/* set the font-family for all non-guide page titles*/
#s-lib-public-header-title {
   font-family: 'Font one', Arial, sans-serif;
}
</style>

Guide Navigation

To change the font for the guide navigation -- the links for your pages in the guides, the code you would need may look like this:

<style>
/* set the font-family for guide navigation links */
#s-lg-guide-tabs {
   font-family: 'Font one', Arial, sans-serif;
}
</style>

Box Titles

To change the font for all of your box titles, the code you would need may look like this:

<style>
/* set the font-family for box titles */
.s-lib-box-title {
   font-family: 'Font one', Arial, sans-serif;
}
</style>

Box Content

To change the font for the content of your boxes, the code you would need may look like this:

<style>
/* set the font-family for the entire body tag */
.s-lib-box-content {
   font-family: 'Font one', Arial, sans-serif;
}
</style>

Note: if a font has been specified in any Rich Text/HTML content items within your boxes, that font will override the above CSS. If you want to have your font applied instead, you will need to clear the formatting for the rich text to remove the inline CSS that had been set via the editor.


Where to add the code for your font customizations

 There are three areas (in LibGuides CMS) where you can add your CSS code. Once you've determined where you want to customize the fonts, copy and paste your CSS code into the appropriate Custom JS/CSS Code box.

Related Articles