Subir tipografía al servidor  

Página 1 / 2
 
Alejandro
 Alejandro
Usuario eminente

Buenos días, he comprado una tipografía en creativemarket y me gustaría saber como configurarla en mi sitio wordpress. El tema que uso es BeTheme y trae una opción para subir custom fonts y, tras hacerlo, en unos navegadores se veía y en otro no. El caso es que traté de usar Use Any Font y lo mismo, unos navegadores sí y otros no. Mirando por internet he visto un hilo en el que decía que, subiendo la tipografía al servidor y luego añadiendo código al CSS se solventaba ese problema. ¿Cómo puedo subir una tipografía al servidor?

Gracias

URL del sitio: Contenido solo visible a usuarios registrados

Citar
Respondido : 15/02/2016 12:20 pm
Pablo Velasco
 Pablo Velasco
Illustrious Member

Hola,

Te comento un poco como funciona el tema de las fuentes en las páginas webs, para que te pongas en situación: normalmente la fuentes de letra que se asignan a una web se cargan desde el propio equipo del usuario. Es decir, se le indica una o varias fuentes standard como Arial, Verdana, etc. y el navegador va a buscar esa fuente en el equipo del usuario. De no encontrarlas se aplica la fuente que tenga el navegador configurada por defecto. Es por esto que para usar este método se utilizan fuentes comunes que se suelen encontrar en todos los sistemas operativos.

Para utilizar fuentes no standard que los usuarios no tengan instalada en su equipo existen varias métodos, algunos usando javascript, como Cufon y otros usando CSS3. Cada uno tiene sus pros y sus contras. Por normal general es preferible utilizar CSS3 porque el rendimiento es mejor.

Ahora bien, estos sistemas para utilizar fuentes personalizadas no siempre son compatibles con todos los navegadores, especialmente con las versiones viejas. Por ejemplo, no se puede utilizar CSS3 en Internet Explorer 6. Es posible que por esta razón no veas la fuente aplicada en todos los navegadores donde los has probado.

Te pongo algunos enlaces a páginas donde se explica cómo cargar una fuente personalizada utilizando CSS:

http://gatsu-anotaciones.blogspot.com.es/2011/07/font-face-carga-tu-propia-fuente.html

http://www.cristalab.com/tutoriales/usa-cualquier-fuente-o-tipografia-en-html-con-css3-y-font-face-c102677l/

http://www.juanancobo.com/blog/font-face-incrustar-fuentes-con-css3/

Todos explican el mismo sistema.

También he encontrado un plugin para WordPress que te permitirá añadir una fuente personalizada de una forma más sencilla:

https://es.wordpress.org/plugins/use-any-font/

Si nuestra ayuda te sirve déjanos tu testimonio y mejora así el posicionamiento de tu web:
Enviar Testimonio
¡Gracias!.

ResponderCitar
Respondido : 15/02/2016 1:59 pm

wpdoctor-revisa-la-salud-de-tu-wordpress

Alejandro
 Alejandro
Usuario eminente

Muchas gracias por la respuesta Pablo. El caso es que el plugin Use Any Font que me comentas lo usé y pasaba lo mismo. Lo curioso es que en Chrome iOs se veía y en Chrome Android no se veía la tipografía custom que aplicamos... Es bastante frustrante la verdad. Por eso, viendo por internet diferentes hilos vi uno que, a priori, parecía solucionar el problema. Había que generar con fontsquirrel todos los archivos de @font-face y una vez generados, subir al servidor los archivos .eot .svg .woff y .ttf para luego añadir unas líneas de código al CSS. Me gustaría saber cómo subir a mi servidor las fuentes y luego añadir ese CSS.

ResponderCitar
Respondido : 15/02/2016 2:06 pm
Pablo Velasco
 Pablo Velasco
Illustrious Member

Hola,

En efecto, para tratar de conseguir la máxima compatibilidad deberás subir tu fuente de letra en diferentes formatos. Existe herramientas para conseguir esto.

El plugin Use Any Font dispone ya de la opción de subir diferentes formatos de la fuente, pero si estos no son suficientes podrías probar a hacerlo mano siguiendo las indicaciones de los artículos que te he puesto.

Si nuestra ayuda te sirve déjanos tu testimonio y mejora así el posicionamiento de tu web:
Enviar Testimonio
¡Gracias!.

