Plugins » Roboto Sans Web Fonts 1.0

The “Roboto Sans Web Fonts” plugin will install the complete Roboto Sans font family (2011 version, including the condensed variants) on your webhost and embeds it via @font-face css rules. It also adds all the different weights to CKEditor’s font selection drop-down for WYSIWYG editing.

As you may know, Roboto can also be loaded from the Google Fonts Content Delivery Network (CDN) which has some advantages and some drawbacks. Before you install hastily, consider the pros and cons of this plugin:

* WYSIWYG editing: The plugin allows the fonts to be used in CKEditor. In fact, this is the main purpose of the plugin.
* Independence from 3rd parties. All fonts are loaded from your webhost.
* Support for iOS 5 and earlier by including SVG fonts (well, … does anyone still use iOS 5?)
* It's convenient. Just download and install.

* Unlike Google CDN, this plugin does not provide different subsets. The current version only includes Roboto’s western latin (ANSI) characters. No eastern languages support. (The full character range would almost double the file sizes).
* No weights/styles configuration. Currently there is no way to change which styles and weights of Roboto are embedded unless you know how to edit the plugin’s code and css.
* Loading time/bandwidth: Since the web fonts are downloaded from your webhost it will take up to a few seconds until they are all loaded. If you are loading Roboto from Google CDN, there is a good chance that your web visitors already have them in their browser’s cache.

A few advantages of the manner in which the plugin’s CSS is built up:
Roboto’s weights are grouped together to resemble redundant font families. This means that you can always use the <b> or <strong> tags (and CKEditor’s [B] button) to render the next heavier weight. E.g. Roboto Light set as bold will use Roboto Regular, Roboto Bold + bold will render Roboto Black, and so on.

For theme developers:
You may want to use this plugin together with a theme. If you look at the plugin’s CSS, you'll notice that the font families’ names are all lower case. This is needed to avoid a peculiarity of CKeditor’s configuration. Therefore you must use sth. like the following notation in your theme’s stylesheet:
body { font-family: roboto, sans-serif; }
h1 { font-family: roboto-black, 'Arial Black', sans-serif; }
The complete list of all font-families is: roboto-thin, roboto-light, roboto, roboto-medium, roboto-bold, roboto-black, roboto-condensed-light, roboto-condensed, roboto-condensed-bold.

Roboto by Christian Robertson is licensed under Apache 2.0 license. It is the default sans-serif and system font in Android since ver. 4.0. See also:

Change log:
Version 1.0: initial release.

Editor’s note: Since the skeleton code of this plugin is always the same, it’s quite easy to provide more good font families this way. So, if you like this plugin and the way it deals with web fonts, drop me a line in the plugin’s support forum -> and I’ll try to deliver ASAP. If you yourself are a typophile plugin developer, feel free to use my code and the icon design and share your gpEasy webfont kit with us.

Just the icon for the list viewRoboto font family is now available in CKEditor’s font drop-down list.
Just the icon for the list view 
Just the icon for the list viewRoboto font family is now available in CKEditor’s font drop-down list.

Tags:  web font, webfont, @font-face, font embedding, CKEditor, eot, ttf, woff, svg

Minimum Typesetter Version
Used Most with Typesetter Versions 5.1.0   5.0.3   4.3.4   5.0.0
Last Updated6 years ago (2016-02-19)
Created7 years ago (2015-02-16)
Created Byjuergen
HooksView Hooks Used by This Script


elFinder 2.1.50 in Upcoming Release

A new release for Typesetter is in the works with a lot of improvements including the ... Read More

Typesetter 5.1

Typesetter 5.1 is now available for download. 5.1 includes bug fixes, UI/UX improvements, ... Read More

More News

creisi productions

Dienstleistungen von creisi productions, Ennetbürgen (Schweiz): * Konzeption, Planung und Erstellung Ihres Internet-Auftritts * Betreuung und Aktualisierung/Pflege Ihrer Websi...

Find out more about our Provider Spotlight

Log In