¿Cómo añadir una fuente personalizada con css y luego aplicar esta a los h1 y h2?

RenzoHodwalker · 22 Jul 2018

Que tal compañeros, he estado averiguando cómo añadir una fuente personalizada pero hay algo que no me queda claro respecto a las url que debo poner en la regla @font-face y tampoco que formatos son los que debo subir al servidor para que esta fuente se vea en todos los navegadores de pc y móviles. Tampoco tengo muy claro cómo debería modificar en la hoja de estilos para que se vea en todos los h1 y h2. Si alguien me da una mano le estaría muy agradecido. Aclaro que he estado siguiendo este tutorial que recomendaron en otros post pero aún tengo esas dudas.

SirLouen · 22 Jul 2018

Siempre y cuando tengas la fuente en tu servidor o la cargues de una página que sirva esa fuente, si aplicas el font-face en el estilo se verá en todas las versiones (ojo porque si no lo ves de primeras es posible que simplemente sea la cache del servidor o del navegador)

MajesticCat · 22 Jul 2018

Hola [MENTION=82461]UncleHarllow[/MENTION] ,

Creo que esta web te puede ayudar ( Link ) Alli buscas la font (claro si es de google), seleccionas los estilos (300, 400, 800, etc) y automaticamente te generara un codigo que tienes que insertar en tu web y a la misma vez te dara la opcion de descargarlas. Luego la subes a tu server y modificas la url de donde estan dichas fuentes.

Saludos

Edit: Ahora que veo el link que publicaste, literalmente es lo mismo de lo que te dije xD

RenzoHodwalker · 22 Jul 2018

SirLouen dijo:
Siempre y cuando tengas la fuente en tu servidor o la cargues de una página que sirva esa fuente, si aplicas el font-face en el estilo se verá en todas las versiones (ojo porque si no lo ves de primeras es posible que simplemente sea la cache del servidor o del navegador)

Es decir ¿si mi fuente está en .ttf aparecerá en todos los navegadores, solo tengo que agregarla en ese formato al servidor?

jesushiguerey dijo:
Hola [MENTION=82461]UncleHarllow[/MENTION] ,

Creo que esta web te puede ayudar ( Link ) Alli buscas la font (claro si es de google), seleccionas los estilos (300, 400, 800, etc) y automaticamente te generara un codigo que tienes que insertar en tu web y a la misma vez te dara la opcion de descargarlas. Luego la subes a tu server y modificas la url de donde estan dichas fuentes.

Saludos

Edit: Ahora que veo el link que publicaste, literalmente es lo mismo de lo que te dije xD

No está entre las fuentes de google la descargue de otra página, en cuanto al tutorial el único detalle que no comprendo bien es que url debo poner, por ejemplo en este tutorial usan la parte final de la ruta del archivo.

MajesticCat · 22 Jul 2018

UncleHarllow dijo:
No está entre las fuentes de google la descargue de otra página, en cuanto al tutorial el único detalle que no comprendo bien es que url debo poner, por ejemplo en este tutorial usan la parte final de la ruta del archivo.

Hola,

