Fuentes compatibles con todo

Paramericano · #1 (**permalink**) 20/08/2010, 06:34

Hola a todos, diseñando Web me ha venido la cuestión: qué fuentes pongo en mi texto sabiendo que en ningún ordenador habrá problema con ello?

Donde puedo saber las fuentes por defecto de Windows, MacOS y Linux? Creo que haciendo un CSS y a cada estilo aplicarle una fuente de cada SO ya estaría todo listo.

Gracias.

HOSTBURN · #2 (**permalink**) 23/08/2010, 04:09

Utiliza las que siempre se utilizan.

TImes new roman
arial
verdana
etc...

Paramericano · #3 (**permalink**) 23/08/2010, 06:49

Cita:

Iniciado por HOSTBURN

Utiliza las que siempre se utilizan.

TImes new roman
arial
verdana
etc...

Gracias por tu respuesta, Hostburn. Pero si alguien pudiese ampliarme ese "etc" me iría de maravilla. Además, esas fuentes son de windows; también me interesan las del Linux y las de MacOS.
Gracias.

Bolsomaniaco · #4 (**permalink**) 23/08/2010, 17:24

Entrando a las carpetas FONT de cada sistema operativo te diria el listado exacto

Saludos!

Paramericano · #5 (**permalink**) 24/08/2010, 05:13

Cita:

Iniciado por Bolsomaniaco

Entrando a las carpetas FONT de cada sistema operativo te diria el listado exacto

Saludos!

Sí, claro, es verdad..., pero a lo mejor hay fuentes extras añadidas después. Por eso busco que alguien me informe de las fuentes "predeterminadas" cuáles son exactamente.

kseso? · #6 (**permalink**) 24/08/2010, 05:41

Busque información por la cadena "fuentes seguras" "safety fonts" o similares.
En este mismo foro se ha comentado extensamente sobre el tema, incluidos enlaces a páginas donde recogen listados de las fuentes presentes en los distintos SO, las que instalan las aplicaciones más comunes (procesadores de texto, programas de fotomanipulación, etc).

También de las diferentes formas (con sus pros y contras) para implementar otras fuentes, ya sea vía css (@font-face) o métodos de sustitución (flash o js).

Atentamente

Paramericano · #7 (**permalink**) 24/08/2010, 15:18

Cita:

Iniciado por kseso?

Busque información por la cadena "fuentes seguras" "safety fonts" o similares.
En este mismo foro se ha comentado extensamente sobre el tema, incluidos enlaces a páginas donde recogen listados de las fuentes presentes en los distintos SO, las que instalan las aplicaciones más comunes (procesadores de texto, programas de fotomanipulación, etc).

También de las diferentes formas (con sus pros y contras) para implementar otras fuentes, ya sea vía css (@font-face) o métodos de sustitución (flash o js).

Atentamente

Qué dices!!! Puedes simular una fuente que no haya en el SO del cliente a través de CSS o JS? Ahí va, no lo sabía!!! Pues nada, nada, a investigar.

Gracias.

kseso? · #8 (**permalink**) 24/08/2010, 15:47

No, no es simulación. Es utilizar una fuente con independencia de que esté o no instalada en la máquina visitante.

Puede ver un ejemplo aquí
Y una pequeña guía de iniciación aquí

PabloLPastor · #9 (**permalink**) 25/08/2010, 02:12

Tambien puedes utilizar el nuevo API de Google Fonts para incluir fuentes que no están en el ordenador del cliente.

Es tan sencillo como importar la fuente como si fuera un fichero css. Por ejemplo, para incluir la fuente Tangerine, sólo hace falta la línea:

Código HTML:

<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Tangerine">

Si copias lo siguiente en un fichero .html, verás un ejemplo:

Código HTML:

<html>
  <head>
    <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Tangerine">
    <style>
      body {
        font-family: 'Tangerine', serif;
        font-size: 58px;
      }
    </style>
  </head>
  <body>
    <p>Esta es la letra Tangerine!</p>
  </body>
</html>

Puedes encontrar más información [URL="http://code.google.com/apis/webfonts/"]aqui.[/URL]

Saludos

Paramericano · #10 (**permalink**) 25/08/2010, 10:58

Cita:

Iniciado por PabloLPastor

Tambien puedes utilizar el nuevo API de Google Fonts para incluir fuentes que no están en el ordenador del cliente.

Es tan sencillo como importar la fuente como si fuera un fichero css. Por ejemplo, para incluir la fuente Tangerine, sólo hace falta la línea:

Código HTML:

<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Tangerine">

Si copias lo siguiente en un fichero .html, verás un ejemplo:

Código HTML:

<html>
  <head>
    <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Tangerine">
    <style>
      body {
        font-family: 'Tangerine', serif;
        font-size: 58px;
      }
    </style>
  </head>
  <body>
    <p>Esta es la letra Tangerine!</p>
  </body>
</html>

Puedes encontrar más información [URL="http://code.google.com/apis/webfonts/"]aqui.[/URL]

Saludos

Esto es ya lo no va más. Pero se me ocurre un inconveniente...: y para verlas en tu web sin estar conectado a internet? Para ver tus htmls incluso haciendo pruebas, tienes que tener conexión disponible, ¿verdad?
O te las puedes descargar y redireccionar hacia tus URIs?

PabloLPastor · #11 (**permalink**) 25/08/2010, 11:42

Sí, claro, para utilizar el API de Google tienes que tener conexión a internet. Puedes ver tus html en local, para hacer pruebas y sin conexión a internet, pero te aparecerá la fuente que pongas como alternativa, en el ejemplo de arriba, aparecerá la fuente tipo 'serif' por defecto.

odt · #12 (**permalink**) 26/08/2010, 08:26

El problema de utilizar el API de Google es que tiene un número muy limitado de fuentes (creo recordar que no son más de 20).

Hay un sistema para forzar al navegador de cada usuario a que se descarge de tu servidor la fuente que tú quieres utilizar en tu diseño, por extraña que sea. Solo tienes que poner el código en el head y cargar la fuente en tu servidor local.

El sistema se basa en este código que has de colocar en la hoja de estilos. Por ejemplo, para forzar la carga de una fuente "Tekton pro".

@font-face {
font-family: 'Tekton Pro Ext';
src: url('tekton.eot'); /*carga la fuente para el IE*/
src: local('Tekton Pro Ext'), /* Si el usuario no tiene IE busca si tiene instalada la fuente*/
local('tekton'),
url('tekton.ttf') format('truetype'),
url('tekton.svg#font') format('svg');

Si buscas en Google "@font-face " hay muchas webs donde explican el proceso paso por paso

leyra02 · #13 (**permalink**) 20/02/2011, 17:17

Te tengo una solución mucho más viable y que seguro pocos conocen. te presento a
http://www.typetester.org/
es una página web donde puedes hacer pruebas en vivo con diferentes tipograficas basadas en cada sistema operativo, con lo que tu mismo podras revisar cual es la que me mejor te convenga, espero que la ayuda te sea util.