Cómo probar fuentes en una web y enseñarle a tu cliente el antes y el después

Para enseñarle una fuente nueva a un cliente, abre su web en Chrome, prueba la fuente en la página real con la extensión gratuita FontMee y pulsa su botón de antes/después. FontMee hace dos capturas, una con la fuente antigua y otra con la nueva, y las une en una sola imagen que puedes pegar en un correo o guardar como PNG. Nada cambia en la web real del cliente, solo en tu pantalla.

Por qué una imagen sobre la web real gana a una maqueta

Una maqueta es una imagen inventada de cómo podría verse una página, normalmente dibujada en un programa de diseño. Lleva tiempo hacerla, y una fuente suele verse distinta cuando alrededor están las palabras, el logotipo y las fotos reales del cliente. Si pruebas la fuente en la página real, el cliente ve su propia web con la fuente nueva, y ese es el momento en que puede decir sí o no.

Además te ahorra una ronda de trabajo. Puedes probar tres fuentes en diez minutos, enviar tres imágenes y construir solo la que elija el cliente.

Qué necesitas

• Google Chrome en un ordenador, porque las extensiones funcionan ahí.
• La dirección de la web que quieres enseñar: la tuya, la de un cliente o incluso la de un competidor.
• La extensión gratuita FontMee, un pequeño complemento que da a Chrome una función nueva. Sin cuenta y sin pagar.

El antes y después en seis pasos

FontMee muestra una fuente en cualquier página sin cambiarla para nadie más. Este es todo el trabajo, y el vídeo corto muestra el panel en acción.

1. Instala FontMee. Añádela desde Chrome Web Store. Es gratis y no pide cuenta. Haz clic en el icono del puzle de Chrome y fíjala, así siempre está a un clic.
2. Abre la web del cliente y haz clic en el icono de FontMee. El panel se abre junto a la página. También puedes pulsar Alt + Shift + F. Las páginas propias de Chrome (Nueva pestaña, la Web Store, las páginas chrome://) no se pueden cambiar.
3. Elige la fuente nueva. En Aplicar los cambios a elige Todo, Títulos o Texto y haz clic en una fuente. ¿Quieres una fuente de títulos y otra de texto que combinen bien? Abre Pares de fuentes y pulsa Usar este par. Nuestra guía de las mejores combinaciones de fuentes de Google enseña algunas.
4. Encuadra la imagen. La imagen muestra lo que hay ahora en tu pantalla, así que baja hasta la parte que quieras enseñar, por ejemplo la parte superior de la página de inicio, y usa Ajustar para el tamaño, el grosor y el interlineado hasta que se vea bien.
5. Pulsa Antes / después. Es el botón con el icono de cámara, junto al interruptor Fuente original y Vista previa de FontMee. FontMee trae la pestaña al frente y hace dos capturas, primero con la fuente nueva y luego con la original. Chrome solo permite dos capturas por segundo, así que dale un momento y no cambies de pestaña.
6. Envíala. Se abre una ventana pequeña con la imagen. Con Deslizador arrastras una división por la página y con Lado a lado ves las dos a la vez. Pulsa Copiar imagen y pégala con Ctrl+V en un correo o un chat, o pulsa Guardar imagen para obtener un archivo PNG. La imagen unida lleva las etiquetas Antes y Después.

Enséñalo en directo en una reunión o envíalo después

Si el cliente está en una videollamada, comparte tu pestaña de Chrome y alterna entre Fuente original y Vista previa de FontMee en la parte superior del panel. También puedes pulsar Alt + Shift + O para cambiar, incluso con el panel cerrado. FontMee tiene además el botón Mantener en el sitio, así tus fuentes siguen ahí cuando vuelvas a abrir la página. Si el cliente no está, la imagen habla por ti.

Facilítale al cliente decir que sí

• Enseña dos o tres opciones, no diez. Una imagen por fuente basta.
• Pon el nombre de las fuentes en el correo, para que el cliente pueda responder «la segunda».
• Mantén la misma parte de la página en cada imagen, para que la única diferencia sea la fuente.
• Cuando elija, vuelve a FontMee y pulsa Copiar CSS. Obtienes el código que lo hace realidad, y nuestra guía para añadir Google Fonts enseña dónde va.

Cuatro cosas que comprobar antes de enviarla

• Es solo una vista previa. Nadie más ve la fuente nueva hasta que el código se añade a la web real. Díselo al cliente, para que no la busque en internet.
• Comprueba las palabras reales. Mira títulos, botones y párrafos largos. Una fuente preciosa en un título puede cansar en un párrafo.
• Comprueba las letras especiales. Si la web usa letras como ñ, á, ü o ç, baja hasta algunas y comprueba que se ven bien. FontMee puede filtrar las fuentes por escritura, como Latin Extended o cirílico.
• Comprueba la licencia. Google Fonts es de código abierto y las fuentes de Fontshare son gratis de usar, pero una fuente que el cliente ya tiene puede tener sus propias reglas. FontMee muestra un recordatorio de licencia al copiar el código.

¿Aún no tienes web? Entonces la fuente va en segundo lugar. Además, una web necesita un lugar donde vivir, y un constructor es la forma más rápida de conseguirlo sin código.

Consigue la extensión

FontMee es gratis, con más de 1.900 fuentes, Copiar CSS en cuatro formatos, un ZIP para alojar tú mismo y la subida de tus propias fuentes. Sin cuenta, sin suscripción. Añádela desde la Chrome Web Store o lee primero la página de FontMee.

Conviene saber antes de empezar

Preguntas frecuentes