ResponderCitar
Respondido : 15/02/2016 3:42 pm

optimiza-automaticamente-todas-las-imagenes-de-tu-wordpress

Alejandro
 Alejandro
Usuario eminente

Ya me he empapado todo Pablo, pero una duda más... como no explican como subir las fuentes a mi servidor... me voy a mi carpeta Public_html y ahí creo una carpeta nueva que la llamo Fuentes, donde alojo las fuentes en todos los formatos necesarios. Ahora voy a editar el archivo CSS que me genera fontsquirrel y en el que tengo que poner la ruta de mi carpeta con esa fuente.. aunque sea una pregunta tontísima.... ¿cual es la ruta? ¿http:www?, ¿sin www?...

ResponderCitar
Respondido : 15/02/2016 5:37 pm
Jhon
 Jhon
Soporte CMS Webempresa Moderator

Hola

Sería la ruta accesible relativa, si has puesto dentro de public html en una carpeta llamada fuentes (mejor usar minusculas) ,sería el llamado algo asi :

@font-face {
    font-family: fuenteejemplo;
    src: url(/fuentes/archivo_fuente_ejemplo.woff);
}

Es decir en src= verás que esta la ruta, revisa también :
https://css-tricks.com/snippets/css/using-font-face/

Saludos.

Si nuestra ayuda te sirve déjanos tu testimonio y mejora así el posicionamiento de tu web:
Enviar mi Testimonio
¡Gracias!.

ResponderCitar
Respondido : 15/02/2016 9:51 pm

