Use the Ubuntu font on any website with a bookmarklet

By , Published October 6, 2010

Force-use Ubuntu's default font on pretty much any website you wish with this handy bookmarklet – 'a small computer application, stored as the URL of a bookmark in a web browser' – by reader Miguel Fernández.

€œI find the ubuntu font to be an improvement in readability over almost all web-safe fonts – except Verdana.€ Miguel told us in his reasoning behind creating it.

Most websites used so-called 'web-safe' fonts to help ensure all users 'see' the same style when visiting a page.

Whilst users are able, through various hacks and settings, to choose their own 'font' to display in place of 'web safe' variants, Miguel's bookmarklet allows you to control which sites the font applies to.

image

Use

To state the obvious: this does require your desktop to have the Ubuntu font installed.

1. Create a new bookmark, preferably on your browsers' bookmark toolbar.

2. Enter the following for the URL:

javascript:void(document.body.style.fontFamily='ubuntu')

3. Now navigate to a page and press the bookmarklet to initiate the font change.

Whilst this works for a great number of sites it can't affect every;  it doesn’t work when an element font style overrides the body font style.

Great tip, Miguel!

Related posts:

  1. New Ubuntu font meets Android, looks stunning
  2. New Ubuntu font lands in Maverick for all users
  3. New font still on course for Ubuntu 10.10
