Traductor

Google Fonts: Disseny de projectes.





Tant en els dissenys de projectes adreçats a Internet com en la realització de tasques amb suport de paper, és molt important disposar dels tipus de lletra adequats als nostres objectius.

Google Fonts ofereix un ampli ventall de formats entre els quals trobarem la lletra que necessitem. Podem emprar-la accedint directament a la font (projectes web) o baixant l'arxiu corresponent per tal d'instal·lar-la al nostre equip (projectes paper).

Si la decisió és instal·lar la font i emprar-la mitjançant un processador de textos, haurem d'accedir a Google Fonts, triar i afegir a la nostra col·lecció. Després disposem de l'opció per a baixar els arxius en format comprimit.


En el cas de voler utilitzar una o varies fonts en un projecte web, es presenten dos entorns bàsics d'ús: pàgina web o blog.

La utilització en una pàgina web suposa uns coneixements bàsics de llenguatge HTML, cosa per la qual no serà tractada en aquesta entrada. Tot i així, el que ací s'exposa pot ser d'utilitat en la creació i disseny de llocs web.

Ús de Google Fonts en Blogger mitjançant un arxiu d'estil CSS allotjat en Google Drive.


Prèviament s'han triat els següents tipus de lletra: Courgette, Aclonica, Trade Winds i Shadows Into Light.


1. Creació de l'arxiu CSS

Lluny d'analitzar totes les variables que poden formar part dels arxius CSS, sols ens fixarem en aquelles imprescindibles que afecten al tipus de lletra. L'arxiu que s'empra per a il·lustrar aquest exemple conté les següests línies:
lletra1 {font-family: 'Courgette', Arial, sans-serif;}
lletra2 {font-family: 'Aclonica', Arial, sans-serif;}
lletra3 {font-family: 'Trade Winds', Arial, sans-serif;}
lletra4 {font-family: 'Shadows Into Light', Arial, sans-serif;}
La modificació per tal d'afegir o canviar tipus de lletra pot realitzar-se amb qualsevol editor bàsic de text (tipus Bloc de Notes de Windows). Amb el següent enllaç podeu baixar l'arxiu fonts.css.


2. Pujar l'arxiu a Google Drive i obtenir l'adreça d'ús

L'entrada "Google Drive com a servidor web i JClic" explica el procés mitjançant el qual es comparteixen arxius o carpetes com a públics i s'obtenen les adreces d'ús. En aquest cas, sols es comparteix l'arxiu fonts.css.


3. Incloure les instruccions necessàries en Blogger.

Podem modificar l'arxiu HTML de tot el blog, però crec que és millor realitzar les modificacions en aquelles entrades que ens interessen.

Després d'escriure tot el contingut de l'entrada, haurem de seguir:

a) Triar l'opció HTML. Accedim al contingut HTML de la nostra entrada.

b) Afegir al principi aquestes línies:

<link href="http://fonts.googleapis.com/css?family=Courgette|Aclonica|Trade+Winds|Shadows+Into+Light" rel="stylesheet" type="text/css"></link>

<link href="https://googledrive.com/host/0B4gFoghclW33OGZOVmJDTm9zSVU" rel="stylesheet"></link>

La primera enllaça amb les fonts Google triades. Aquesta línia se'ns ofereix des de Google Fonts. En qualsevol cas, si el nom del tipus de lletra està format per més d'una paraula, cal afegir el signe + tal i com apareix.

La segona línia permet l'accés a l'arxiu CSS que prèviament hem pujat a Drive.

c) Indicar el tipus de lletra.

Per tal de que una o varies paraules apareguen amb la tipografia triada, simplement haurem d'afegir (edició HTML) les etiquetes corresponents:

Courgette: <lletra1> Paraula/Parales </lletra1>
Aclonica: <lletra2> Paraula/Parales </lletra2>
Trade Winds: <lletra3> Paraula/Parales </lletra3>
Shadows Into Light: <lletra4> Paraula/Parales </lletra4>

Podem afegir més tipus de lletra (lletra5, lletra6,...), però l'accés a Google Fonts pot fer que la càrrega de la nostra pàgina siga més lenta. També podem canviar el nom de les etiquetes, sempre que el canvi es realitze prèviament en l'arxiu CSS.

Courgette
Aclonica
Trade Winds
Shadows Into Ligth

Una vegada realitzades les tasques anteriors i tornant a la secció Redacta, podem continuar modificant les paraules amb la nova tipografia triant les variables que Blogger ens ofererix: negreta, encapçalament, cursiva,...

Si volem seguir modificant el codi HTML per tal d'adequar la tipografia al nostre gust, realitzarem algunes modificacions com les referides al tamany de la lletra, per exemple.

<h2><lletra1><b><span style="font-size: 40px;">Prova Google Fonts Courgette</span></b></lletra1></h2>

Prova Google Fonts Courgette


<lletra2><b><span style="font-size: large;">Prova Google Fonts Courgette</span></b></lletra2>
PROVA Google Fonts Aclonica

<lletra3><i><span style="font-size: x-large;">Prova Google Fonts Trade Winds</span></i></lletra3>
Prova Google Fonts Trade Winds

<lletra4><u><span style="font-size: 35px;">Prova Google Fonts Shadows Into Light</span></u></lletra4>
Prova Google Fonts Shadows Into Light