Colocar tipografía personalizada en título de WordPress

bewstars · 27 Oct 2020

tengo una tipografia que quiero colocarla en el wordpress en el titulo como puedo hacer eso?, esta es la web donde quiero colocar la tipografia, es una que no esta en google fonts.

Digital Hnos – Juegos digitales

MajesticCat · 27 Oct 2020

bewstars dijo:
tengo una tipografia que quiero colocarla en el wordpress en el titulo como puedo hacer eso?, esta es la web donde quiero colocar la tipografia, es una que no esta en google fonts.

Digital Hnos – Juegos digitales

Super Facil:

Insertar CODE, HTML o PHP:

/* font-regular - latin */
@font-face {
  font-family: 'Nombre de la Font';
  font-style: normal - normal/italic;
  font-weight: 400 - Peso de la font (100,300,Regular,500,700,900);
  src: url('URL DE DONDE TIENES LA FUENTE ALOJADA'); /* IE9 Compat Modes */
  src: local('Nombre'), local('Nombre-Regular'),
       url('URL DE DONDE TIENES LA FUENTE ALOJADA.woff2') format('woff2'), /* Super Modern Browsers */
       url('URL DE DONDE TIENES LA FUENTE ALOJADA.woff') format('woff'), /* Modern Browsers */
       url('URL DE DONDE TIENES LA FUENTE ALOJADA.ttf') format('truetype'), /* Safari, Android, iOS */
       url('URL DE DONDE TIENES LA FUENTE ALOJADA.svg#Abel') format('svg'); /* Legacy iOS */
}

Tienes que modificar:

Font-family por el nombre de la tipografia
Font-style si es normal o italic
Font-weight el peso de la tipografia
src URL es la URL donde esta el archivo
local el nombre de la tipografia y nombre-Regular
Las demas URLS si tienes mas formatos.

Ya luego de esto tienes que agregar el siguiente CSS para que la tipografía sea utilizada, si es un solo tipo de tipografía, con seleccionar el body es más que suficiente:

Insertar CODE, HTML o PHP:

body {
font-family: 'Nombre de la tipografia';
font-display: swap;

Alternativamente si solo quieres usar la tipografia puedes ser mas especifico:

Insertar CODE, HTML o PHP:

,h1,h2,h3,h4,h5,p {
    font-family: 'Nombre de la tipografia';
}

bewstars · 27 Oct 2020

Vi que hay una manera mas sensilla puede ser subiendo la tipografia a mi servidor?

MajesticCat · 27 Oct 2020

bewstars dijo:
Vi que hay una manera mas sensilla puede ser subiendo la tipografia a mi servidor?

Yo alojo todas las tipografías en BunnyCDN (cdn.globalfonts.net) para los clientes y webs personales, ya que si me muevo de servidor no tengo que asegurarme que estas también estén incluidas en el respaldo. Sin contar que las tipografías son guardadas en más de 40 servidores a nivel mundial, haciendo que las mismas carguen super rápido.

Sin embargo, la puedes subir vía FTP o por el cPanel y luego modificar la URL de tu web, que si dominio.com/font/font.woff2

bewstars · 27 Oct 2020

Osea que puedo subir las tipografias a esa web que me nombras y vincularlas con el mi wordpress?, y si subo a mi ftp solo seria cambiar las rutas?

MajesticCat · 27 Oct 2020

bewstars dijo:
Osea que puedo subir las tipografias a esa web que me nombras y vincularlas con el mi wordpress?, y si subo a mi ftp solo seria cambiar las rutas?

Solo daba ejemplo, y sea donde sea que la subas igual tienes que indicar la URL, ya que esta tiene que ser pública.

bewstars · 27 Oct 2020

Genial termino de actualizar todo y le doy caña a eso a ver como me queda. Gracias

MajesticCat · 27 Oct 2020

No hay de que, dejo esto por si alguien quiere usar la famosa tipografía Roboto con el peso de 400 o 700:

Insertar CODE, HTML o PHP:

@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: local('Roboto'), local('Roboto-Regular'),
       url('https://cdn.globalfonts.net/roboto/roboto-v20-latin-regular.woff2') format('woff2'),
       url('https://cdn.globalfonts.net/roboto/roboto-v20-latin-regular.woff') format('woff');
}

@font-face {
  font-family: 'Roboto';
  font-style: italic;
  font-weight: 400;
  src: local('Roboto Italic'), local('Roboto-Italic'),
       url('https://cdn.globalfonts.net/roboto/roboto-v20-latin-italic.woff2') format('woff2'),
       url('https://cdn.globalfonts.net/roboto/roboto-v20-latin-italic.woff') format('woff');
}
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 700;
  src: local('Roboto Bold'), local('Roboto-Bold'),
       url('https://cdn.globalfonts.net/roboto/roboto-v20-latin-700.woff2') format('woff2'),
       url('https://cdn.globalfonts.net/roboto/roboto-v20-latin-700.woff') format('woff');
}
h1, h2, h3, h4, h5, h6 {
    font-family: 'Roboto';
    font-display: swap;
}
body {
    font-family: 'Roboto';
    font-display: swap;
}

Colocar tipografía personalizada en título de WordPress

bewstars

MajesticCat

bewstars

MajesticCat

bewstars

MajesticCat

bewstars

MajesticCat

Temas similares