93 318 54 36

Guia de Google Fonts: Com triar fonts per al vostre lloc web?

25/05/2022
Elizabeth De León

Com haureu entès, les fonts de Google són una sèrie de caràcters continguts en una biblioteca topogràfica real, en concret es tracta d'un conjunt d'interfícies de programació d'aplicacions o més conegudes com a APIs. En particular, permet a tots els usuaris utilitzar fonts web a la seva pròpia aplicació o lloc web. En particular, es poden fer servir lliurement ja que estan equipats amb una llicència lliure, en detall és una biblioteca que posa a disposició de tots un directori web interactiu real, la qual cosa és essencial per fer més fàcil la selecció i gestió de fonts a través de Android. i CSS.

Google posa a disposició aquest servei i tots els caràcters presents i lample de banda són definitivament gratuïts.

Per aquest motiu és necessari escollir acuradament les tipografies més adequades al vostre cas, per tal d'optimitzar el rendiment tècnic i fer que el lloc web sigui agradable a la vista de l'usuari.

Què és Google Fonts?

Google Fonts és una llicència gratuïta per simplificar fonts a través de CSS i Android. Google Fonts es va crear per simplificar la cerca de fonts i està disponible de forma gratuïta amb llicències de codi obert. Es poden utilitzar tant per a projectes comercials com no comercials.

Dins del lloc, a través de l'ordre de cerca apropiada, podem triar la font estèticament més adequada per al nostre cas i recuperar-la dins del nostre lloc, per garantir que el text d'una pàgina en particular tingui el format d'acord amb aquests dictats.

Amb la definició de les primeres especificacions CSS, de fet, va sorgir la necessitat que els recursos web recuperessin fàcilment les fonts no dels terminals locals sinó dels servidors, per garantir una visualització correcta per a tothom.

Google Web Fonts, avui Google Fonts, ha reemplaçat el TypeKit anterior en el subministrament de fonts per incrustar en llocs web: de fet, és suficient integrar el codi apropiat a l'HTML o CSS del lloc per garantir la mateixa visualització per a tots els dispositius.

Les tipografies que podem triar es divideixen en:

  • Serif (font amb gràcies), petites extensions al final de les lletres que semblen apropar-les entre si, com Droid Serif;
  • Sans Serif (font sans serif), com Roboto i Open Sans;
  • Escriptura a mà (fonts que s'assemblen a l'escriptura a mà), com ara Shadows Into Light;
  • Monospace (font els caràcters del qual tenen la mateixa amplada i que tenen un estil que s'assembla al de les màquines d'escriure) com a Inconsolata
  • Pantalles (fonts amb lletres molt properes) com Lobster i Poiret One, generalment adequades per a projectes grans

Les fonts han de triar-se en un acord, sense exagerar per no sobrecarregar gaire el lloc; optar per més de dues o tres fonts per pàgina en dificultaria la lectura.

Avantatges de fer servir fonts de Google

Les fonts de Google, com es va esmentar, són recursos estètics del lloc web que poden incentivar el temps de permanència i les conversions a CTA. De fet, ofereixen diversos avantatges:

  • biblioteca de fonts gratuïta i segura (proporcionada per Google)
  • fonts d'ús lliure per a projectes comercials i no comercials (no s'apliquen restriccions de llicència)
  • millorar la llegibilitat de les pàgines
  • molt lleugers (fan més ràpida la càrrega de la pàgina web que els allotja)
  • molt versàtil : disponible en nombroses versions per satisfer les necessitats visuals i de format de tots
  • assegurar-se que les fonts siguin compatibles amb tots els llocs i aplicacions
  • estèticament atractiu

Totes les fonts de Google compleixen els estàndards necessaris de la comunitat de Google i demostren ser molt compatibles amb la majoria dels llocs.

Per què fer-los servir?

Com sabem, les fonts utilitzades també poden tenir un impacte significatiu en els temps de càrrega de les pàgines web i la llegibilitat dels continguts. Es tradueixen, per tant, en elements importants per a l'experiència de l'usuari de la pàgina, que poden afectar el posicionament a través dels senyals de satisfacció que produeix l'ús dels usuaris.

