Com afegir fonts personalitzades al lloc de WordPress

Com afegir fonts personalitzades al lloc de WordPress

Per què fer que el vostre bloc sigui avorrit utilitzant tipus de lletra estàndard? Deixa que el teu bloc parli de la teva vibrant personalitat i els temes que tractes amb una àmplia varietat de fonts personalitzades. Les fonts personalitzades són una bonica característica que permet al vostre bloc semblar preferible als altres.


Siguem sincers; a tots ens agraden els blocs i els llocs amb els tipus de lletra adequats. No només decoren el lloc, sinó que també ajuden a atraure l’usuari al contingut. Tanmateix, l’elecció dels tipus de lletra estàndard de WordPress és limitada i depèn del tema que utilitzeu. La bona notícia és que podeu afegir-los manualment o amb plugins especialitzats.

I aquí, sorgeixen dues preguntes: on obtenir fonts de lletra personalitzades per a WordPress i com instal·lar tipus de lletra personalitzats al lloc de WordPress.

Anem a esbrinar.

 Per què hauria d’utilitzar tipus de lletra personalitzats??

Passen els dies en què Times New Roman i Geòrgia es van considerar els únics tipus de lletra dels textos dels llocs web. Durant els últims anys, l’espai de tipus de lletra ha canviat completament amb l’arribada de tipus de lletra com Google Fonts i altres.

Actualment, hi ha centenars de tipus de lletra gratuïts, ajudes d’informació i formació i recursos dissenyats per al disseny, disponibles a Internet. A diferència d’Adobe Illustrator, Photoshop i altres aplicacions clàssiques, WordPress no us dóna un control complet sobre les fonts de manera predeterminada. Només alguns temes opten per donar suport i utilitzar tipus de lletra personalitzats.

Per tant, en aquesta publicació aprendreu a trobar tipus de lletra personalitzats adequats i com utilitzar-los al vostre lloc de WordPress.

La importància de l’ús de tipus de lletra personalitzats

Per què voleu canviar tipus de lletra, el sagnat entre paraules, l’espai entre línies, l’espai entre lletres o la saturació de tipus de lletra? Sigui com sigui, alguns estudis ho demostren la tipografia millora la comprensió lectora.

Depèn molt de la construcció de tipus de lletra. A nivell conscient i subconscient: tothom avalua el disseny d’una pàgina web per disseny.

El disseny de tipus de lletra afecta els lectors, encara que no en facin cas. Abandonar el disseny de tipus de lletra significa abandonar el desenvolupament en si. L’estat d’ànim del lector depèn d’aquest. El tipus de lletra facilita la lectura o obliga els usuaris a abandonar la pàgina.

Tots els navegadors web inclouen un conjunt de tipus de lletra per defecte. Això significa que si el tipus de lletra no s’especifica al CSS de la pàgina, s’utilitzarà la versió estàndard. Sempre podeu utilitzar els tipus de lletra per defecte, però compliquen el treball dels usuaris. És per això que és imprescindible utilitzar un tipus de lletra personalitzat. Si el tema no us ofereix opcions per canviar el tipus de lletra, us poden ajudar molts llocs web i eines.

Alternatives de tipus de lletra de Google

On trobar fonts personalitzades

Molts de vosaltres sabeu sobre fonts de Google gratuïtes. Hi ha molts més llocs on podeu trobar tipus de lletra bonics. Alguns d’ells són gratuïts per a ús personal. Si necessiteu un ús comercial, necessiteu una llicència. Els tipus de lletra de Google i els tipus Adobe Edge són gratuïts. Per això no són tan singulars. I això no ens convé.

Aquí en teniu uns quants altres recursos per trobar tipus de lletra d’ús comercial i gratuït:

  1. TemplateMonster – Al lloc web del mercat TemplateMonster, trobareu tot el que necessiteu per al disseny web. També hi ha molts tipus de lletra i paquets de tipus d’ús personal per un preu reduït. A més, es presenten en un kit de desenvolupament web. La col·lecció és enorme i creativa. Per ajudar-vos a triar, tots els tipus de lletra es presenten en fulletons o enquadres. Tots els tipus de lletra tenen també una llicència comercial.
  2. MyFonts – MyFonts ofereix actualment la selecció de fonts més gran del món. Tot i això, els preus aquí també es troben al segment més alt. Així, si teniu un pressupost ajustat, potser no serà per a vosaltres.
  3. FontSpring – Fontspring ven fantàstics tipus d’ús comercial. Però en gairebé qualsevol família, 1-2 tipus de lletra gratuïts que es poden utilitzar per a propòsits personals. A més, hi ha una secció independent amb tipus de lletra gratuïts. La col·lecció és vibrant. Però haureu d’estudiar detingudament la informació de la llicència d’un tipus de lletra particular abans de baixar.
  4. Cufonfonts – També és una extensa col·lecció de diferents tipus de lletra. Seleccioneu-ne qualsevol i veureu una pàgina amb informació detallada al respecte. Hi ha molts tipus de lletra gratuïts i es divideixen en seccions individuals. El sistema d’ordenació de CufonFonts és força flexible i convenient. També s’inclou suport Webfont.
  5. Dafont – Una altra col·lecció accessible de 3.500 tipus de lletra gratuïts. La majoria d’ells estan dissenyats només per a ús personal. Una bona característica DaFont és un sistema de categories. Podeu seleccionar tipus de lletra amb estil de còmics, videojocs, vintage o estilitzats com a caràcters japonesos.

