Userstyles - Custom webfont + Readability

Added by spiralxuk@userstyles, Created: Dec 23, 2014, Updated: Jul 24, 2015
With the style applied


This is largely just an example of how to use an external Webfont from within a user style - hence the very large text :)
Updates to make it nicer to read by adding spacing and contrast to the text and changing the font to the nicer Sans, one of Google's free Webfonts.

More info
The @font-face CSS directive links a font family, style and weight with where to load the font from, so that you can then use that font in your styles the same as any other font.
  • Under Scriptish in Firefox, @font-face directives go after the initial @namespace directive, and before the @-moz-document directive.
  • Under Scriptish in Chrome, place the @font-face directives at the top of the user style. has a wide selection of high-quality free Webfonts you can browse. To use a font, click the grey "Quick-use" button (a square with a right-facing arrow inside) to open up the Use page, select any additional versions of the font you want to use (such as customised bold and italic styles), and then scroll down to the instructions at the end.
  • click on the <link> tag to highlight it and then copy the text
  • open a new tab and paste it into the browser's address bar
  • remove everything except the URL inside the href='*URL here*' attribute
  • if the URL starts with http://, change it to https:// - see note 2
  • it should be something like Sans :)
  • press return to open the stylesheet in the browser
  • you should see a page with one or more @font-face directives, select all of them and copy
  • open your user style for editing and paste the @font-face directives as specified above
  • you can now use the font in your CSS!
Note 1: Remember that fonts with spaces in the name should be surrounded by quotes e.g.
font-family: 'Noto Sans', sans-serif !important;
Note 2: If the links in the @font-face directives aren't HTTPS links (i.e. start with https://), then the font won't load. If you are using Firefox you can press Control+Shift+J to open the Browser Console and see any errors loading the fonts.

Note 3: You can't use an @import directive in a user style unfortunately, otherwise it would be much simpler to include Webfonts!

Some quick links for fonts:

Applies to:

Related styles:

WARNING: This webware is not functioning properly. Please enable javascript in your browser and try again.