Les fonts de Google estan dissenyades per Google per enviar larxiu de la manera més lleugera possible en relació amb les tecnologies utilitzades per al seu ús.

Gràcies a un menor temps de càrrega podem aconseguir una menor taxa de rebot de la nostra pàgina web, augmentant les possibilitats de conversió. De fet, una font difícil de llegir dissuadeix d'arribar al final de la pàgina i incita l'usuari a sortir abans de respondre la crida a l'acció.

Quines fonts de Google triar per al nostre lloc?

La tipografia pot ser molt valuosa per al vostre lloc. Una tipografia adequada per al vostre projecte reflecteix l'estil estètic del lloc web, és molt llegible i transmet certa personalitat.

A la botiga hi ha més de 1040 fonts entre les quals segurament trobarem l'adequada per a nosaltres. A més, com hem comentat, les tipografies estan disponibles de forma gratuïta, per la qual cosa podem experimentar amb una o altra fins a trobar la que s'adapta millor al nostre lloc. Així que prenem un temps per triar la font adequada per al disseny del nostre lloc, cosa que fomentarà una major lectura.

Per triar les Google Fonts més adequades per al nostre lloc hem de prestar atenció a diversos aspectes com:

  • llegibilitat
  • professionalitat d'acord amb l'estil del lloc
  • mida del projecte web per adaptar-se a
  • tema del lloc