L’elecció dels tipus de lletra és molt temptadora, perquè són bonics. Però no s’hauria d’escollir gaire. Utilitzeu no hi ha més de dos tipus de lletra al lloc. Aleshores, l’aspecte del lloc web serà coherent. Un cop hàgiu seleccionat els vostres tipus de lletra, assegureu-vos de descarregar els fitxers de cada estil que utilitzeu (normal, negreta, cursiva, etc.).

Ara que heu seleccionat el tipus de lletra adequat per al lloc, descobrirem com afegir-lo.

Com afegir tipus de lletra personalitzats a WordPress

Hi ha algunes maneres d’afegir tipus de lletra a un lloc de WordPress:

  1. Connectors: en aquest cas, s’utilitzen diferents complements de WordPress per facilitar el procés.
  2. Manualment: utilitzant aquest mètode, necessiteu una càrrega de font descarregada al lloc i editeu el fitxer CSS.
  3. Temes: molts temes populars inclouen opcions integrades per personalitzar els vostres tipus de lletra (nota: no cobrirem aquesta opció, ja que el procés varia en funció del tema que utilitzeu, però els temes premium de qualitat com el tema Total WordPress s’ofereixen en línia documents que podeu seguir fàcilment (com aquesta guia per afegir tipus de lletra personalitzats a Total)

Opció 1: canvieu els tipus de lletra WordPress amb complements

Si no ens importen els canvis globals, podem instal·lar plugins de WordPress que canviaran els tipus de lletra al vostre lloc.

Característiques dels complements personalitzats de tipus de lletra

El programari de codi obert té un avantatge per a l’interès de la comunitat i WordPress també té aquest avantatge. Diversos complements de WordPress us permeten afegir tipus de lletra personalitzats. Com triar un complement adequat amb tants? Quines són les característiques dels complements de lletra personalitzats?

Aquí hi ha alguns punts a tenir en compte:

  • Possibilitat d’utilitzar tipus de lletra personalitzats
  • Possibilitat d’utilitzar més d’un tipus de lletra
  • Capçaleres i components d’orientació
  • Bonus: la possibilitat de canviar la configuració del tipus de lletra des de l’editor visual

Això és tot. La primera característica de la llista és molt important. Sempre podeu descarregar fonts de llocs com DaFont, Font Squirrel, etc., però cal poder pujar-los a WordPress.

Vegem alguns plugins per a WordPress que us permeten penjar fonts personalitzades.

Carregador personalitzat de fonts

Carregador personalitzat de fonts

Aquest complement us permet descarregar fonts de Google i aplicar-les a diversos elements del vostre bloc. Per exemple, als encapçalaments o al cos de l’article o pàgina.

Utilitzeu qualsevol tipus de lletra

Utilitzeu qualsevol tipus de lletra

Aquest és un complement de WordPress que us ofereix una interfície còmoda per descarregar tipus de lletra i utilitzar-los directament a través de l’editor visual. L’editor visual de WordPress pot canviar automàticament el tipus de lletra de qualsevol text. Aquest complement ofereix diverses funcions, cosa que fa que el procés d’afegir tipus de lletra personalitzats sigui molt més manejable.

Tipus de WP de Google

Tipus de WP de Google

WP Google Fonts us permet utilitzar el catàleg de fonts de Google. Un dels avantatges sorprenents d’aquest complement és l’afegit de prop de 1.000 fonts de Google. Tot i que podeu obtenir fonts de Google de forma manual, és molt més fàcil utilitzar un complement per a la majoria dels usuaris.

Com instal·lar tipus de lletra amb un complement?

Prenem, per exemple, fonts de Google WP. Instal·leu aquest complement des del dipòsit oficial de WordPress i obriu la secció Tipus de lletra de Google.

Tipus de WP de Google

Aquí veureu un tauler de control de fonts de Google. Trieu tipus de lletra i canvieu diversos paràmetres, com l’estil de tipus de lletra, els elements als quals s’aplica, etc..

Opció 2: instal·leu manualment les fonts personalitzades de WordPress

Mitjançant la directiva @ font-face, podeu connectar un o diversos tipus de lletra al vostre lloc. Però aquest mètode té els seus pros i els seus contres.

Pros:

  • Mitjançant CSS, podeu connectar tipus de lletra de qualsevol format: ttf, otf, woff, svg.
  • Els fitxers de lletra estaran ubicats al servidor: no dependrà de serveis de tercers.

Contres:

  • Per a la connexió de tipus de lletra correcta per a cada estil, heu de registrar un codi separat.
  • Sense conèixer CSS, es pot confondre fàcilment.

Però no és un problema real si es pot simplement copieu un codi acabat i on heu d’especificar els vostres valors.

Nota: Abans de començar, assegureu-vos de crear un tema infantil per al vostre lloc. D’aquesta manera podeu fer totes les edicions al tema fill, deixant el tema bàsic en tacte per poder actualitzar-lo fàcilment segons calgui en el futur.

Pas 1: creeu una carpeta de “tipus de lletra”

Creeu una carpeta “tipus de lletra” dins del tema fill a la secció següent: wp-content / topics / your-child-theme / fonts

Pas 2. Carregueu els fitxers de lletra descarregats al vostre lloc web

Això es pot fer a través del tauler de control del vostre allotjament o mitjançant FTP.

Afegiu tots els fitxers de lletra a la carpeta de tipus de lletra recentment afegida: wp-content / topics / your-child-theme / fonts has creat.

Pas 3. Importa tipus de lletra mitjançant el full d’estils de tema infantil

Obriu el fitxer style.css del vostre fill i afegiu el codi següent al començament del fitxer CSS (després de comentar el tema infantil):

@ font-face {
font-family: 'MyWebFont';
src: url ('fonts / WebFont.eot');
src: format url ('fonts / WebFont.eot? #iefix') (format "opdedpe incrustat"),
format url ('fonts / WebFont.woff') (format "woff"),
format url ('fonts / WebFont.ttf') ('truetype'),
format url ('fonts / WebFont.svg # svgwebfont') ('svg');
font-pes: normal;
tipus de lletra: normal;
}

On MyWebFont és el nom del tipus de lletra i el valor de la propietat src (les dades entre claudàtors entre cometes) és la seva ubicació (enllaços relatius). Hem d’especificar cada estil per separat.

Des que connectem l’estil normal, establim les propietats de tipus de lletra i de lletra a normal.

Pas 4. Quan s’afegeix cursiva, escriviu el següent:

@ font-face {
font-family: 'MyWebFont';
src: url ('fonts / WebFont-Italic.eot');
src: format url ('fonts / WebFont-Italic.eot? #iefix') ('incrustat-opentype'),
format url ('fonts / WebFont-Italic.woff') (format "woff"),
format url ('fonts / WebFont-Italic.ttf') (format "truetype"),
url (format 'fonts / WebFont-Italic.svg # svgwebfont') ('svg');
font-pes: normal;
tipus de lletra: cursiva;
}

Quan tot sigui igual, només vam adjuntar la propietat de tipus de lletra a la cursiva.

Pas 5. Per afegir el tipus de negreta, afegiu el codi següent:

@ font-face {
font-family: 'MyWebFont';
src: url ('fonts / WebFont-Bold.eot');
src: format url ('fonts / WebFont-Bold.eot? #iefix') ('incrustat-opentype'),
format url ('fonts / WebFont-Bold.woff') (format "woff"),
format url ('fonts / WebFont-Bold.ttf') (format "truetype"),
url (format "fonts / WebFont-Bold.svg # svgwebfont") ('svg');
lletra-pes: negreta;
tipus de lletra: normal;
}

On establim la propietat de pes de lletra en negreta.

Recordeu indicar la ubicació correcta dels fitxers de lletra per a cada estil.

Al pas 6. Per connectar una cursiva en negreta, escriviu el següent:

@ font-face {
font-family: 'MyWebFont';
src: url ('fonts / WebFont-Italic-Bold.eot');
src: format url ('fonts / WebFont-Italic-Bold.eot? #iefix') (format "incrustat-opentype"),
format url ('fonts / WebFont-Italic-Bold.woff') format ('woff'),
format url ('fonts / WebFont-Italic-Bold.ttf') format ('truetype'),
format url ('fonts / WebFont-Italic-Bold.svg # svgwebfont') format ('svg');
lletra-pes: negreta;
tipus de lletra: cursiva;
}

Doncs bé, tot això �� Ara heu connectat quatre estils de tipus de lletra al vostre lloc web.

Però hi ha una observació: aquesta connexió de lletra es mostrarà de manera incorrecta a Internet Explorer 8. El consell és que hi ha molt poques persones que encara utilitzin IE8..

Afegeix fonts personalitzades per a WordPress

Què és el primer que noten els usuaris quan visiten el vostre lloc? És cert, el seu disseny! La major part del disseny es basa en l’ús adequat de tipus de lletra bonics. Per tant, heu de tenir cura del disseny de tipus de lletra del vostre lloc. Afegiu codi o utilitzeu un dels complements esmentats anteriorment per incorporar un nou estil de lletra. Quina és la vostra manera de triar.

Assegureu-vos que no utilitzeu més de dos tipus de lletra al mateix lloc. Com que més fonts personalitzades s’afegeixin al lloc, més lenta serà la velocitat del lloc.

Tot això, no dubteu en comentar. 

També estarem encantats d’escoltar quina opció trieu per afegir una font personalitzada al vostre lloc web i on trobareu el vostre tipus de lletra.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map