Hace unos días OMG Ubuntu publico un pequeño bookmarklet para que pudieramos visualizar cualquier texto de una pagina web utilizando la nueva fuente de texto de ubuntu.
Importante: Tienes que tener instalada la Ubuntu 10.10 Font o en otro caso este tip no funcionara.
Basicamente consiste en pegar en la barra de direcciones el siguiente contenido:
javascript:void(document.body.style.fontFamily='ubuntu')
Entonces la página se renderiza utilizando la fuente de texto de Ubuntu, y la página se ve “preciosa”…
Pero es un poco “pesado” tener que teclear siempre ese valor, o tener que crear un “bookmarklet” con ese contenido, cada vez que queramos visualizar la página, asi que hay otras opciones.
Una de ellas consiste en editar el fichero CSS de preferencias de usuario de Chrome que se encuentra en:
~/.config/chromium/Default/User StyleSheets/Custom.css
~/.mozilla/firefox/buqbrfzb.default/chrome/userContent-example.css (para el caso de Firefox)
y añadir la linea:
* {font-family:Ubuntu,UbuntuBeta!important}
Asi el cambio se hace permanente y todas las páginas se renderizan usando la fuente de texto de Ubuntu.
Y luego ésta la tercera opción que creo mejor de todas, pues puedes habilitar/deshabilitar la extensión cuando quieras.
He creado un chrome user style para habilitar la previsualización de textos con la nueva fuente. Basicamente esto es un fichero javascript donde defines las reglas CSS de estilo HTML que quieres usar en la página. Si sabes de lo que hablo, estupendo, si no, no importa:
Abre un editor de texto y copia el siguiente contenido:
// ==UserScript==
// @name Ubuntu (unified font style) v1.0
// @namespace http://userstyles.org
// @description Usar Ubuntu Font en todas las paginas.
// @author modificado por piwi
// @homepage http://userstyles.org/styles/178
// @include javascript:*
// @include http:*
// @include https:*
// ==/UserScript==
(function() {
var css = "* {\n font-family: Ubuntu, UbuntuBeta !important; }";
if (typeof GM_addStyle != "undefined")
{
GM_addStyle(css);
}
else if (typeof PRO_addStyle != "undefined")
{
PRO_addStyle(css);
} else if (typeof addStyle != "undefined")
{
addStyle(css);
}
else
{
var heads = document.getElementsByTagName("head");
if (heads.length > 0) {
var node = document.createElement("style");
node.type = "text/css";
node.appendChild(document.createTextNode(css));
heads[0].appendChild(node);
}
}
})();
Guardalo como: “Ubuntu (unified font style) v1.0.user.js” y arrastralo sobre una ventana de Chrome, entonces se instalara como si fuera una extensión más de Chrome. De hecho desde extensiones, podras habilitarla/o deshabilitarla cuando desees.
El efecto de tener activado este user script es que cada vez que navegues por una página se use la fuente de texto de Ubuntu. Como podrás comprobar en la imágen:
Genial. Ya en Firefox lo estaba usando. Aunque me gustaría saber si existe alguna forma de ponerlo siempre por defecto, por lo menos en FF y no tener que recurrir a los Bookmarks cada vez..
Si, lo comento en el texto:
para Firefox, edita:
~/.mozilla/firefox/buqbrfzb.default/chrome/userContent-example.css (para el caso de Firefox)
y añade la linea:
* {font-family:Ubuntu,UbuntuBeta!important}
Jajaja cierto.. Eso me pasa por tratar de leer rápido.. Gracias.
Pues no me ha funcionado y copié la línea tal y cual dices. Reinicié FF y nada. Veré si encuentro algo en este link:
http://www.mozilla.org/unix/customizing.html#userContent
que raro, no se, prueba tal vez con
body
{
font-family: Ubuntu
}
despues de todo, solo es jugar con las propiedades CSS
¡¡¡Joder que papelazo!!! Jajajaja una vez más por no leer. Si ya lo solucioné, el problema está en que estaba editando el fichero de ejemplo, y mira que me lo decía:
/*
* Edit this file and copy it as userContent.css into your
* profile-directory/chrome/
*/
Pero nada, yo que no leía.. jajaja
Ya me funciona, gracias. Ahora lo publico en mi blog, junto con tus extensiones…
Ni que decir tiene que si no te gusta Ubuntu Font y quieres usar otra fuente, solo tienes que editar el script anterior y cambiar la linea del css:
Por ejemplo:
var css = “* {\n font-family: Aller !important; }”;
para Aller
var css = “* {\n font-family: Droid Sand,Droid !important; }”;
para Droid
etc…
Luego la empaquetare al estilo:
{
// The name of your plugin
“name”: “My Site Skin”,
“version”: “1.0”,
// Give it a useful description
“description”: “A generic userstyle extension.”,
“content_scripts”: [ {
“all_frames”: true,
// The name of the CSS file (packaged with your extension) to inject
“css”: [ “css/myuserstyle.css” ],
// The sites on which to inject the CSS
“matches”: [ “http://*/*”, “https://*/*” ]
} ]
}
y la subire a Chrome extensions, para que sea más facil de instalar.