Subir tipografía al servidor  

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/

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.

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.

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?...

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.

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?

Hola,

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

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?

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.

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;

}

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

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

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

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