Post a comment or leave a trackback: Trackback URL.
  • http://jack.kingbrick.co.uk/ Jack

    This works provided you have the font installed, of course.

    • http://omgubuntu.co.uk/ d0od

      That should go with out saying, right?

      • Anonymous

        Lol you would be surprised :P

      • http://twitter.com/fts9 Ed Coles

        Not on Windows it doesn’t

        • http://envygeeks.com Jordon Bedwell

          This is a blog about Ubuntu, what a silly thing to say.

          • http://jack.kingbrick.co.uk/ Jack

            Ubuntu is about freedom of choice, and I choose Windows

            (Ha, only joking. Forced to use it.).

  • http://pulse.yahoo.com/_FX5ITOLLHVNOY673XBRGCKF3DI Freddi

    Great! You can also add this line
    * {font-family:Ubuntu,UbuntuBeta}
    into the default style of your browser:

    ~/.config/chromium/Default/User StyleSheets/Custom.css
    ~/.mozilla/firefox/buqbrfzb.default/chrome/userContent-example.css

    (It’s only less mouse clicks). I’m still trying to force Chrome to display GTK buttons and controls…

    • http://pulse.yahoo.com/_FX5ITOLLHVNOY673XBRGCKF3DI Freddi

      even better:
      * {font-family:Ubuntu,UbuntuBeta!important}

      • Anonymous

        thx, Freddi, this works like a charm, even on pages that didn’t work with the bookmarklet!

        btw (for Chrome):
        ~/.config/google-chrome/Default/User StyleSheets/Custom.css

  • https://launchpad.net/~seahorsepip Seahorsepip

    FIREFOX->options->content tab->fonts & colors->Advanced….
    why use more then just the browser itself…

  • https://launchpad.net/~seahorsepip Seahorsepip

    FIREFOX->options->content tab->fonts & colors->Advanced….
    why use more then just the browser itself…

    • Anonymous

      And then set the sans and serif fonts and uncheck the checkbox that says other sites can choose their own fonts.

      This is easy. Like, seriously easy. This extension really has no reason to exist.

      • http://flavors.me/miguelfernandez Miguel

        Well, I think this little tool has a reason to exist.
        I know it’s not a big deal: it’s just a very basic javascript. I’m not a web developer and I just know a little of HTML, CSS and Python.
        I actually had already considered the alternatives: userstyles, font overriding via browser settings, and on-the-fly- tweaking via firebug or browser developer tools. The thing is, is you override via browser settings, either you end up with just a three fonts – serif, sans and mono- for your whole browsing, or you just specify to use the ubuntu font when there is no specified font – which left you using the font only for a few sites.
        With userstyles you have 3 options: 1)use the ‘!important’, which will override all the designer’s font selection; 2) just specify the font -same effect as the bookmarklet- or 3) create a more detailed userstyle -you’d have to add rules for the sites you want to tweak until you are satisfied. Of these 3, I’d prefer the third option… If I had the patience to add rules for all the sites I visit -there is life beyond social media and major websites.
        Before looking for this bookmarklet -just a strip&mod from one I found- I was changing the fonts via firebug and chrome developer tools. hat’s the most effective way to customize your experience. Unfortunately, I use my browser in permanent private mode, so, every change i made is lost as soon as I close the browser or whan reloading the page.
        I don’t want my whole web experience be redux to just the ubuntu font. font selection is part of the design and the personality of a site. I just use the bookmarklet as a 1-click solution for aestethics and readability. If it doesn’t work I use firebug.
        The beauty of open source and free software spirit is that, even if it’s not big deal, some users like me are encouraged to share what works for us. I guess it’s helpful for others too. This bookmarklet is inobtrusive if i don’t use it and helpful if I do. I hope you understand now why this little tool has a reason to exist. At least for me.

      • http://flavors.me/miguelfernandez Miguel

        Well, I think this little tool has a reason to exist.
        I know it’s not a big deal: it’s just a very basic javascript. I’m not a web developer and I just know a little of HTML, CSS and Python.
        I actually had already considered the alternatives: userstyles, font overriding via browser settings, and on-the-fly- tweaking via firebug or browser developer tools. The thing is, is you override via browser settings, either you end up with just a three fonts – serif, sans and mono- for your whole browsing, or you just specify to use the ubuntu font when there is no specified font – which left you using the font only for a few sites.
        With userstyles you have 3 options: 1)use the ‘!important’, which will override all the designer’s font selection; 2) just specify the font -same effect as the bookmarklet- or 3) create a more detailed userstyle -you’d have to add rules for the sites you want to tweak until you are satisfied. Of these 3, I’d prefer the third option… If I had the patience to add rules for all the sites I visit -there is life beyond social media and major websites.
        Before looking for this bookmarklet -just a strip&mod from one I found- I was changing the fonts via firebug and chrome developer tools. hat’s the most effective way to customize your experience. Unfortunately, I use my browser in permanent private mode, so, every change i made is lost as soon as I close the browser or whan reloading the page.
        I don’t want my whole web experience be redux to just the ubuntu font. font selection is part of the design and the personality of a site. I just use the bookmarklet as a 1-click solution for aestethics and readability. If it doesn’t work I use firebug.
        The beauty of open source and free software spirit is that, even if it’s not big deal, some users like me are encouraged to share what works for us. I guess it’s helpful for others too. This bookmarklet is inobtrusive if i don’t use it and helpful if I do. I hope you understand now why this little tool has a reason to exist. At least for me.

  • http://pulse.yahoo.com/_DA4ZLRNHRSIKOKJW3OIEJ4UHSA Matthias Elsdörfer

    Impossible in Windows, I assume? Would love to try this at work, but it doesn’t seem like there’s a TTF version of this font – am I missing something?

    • http://pulse.yahoo.com/_DA4ZLRNHRSIKOKJW3OIEJ4UHSA Matthias Elsdörfer

      Never mind :-)

    • http://pulse.yahoo.com/_DA4ZLRNHRSIKOKJW3OIEJ4UHSA Matthias Elsdörfer

      Never mind :-)

  • Anonymous

    Hah! Using it. Looks great.

  • http://slolinux.si kv1dr

    You can even install the script(http://userstyles.org/styles/37610) to use ubuntu font by default on some sites(facebook, google, youtube, wikipedia and so on).

  • http://ignorante.wordpress.com/ Ignorante

    In Firefox there’s an option in the font settings dialog where you can select not to allow webpages to specify their own fonts. I set Ubuntu font and unckecked that setting and now all the web uses Ubuntu font no matter what.

  • Pingback: This Chrome extension can force all websites to use the Ubuntu font

 
How To