Por ejemplo, tienes este codigo que te da la web que te di. Suponte que descargaste las fuentes y las subiste a la root de tu dominio. Vamos a decir que tu dominio es "dominio.com" y subiste las fuentes a la carpeta "fonts" dentro de tu dominio, ahora solo lo que tienes que hacer es cambiar la url de abajo por tu dominio. (Si vas a agregar mas formator de fuentes solo copias, pegas y reemplazas por ejempo "woff2" por "woff, eot, etc".

HTML:

@font-face {
  font-family: 'Aclonica';
  font-style: normal;
  font-weight: 400;
  src: local('Aclonica Regular'), local('Aclonica-Regular'),
       url('https://dominio.com/fonts/aclonica-v8-latin-regular.woff2') format('woff2'), 
       url('https://dominio.com/fonts/aclonica-v8-latin-regular.woff') format('woff'),
       url('https://dominio.com/fonts/aclonica-v8-latin-regular.eot') format('woff');
}

OJO: Este codigo lo agregaras a tu css.

RenzoHodwalker · 22 Jul 2018

jesushiguerey dijo:
Hola,

Por ejemplo, tienes este codigo que te da la web que te di. Suponte que descargaste las fuentes y las subiste a la root de tu dominio. Vamos a decir que tu dominio es "dominio.com" y subiste las fuentes a la carpeta "fonts" dentro de tu dominio, ahora solo lo que tienes que hacer es cambiar la url de abajo por tu dominio. (Si vas a agregar mas formator de fuentes solo copias, pegas y reemplazas por ejempo "woff2" por "woff, eot, etc".

HTML:

@font-face { font-family: 'Aclonica'; font-style: normal; font-weight: 400; src: local('Aclonica Regular'), local('Aclonica-Regular'), url('https://dominio.com/fonts/aclonica-v8-latin-regular.woff2') format('woff2'), url('https://dominio.com/fonts/aclonica-v8-latin-regular.woff') format('woff'), url('https://dominio.com/fonts/aclonica-v8-latin-regular.eot') format('woff'); }

OJO: Este codigo lo agregaras a tu css.

Esta es la ubicación de la carpeta de fuentes en mi servidor, public_html/wp-content/themes/mission-news/assets/font-awesome/fonts

MajesticCat · 22 Jul 2018

UncleHarllow dijo:
Esta es la ubicación de la carpeta de fuentes en mi servidor, public_html/wp-content/themes/mission-news/assets/font-awesome/fonts

Reemplaza "public_html" por //tudominio.com

Kurokami6 · 22 Jul 2018

Tenía un problema parecido, gracias :encouragement:

RenzoHodwalker · 22 Jul 2018

Así es como me ha quedado todo, ahora el punto es cómo hacer que solo los h1 y h2 se vean con esa tipografía.

PHP:

@font-face {
  font-family: 'Jakob';
  font-style: normal;
  font-weight: bold;
  src: local('Jakob Bold'), local('Jakob-Bold'),
       url('https://mi dominio/wp-content/themes/mission-news/assets/font-awesome/fonts/jakob_b-webfont.woff2') format('woff2'), 
       url('https://mi dominio/wp-content/themes/mission-news/assets/font-awesome/fonts/jakob_b-webfont.woff') format('woff'),
	   url('https://mi dominio/wp-content/themes/mission-news/assets/font-awesome/fonts/jakob_b-webfont.svg') format('svg'),
	   url('https://mi dominio/wp-content/themes/mission-news/assets/font-awesome/fonts/jakob_b-webfont.eot') format('eot'),
       url('https://mi dominio/wp-content/themes/mission-news/assets/font-awesome/fonts/jakob_b-webfont.ttf') format('woff');
}

xxphiterx · 22 Jul 2018

UncleHarllow dijo:
Ver el archivo adjunto 123594

Así es como me ha quedado todo, ahora el punto es cómo hacer que solo los h1 y h2 se vean con esa tipografía.

Para añadirlo a una etiqueta especifica,
Crea algo asi

H1, H2
{
font-family: 'Jakob', sans-serif;
}

Dependera de donde esta los titulos de tu web, lo importante es el valor font-family.

RenzoHodwalker · 22 Jul 2018

xxphiterx dijo:
Para añadirlo a una etiqueta especifica,
Crea algo asi

H1, H2
{
font-family: 'Jakob', sans-serif;
}

Dependera de donde esta los titulos de tu web, lo importante es el valor font-family.

Eso aplicaría para los títulos de las entradas que también van con h1, y los h2 que yo ponga desde el editor normal de wordpress, la regla la debo poner en la hoja de estilos verdad?

- - - Actualizado - - -

Esto es lo que aparece en style.css respecto a los h1, h2 y post title

PHP:

h1 {
  font-size: 1.75em;
  /* 28px / 16px */
  line-height: 1.357;
  /* 38px */
}

h2, .comment-respond .comment-reply-title, .site-footer .site-title, .toggle-dropdown {
  font-size: 1.3125em;
  /* 21px / 16px */
  line-height: 1.143;
  /* 24px */
}

.post-title, .more-from-category .title, .widget_ct_mission_news_post_list .style-1 .title {
  font-size: 1.125em;
  /* 18px / 16px */
  line-height: 1.333;
  /* 24px */
}

PHP:

}

h1, h2, h3, h4, h5, h6 {
  font-family: "PT Serif", serif;
  margin: 0;
  padding: 0;
  font-weight: 400;
}

h3, h4, h5, h6 {
  font-size: 1em;
  line-height: 1.5;
}

- - - Actualizado - - -

Listo, ya he añadido lo que faltaba, muchas gracias por todo a los que ayudaron.

SirLouen · 22 Jul 2018

Si quieres que los H1 y los H2 todos por igual en la web, usen esa fuente, entonces tal como te han dicho, sino usa clases especificamente allá donde quieras usarla (quizá mas recomendable si no quieres que sea una norma)

RenzoHodwalker · 23 Jul 2018

Lo he aplicado de la forma que decían más arriba para los h1 y h2, funcionó en todos los navegadores menos en webview, estoy buscando como solucionar ese problema ¿cómo sería mediante clases? No soy muy experto en CSS. De hecho ahora he añadido una fuente más para aplicarla al texto del cuerpo del post pero no he logrado encontrar lo que hay que modificar por ningún lado.

SirLouen dijo:
Si quieres que los H1 y los H2 todos por igual en la web, usen esa fuente, entonces tal como te han dicho, sino usa clases especificamente allá donde quieras usarla (quizá mas recomendable si no quieres que sea una norma)

SirLouen · 24 Jul 2018

simplemente en el h1 pon class= y el nombre de la clase y luego la clase en el css la tratas como .nombre_de_la_clase igual que si fuera otro tag cualquiera. pero si ya lo has hecho a nivel de header, no tiene sentido, estarías duplicando.

RenzoHodwalker · 24 Jul 2018

SirLouen dijo:
simplemente en el h1 pon class= y el nombre de la clase y luego la clase en el css la tratas como .nombre_de_la_clase igual que si fuera otro tag cualquiera. pero si ya lo has hecho a nivel de header, no tiene sentido, estarías duplicando.

Entonces eso sería directamente desde el editor visual, ¿también se puede hacer esto con los párrafos igual que los h2?

SirLouen · 24 Jul 2018

Si claro, desde la parte html, tu pones la clase que queiras, por ejemplo class=mifuenteespecial y luego en el css tan solo pones .miclaseespecial y ya de ahí todo lo de la fuente
CSS .class Selector
CSS font property

RenzoHodwalker · 27 Jul 2018

SirLouen dijo:
Si claro, desde la parte html, tu pones la clase que queiras, por ejemplo class=mifuenteespecial y luego en el css tan solo pones .miclaseespecial y ya de ahí todo lo de la fuente
CSS .class Selector
CSS font property

He logrado solucionar lo de webview, era un problema al escribir los formatos que los había duplicado. Ahora solo falta añadir las clases que tu comentas para aplicar la nueva fuente a los párrafos, pero también he visto que eso se puede añadir por defecto al editor de wordpress, configurando botones adicionales para seleccionar el texto al que uno quiere aplicar el tipo de letra. ¿Sabes de algún tutorial para aplicar esto con el font-face?

xxphiterx · 27 Jul 2018

UncleHarllow dijo:
He logrado solucionar lo de webview, era un problema al escribir los formatos que los había duplicado. Ahora solo falta añadir las clases que tu comentas para aplicar la nueva fuente a los párrafos, pero también he visto que eso se puede añadir por defecto al editor de wordpress, configurando botones adicionales para seleccionar el texto al que uno quiere aplicar el tipo de letra. ¿Sabes de algún tutorial para aplicar esto con el font-face?

Realizalo con clases para que puedas saber que es lo que tocaste, y que luego puedas editar de manera sencilla. Lo otro es mas tema de programacion PHP, y no solo es CSS.

¿Cómo añadir una fuente personalizada con css y luego aplicar esta a los h1 y h2?

RenzoHodwalker Seguir

SirLouen

MajesticCat

RenzoHodwalker

MajesticCat

RenzoHodwalker

MajesticCat

Kurokami6

RenzoHodwalker

Adjuntos

xxphiterx

RenzoHodwalker

SirLouen

RenzoHodwalker

SirLouen

RenzoHodwalker

SirLouen

RenzoHodwalker

xxphiterx