Añadir fuente personalizada y aplicar a h1 y h2 en CSS

  • Autor Autor RenzoHodwalker
  • Fecha de inicio Fecha de inicio
RenzoHodwalker

RenzoHodwalker

Delta
Social Media
Verificación en dos pasos activada
Verificado por Whatsapp
¡Usuario con pocos negocios! ¡Utiliza siempre saldo de Forobeta!
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.
 
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)
 
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
 
Última edición:
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)
Hacer clic para expandir...

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
Hacer clic para expandir...

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.
 
Última edición:
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.
Hacer clic para expandir...

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.
 
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.
Hacer clic para expandir...

Esta es la ubicación de la carpeta de fuentes en mi servidor, public_html/wp-content/themes/mission-news/assets/font-awesome/fonts
 
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
Hacer clic para expandir...

Reemplaza "public_html" por //tudominio.com
 
Tenía un problema parecido, gracias :encouragement:
 
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');
}
 

Adjuntos

  • screenshot-maslibertad.com.co-2018.07.22-12-35-32.webp
    screenshot-maslibertad.com.co-2018.07.22-12-35-32.webp
    37,3 KB · Visitas: 27
Última edición:
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.
Hacer clic para expandir...

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.
 
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.
Hacer clic para expandir...

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.
 
Última edición:
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)
 
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)
Hacer clic para expandir...
 
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.
 
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.
Hacer clic para expandir...

Entonces eso sería directamente desde el editor visual, ¿también se puede hacer esto con los párrafos igual que los h2?
 
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
 
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
Hacer clic para expandir...

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?
 
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?
Hacer clic para expandir...

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.
 
Hay que estar conectado o registrado para responder aquí.

Temas similares

PercyAid
Fuente personalizada
Respuestas
0
Visitas
134
PercyAid
PercyAid
joelandy14
¿Cómo agregar una fuente personalizada en Dreamweaver CS5?
Respuestas
4
Visitas
952
Maize
M
Atrás
Arriba