Colocar tipografia personalizada no título do WordPress

bewstars · 27/10/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/10/2020

bewstars disse:
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:

Inserir CODE, HTML ou 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:

Inserir CODE, HTML ou PHP:

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

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

Inserir CODE, HTML ou PHP:

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

bewstars · 27/10/2020

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

MajesticCat · 27/10/2020

bewstars disse:
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/10/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/10/2020

bewstars disse:
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/10/2020

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

MajesticCat · 27/10/2020

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

Inserir CODE, HTML ou 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 tipografia personalizada no título do WordPress

bewstars

MajesticCat

bewstars

MajesticCat

bewstars

MajesticCat

bewstars

MajesticCat

Tópicos similares