Entre les tipografies més populars en circulació tenim:

  • Robot (font del sistema per a Android)
  • Kinsta (utilitzat per Google per a alguns llocs web)
  • Source Sans Pro (la primera font de codi obert d'Adobe)
  • Raleway (font especial de gran format)
  • alegre
  • nunito sans
  • Work Sans (adequat per a ús en pantalla)

Les fonts de Google són gratuïtes

La llicència, com es va esmentar anteriorment, és gratuïta i, com que és de codi obert, no té costos. No obstant això, és bo saber que certs caràcters es difonen a través de la llicència d'Apache. No obstant això, en totes dues situacions hi ha l'oportunitat de fer-los servir també per a ús comercial. A més, aquesta col·lecció també és divulgada pels serveis web SkyFonts de Monotype i Edge Web d'Adobe i també per Typekit de Monotype.

Recentment, més precisament a partir del 2021, aquest projecte també s'ha estès a les icones, ja que mitjançant un primer conjunt de símbols compostos per les necessitats generals de comunicació i icones materials que ofereixen la possibilitat de descarregar els elements directament a l'escriptori per al seu ús en digital Format vàlid tant per a iOS, Web i Android.

Com instal·lar Google Fonts al lloc

Les fonts de Google es poden incrustar des del lloc on es col·loquen o descarregar i incrustar a través de FTP, així com utilitzar-se per a projectes d'impressió.

Abans de descarregar una o més fonts de Google Fonts, és important triar-les. El catàleg en línia definitivament inclou una infinitat de personatges. Aquest servei, a més de satisfer totes les necessitats dels usuaris des d'aquest punt de vista, ofereix l'oportunitat de cercar ràpidament les que més t'agraden i que pretens utilitzar a la teva plataforma. En particular, la pàgina oficial de Google Fonts us permet decidir diferents filtres per realitzar ràpidament i fàcilment una cerca precisa, en detall, hi ha l'oportunitat d'intervenir en els sectors següents:

  • Cerca : aquest camp us permet escriure el nom exacte d'una font que ja coneixeu;
  • Vista prèvia de text : us permet veure una vista prèvia real de l'efecte òptic de la font que voleu utilitzar, això succeeix en particular en triar un text bàsic o afegir una oració d'acord amb les seves preferències;
  • Cos de lletra : ajusta detalladament les mesures en píxels del text presentat durant la fase de vista prèvia ;
  • Categories : seleccioneu el tipus de font segons les 5 seccions en què es troben totes les tipografies de Google;
  • Idioma : limita la cerca per l'alfabet d'un idioma específic;
  • Propietats de la font: escolliu certes propietats de la font, com el nombre d'estils, la inclinació, el gruix i l'amplada.

Com instal·lar les fonts de Google

  • visiteu el lloc de fonts de Google
  • seleccioneu la font en qüestió
  • feu clic a Descarregar per descarregar-lo en format zip
  • descomprimiu la carpeta, feu clic dret al fitxer ttf i seleccioneu instal·lar:

D'aquesta manera podem utilitzar les mateixes tipografies que el bloc o lloc per crear ebooks o gràfics d'acord amb l'estil web.

En primer lloc, heu de verificar si el tema del nostre lloc web ja integra Google Fonts, ja que els temes premium més recents ja estan configurats per allotjar-los. En cas contrari, podem instal·lar un complement com Easy Google Fonts o Google Fonts Typography per introduir-los.

Si no volem instal·lar un plugin més, podem recórrer a la trucada a través de l'API de Google Fonts . En aquest cas, heu d'afegir un enllaç entre el full HTML i el full d'estil.

La plataforma ens proporciona el codi apropiat per incrustar al de la pàgina HTML per simplificar la recuperació de les fonts seleccionades al nostre lloc.

Com afegir fonts de Google a WordPress

És bo saber que hi ha dos mètodes principals per incloure fonts de Google directament en els seus projectes, específicament per a un estil de WordPress, necessita instal·lar un determinat complement on hi ha l'oportunitat de delegar el treball o l'altra opció per afegir una font implica el procediment manual .

En primer lloc, si el treball es fa utilitzant l'entorn WP , cal analitzar que el tema no inclou Google Fonts alhora per defecte. Per comprovar aquest aspecte, només cal comprovar el rendiment al panell de configuració corresponent. En cas que aquesta forma no hi sigui present hi ha una altra opció que és descarregar el plugin com Google Font Typography o Easy Google Fonts instal·lant directament al panell, en aquest punt es pot continuar amb l'elecció de la font que més li cridi l'atenció.

A més, si voleu utilitzar l'API de Google Fonts per incloure fonts directament als llocs web mitjançant el procediment manual, no heu de fer cap tipus de programació, ja que tot el que ha de fer és simplement integrar un enllaç específic al full d'estil al document HTML. Per tant, cal esmentar la font en un estil CSS. Simplement per dur a terme aquest pas de forma ràpida i tranquil·la només cal copiar i enganxar el codi indicat a l'etiqueta de l'enllaç que es troba específicament a la carpeta anomenada capçalera del lloc. Finalment, és essencial fer servir el CSS resultant per portar la regla als components HTML.

Conclusions

A hores d'ara segurament entendràs què són les Google Fonts i com necessites instal·lar-les al teu lloc web, pàgina o bloc per poder utilitzar-les.

Les fonts representen una part important al món dels gràfics i llocs web on fan que l'estil de la plataforma sigui únic i especial. L'elecció de les fonts de Google és definitivament un pas important, ja que definiran l'estil visualment. Amb base als estudis realitzats pel disseny web, va sorgir que en aquest sector cal seguir certes regles per tenir un resultat perfecte d'acord amb les seves preferències i necessitats, en particular, aquestes últimes es refereixen específicament a colors, formes i fonts.

Pel que fa a les fonts, aquestes últimes han de ser: fàcils de llegir i comprendre , si la font escollida no és fàcil de llegir es recomana fer-la servir gràficament en algunes imatges a través d'elements gràfics, realitzar una de les comprovacions de compatibilitat entre navegadors , usar des d'un fins a un màxim de tres tipus de lletra amb estil diferent, utilitzeu fonts de tipus clàssic usant una font serif per a títols i encapçalats i sans-serif al seu lloc per a textos.

Necessites posar al dia la teva web?

Necessites algun dels nostres serveis de disseny web? A IndianWebs comptem amb una llarga experiència, i un equip de programadors i dissenyadors web a diferents especialitats, som capaços d'oferir un gran ventall de serveis en la realització de pàgines web a mida. Sigui quin sigui el teu projecte, ho afrontarem.