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.

http://www.google.com/fonts 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 https://fonts.googleapis.com/css?family=Noto 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:

• Noto Sans (normal, bold, italic, bold+italic) – http://fonts.googleapis.com/css?family=Noto Sans:400,700,400italic,700italic
• Open Sans (normal, bold, italic, bold+italic) – http://fonts.googleapis.com/css?family=Noto Sans:400,700,400italic,700italic
• Droid Sans (normal, bold) – http://fonts.googleapis.com/css?family=Droid Sans:400,700
• Inconsolata (normal, bold) – http://fonts.googleapis.com/css?family=Inconsolata:400,700
• Rock Salt (normal) – http://fonts.googleapis.com/css?family=Rock Salt
• Audiowide (normal) – http://fonts.googleapis.com/css?family=Audiowide
• Niconne (normal) – http://fonts.googleapis.com/css?family=Niconne