Gestor de Contraseñas - VPN Conexión Segura - Gestor 2FA (Segundo Factor de Autenticación

Alejandro
 Alejandro
Usuario eminente

Hola Jhon, gracias por la respuesta. Una vez añadido eso, tengo que especificar los tipos de letra que usarían esa fuente, no? ¿Cómo lo hago?

ResponderCitar
Respondido : 16/02/2016 12:16 am
Johnny Heredia Montiel
 Johnny Heredia Montiel
Miembro Moderator

Hola,

Que tipo de tipografía estas utilizando, en teoría en el fichero deberían de tener los diferentes tipos de letras.

Si nuestra ayuda te ha sido útil, déjanos tu testimonio y mejora así el posicionamiento de tu web:
Enviar mi Testimonio
¡Gracias!.

ResponderCitar
Respondido : 16/02/2016 5:03 am

Cursos Gratuitos WordPress

Alejandro
 Alejandro
Usuario eminente

Sí, tengo la tipografía en todos los formatos que me generó fontsquirrel (woff, woff2, eot, ttf, rtf, svg..) mi pregunta es que, una vez añadido ese código que me explicó Jhon al CSS, debo también de añadir algún código en el que especifique qué letra quiero que use esa tipografía custom. Por ejemplo, la fuente custom que yo subo solamente quiero que se use para los H6... en algún sitio tendré que añadir código para que el tema "sepa" que fuente asignar, no?

ResponderCitar
Respondido : 16/02/2016 4:44 pm
Jhon
 Jhon
Soporte CMS Webempresa Moderator

Hola

Efectivamente, adicional a la carga de la fuente, deberás luego especificar sobre que elementos tendrá efecto

Esto se logra haciendo referncia a la propiedad font-family y usando el nombre de la fuente en algún elemento, por ejemplo :

h6{
font-family:El_nombre_de_tu_fuente;
font-zise:30px;
color:blue;
}

Saludos.

Si nuestra ayuda te sirve déjanos tu testimonio y mejora así el posicionamiento de tu web:
Enviar mi Testimonio
¡Gracias!.

ResponderCitar
Respondido : 16/02/2016 6:13 pm

wpdoctor-revisa-la-salud-de-tu-wordpress

Alejandro
 Alejandro
Usuario eminente

He subido las fuentes al servidor, configurado el CSS en mi hoja de estilo y añadido el código para que todos los H6 sean de esa custom font. Yo trabajo con mac/iPhone y en Firefox, Chrome y Safari veo la fuente bien. Mi pareja en su Pc no lo ve en ningún navegador (Edge, Chrome, Firefox..).

https://www.somosbedrock.com/our-offer en esa URL debería de aparecer la palabra Medication en la custom font que he configurado. ¿Por qué ella no la ve?

Ese es el código que he incluido :dry:

@font-face {
font-family: 'last_paradiseregular';
src: url('/fuentes/last_paradise-webfont.eot');
src: url('/fuentes/last_paradise-webfont.eot?#iefix') format('embedded-opentype'),
url('/fuentes/last_paradise-webfont.woff2') format('woff2'),
url('/fuentes/last_paradise-webfont.woff') format('woff'),
url('/fuentes/last_paradise-webfont.ttf') format('truetype'),
url('/fuentes/last_paradise-webfont.svg#last_paradiseregular') format('svg');
font-weight: normal;
font-style: normal;

}

h6{
font-family:last_paradise;
font-zise:35px;

}

ResponderCitar
Respondido : 17/02/2016 10:27 am
Rafael
 Rafael
Miembro Moderator

Hola Alejandro,

Prueba como base este código ya que veo que desde Linux si cargan y en equipos Windows no carga la fuente.

Dentro de tu tema, tienes que tener creado la carpeta fuentes y dentro de ella, todos los archivos de la fuente.

Desde la hoja de estilo del tema, coloca:

@font-face {
font-family: 'Deftone';
src: url('fuentes/Deftone.eot'); /* IE9 Compat Modes */
src: url('fuentes/Deftone.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('fuentes/Deftone.woff') format('woff'), /* Modern Browsers */
url('fuentes/Deftone.ttf')  format('truetype'), /* Safari, Android, iOS */
url('fuentes/Deftone.svg#svgFontName') format('svg'); /* Legacy iOS */
}

Sustituye Deftone por el nombre de los archivo de la fuente que utilizas y que has subido.

Luego para la h6

h6 {
font-family: 'nombredelafuente', Helvetica, Arial, sans-serif;
}

Revisa si así se visualiza desde navegadores Windows.

Saludos

Si nuestra ayuda te sirve déjanos tu testimonio y mejora así el posicionamiento de tu web:
Enviar Testimonio
¡Gracias!.

ResponderCitar
Respondido : 17/02/2016 10:46 am

optimiza-automaticamente-todas-las-imagenes-de-tu-wordpress

Alejandro
 Alejandro
Usuario eminente

Hola Rafael, he pegado el código que me has dicho y modificado con los parámetros de mi fuente

@font-face {
font-family: 'last_paradise';
src: url('fuentes/last_paradise.eot'); /* IE9 Compat Modes */
src: url('fuentes/last_paradise.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('fuentes/last_paradise.woff') format('woff'), /* Modern Browsers */
url('fuentes/alst_paradise.ttf') format('truetype'), /* Safari, Android, iOS */
url('fuentes/last_paradise.svg#svglast_paradiseregular') format('svg'); /* Legacy iOS */
}

h6 {
font-family: 'last_paradise', Helvetica, Arial, sans-serif;
}

Tras comprobar, en Windows sigue sin verse... la verdad que estoy bastante frustrado ya con esto de la fuente... porque estructuramos la web en función de poder usar esa fuente para resaltar y que en unos SO se vea y en otros no.... Adjunto captura de pantalla donde he subido la fuente

ResponderCitar
Respondido : 17/02/2016 10:54 am
Pablo Velasco
 Pablo Velasco
Illustrious Member

Hola,

¿Con qué navegador estás viendo la web en Windows? Ten en cuenta que Internet explorer no es compatible con este CSS para aplicar fuentes hasta la versión 12 del mismo. En el siguiente enlace puedes ver los navegadores con sus versiones compatibles:

http://www.w3schools.com/cssref/css3_pr_font-face_rule.asp

Si nuestra ayuda te sirve déjanos tu testimonio y mejora así el posicionamiento de tu web:
Enviar Testimonio
¡Gracias!.

ResponderCitar
Respondido : 17/02/2016 3:35 pm

Gestor de Contraseñas - VPN Conexión Segura - Gestor 2FA (Segundo Factor de Autenticación

Alejandro
 Alejandro
Usuario eminente

En Windows estoy haciendo la prueba con Chrome, Mozilla y Edge

ResponderCitar
Respondido : 17/02/2016 5:21 pm
Página 1 / 2

Por favor Iniciar Sesión o Registro