The new look design of our www.leeds.ac.uk website uses the Freight font family due to its readability but recognise that our choices won’t suit everyone. This article gives options on how to manually change the font and other design elements using 3rd party browser plugins.
We design and build our websites to support User Stylesheets which allow our website users to alter the appearance of the website. You can use a User Stylesheet to change the fonts, letter and word spacing, line heights, text and background colours, paragraph widths and almost any aspect on the site appearance.
To make use of a User Stylesheet you may find it easiest to install a browser plugin.
For Chrome and Firefox you may find the Stylus plugin helpful.
Stylus Chrome extension
https://chrome.google.com/webstore/detail/stylus/clngdbkpkpeebahjckkjfobafhncgmne?hl=en
Stylus Firefox Addon
https://addons.mozilla.org/en-GB/firefox/addon/styl-us/
You can use Stylus to create a custom style with your choice of font. For example, some users with dyslexia find the Comic Sans font easier to read. You can chose to display all text on our websites with the following User Stylesheet CSS:
@-moz-document domain("leeds.ac.uk") {
body * {
font-family: "Comic Sans MS", "Comic Sans", cursive !important;
}
}
If you have a preferred font other than Comic Sans you can use any font installed on your computer. For example to use Ariel you can add the following User Stylesheet CSS:
@-moz-document domain("leeds.ac.uk") {
body * {
font-family: Arial, sans-serif !important;
}
}
Additionally, if you want to change letter or word spacing you can add rules for that too. For example the following forces the site to display with the Comic Sans font with increased letter and word spacing and a minimum font size of 18 pixels:
@-moz-document domain("leeds.ac.uk") {
body * {
font-family: "Comic Sans MS", "Comic Sans", cursive !important;
letter-spacing: 0.35ch;
word-spacing: 1.225ch;
font-size: max(1em, 18px);
}
}