A tutte le persone che si occupano, quotidianamente o saltuariamente, di webdesign è probabile che capiti spesso di chiedersi quale font venga utilizzato in qualche pagina. Se da un lato è vero che chi ha un minimo di preparazione sull’argomento può semplicemente mettersi a spulciare il codice, rimane comunque il dubbio su quale font dell’attributo font-family venga effettivamente utilizzato per il rendering della pagina.

Per fortuna dei neofiti, e soprattutto della comodità dei designer, uno studente dell’Università dell’Illinois, Chengyn Liu, ha realizzato un comodo bookmarklet che permette di identificare il carattere utilizzato per il rendering del browser semplicemente passandoci sopra con il puntatore del mouse.

Utilizzo

Si può provare direttamente sulla pagina web del progetto, dove sono presenti alcuni campi di testo che utilizzano diversi font. Per un utilizzo su altri siti basta trascinare il link presente nella pagina fino alla barra in cui il browser salva i preferiti.

Per l’utilizzo le istruzioni sono semplici. Basta cliccare sul bookmarklet e poi andare a posizionare il puntatore sul testo che ci interessa, quando abbiamo finito possiamo interrompere WhaatFont cliccando sul pulsate “exit WhatFont” che è apparso in alto a destra nella finestra del browser.

Se hai installato il bookmarklet WhatFont e vuoi testarlo su questo blog puoi verificare che il font utilizzato è Ubuntu, e dovrebbe essere renderizzato così in tutti i browser che supportano font-face.

Salvataggio del bookmarklet su Chrome e altri browser privi di barra dei preferiti

Su Chrome/Chromium non è possibile trascinare il link sulla barra, quindi bisogna installare WhatFont in modo diverso. In generale basta cercare il campo href del link e con quello creare manualmente un bookmark.

Per semplificare il tutto riporto direttamente l’indirizzo da inserire nella creazione del bookmark:
javascript:(function(){document.body.appendChild(document.createElement('scr'+'ipt')).setAttribute('src', 'http://chengyinliu.com/wf.js')})();

Per poter richiamare in modo semplice il bookmark è necessario utilizzare una delle estensioni per Chrome che permettono di avere un menu a tendina per i preferiti, io uso Bookmarks Menu.