WebFonter: Previsualiza las fuentes de FontShop en cualquier sitio web: qué funciona ahora.

WebFonter era una herramienta para navegador que permitía probar las tipografías de FontShop directamente en un sitio web antes de comprarlas. Permitía a los diseñadores modificar los títulos y el texto principal en lugar de juzgar la tipografía a partir de una muestra estática. Ese flujo de trabajo original ya no existe: la tienda online de FontShop cerró en 2023, y la antigua dirección de WebFonter redirige a una página de información de FontShop en lugar de a una herramienta de instalación. Aún puedes previsualizar las tipografías a través de MyFonts y experimentar con la tipografía de tu sitio web en las herramientas para desarrolladores del navegador.

¿Aún se puede instalar WebFonter?

No confíe en las antiguas instrucciones de instalación de WebFonter. Según las preguntas frecuentes oficiales de Monotype sobre el cierre de la plataforma , FontShop.com dejó de funcionar el 15 de diciembre de 2023. La dirección web original de WebFonter ahora redirige a la página de información de FontShop, que a su vez redirige a los usuarios a MyFonts. No se ha podido verificar la compatibilidad actual de ninguna extensión o marcador de WebFonter. Por lo tanto, las antiguas instrucciones para extensiones y marcadores de Chrome deben considerarse como un registro del funcionamiento del producto, no como una guía de instalación.

Lo que WebFonter hizo originalmente

La principal ventaja de la herramienta era la posibilidad de ver una tipografía en contexto. En lugar de abrir una muestra de fuente por separado, un diseñador podía visualizar una página real y modificar su tipografía manteniendo visible el diseño.

  1. Abre un sitio web. La herramienta original se ofrecía como extensión de Chrome y como marcador para otros navegadores. Se describía como utilizable en sitios web en línea y alojados localmente, siempre que se pudiera acceder a su servicio de fuentes.
  2. Seleccione una familia tipográfica. El control Cambiar familia permitía explorar y buscar fuentes en el catálogo de FontShop. Al seleccionar una familia, se actualizaba la vista previa de la página.
  3. Asigna y ajusta estilos. La interfaz original comenzaba con encabezados y texto del cuerpo, permitía agregar otros elementos y ofrecía un control de ajuste para el tamaño, la altura de línea y el espaciado.
Vista previa de un sitio web de viajes con un selector de fuentes flotante que muestra varias familias tipográficas.
Un selector de fuentes a nivel de sitio web ilustra el tipo de comparación contextual para la que se diseñó WebFonter.

Estas son descripciones de funciones históricas, no menús actuales confirmados. Algunas reseñas antiguas también mencionaban un atajo de teclado Ctrl+H para ocultar los controles de WebFonter. Evite seguir ese consejo en un navegador moderno: Ctrl+H normalmente abre el historial de navegación si la página o la herramienta no lo intercepta.

Cómo probar las tipografías de FontShop en un sitio web hoy mismo

La colección FontFont de FontShop ahora se ofrece a través de la página de información oficial de FontShop y MyFonts . El siguiente enfoque separa el descubrimiento de fuentes de las pruebas en la página; a diferencia del antiguo WebFonter, no se trata de una vista previa de FontShop al sitio web con un solo clic.

1. Previsualiza la fuente con tus propias palabras.

Encuentra una familia tipográfica adecuada en MyFonts. En la vista previa de la familia tipográfica o del estilo individual, introduce un título, una etiqueta de navegación o un párrafo de tu proyecto. Según las preguntas frecuentes de MyFonts , puedes ajustar el tamaño y los colores de la vista previa e inspeccionar las funciones OpenType compatibles. La función Álbumes también te ayuda a recopilar fuentes para compararlas. Comprueba varios grosores: una fuente atractiva para titulares puede no ser cómoda para párrafos largos.

Vista previa del mercado de fuentes que muestra un texto de muestra en estilos de letra cursiva y negrita.
Antes de aplicar una tipografía candidata al diseño de una página, compare diferentes estilos y tamaños de letra.

2. Inspeccione el texto que desea modificar.

Abre tu sitio web en Chrome, haz clic derecho en un encabezado o párrafo y selecciona Inspeccionar . El panel Elementos identifica el nodo HTML seleccionado; el panel Estilos muestra el CSS que lo afecta. También puedes usar el selector de elementos para seleccionar texto en la página. Consulta la guía del modo de inspección de Google para ver los controles documentados.

El navegador Chrome muestra el encabezado de un artículo seleccionado junto a la configuración de Elementos de herramientas para desarrolladores y la configuración de la familia de fuentes CSS.
Examine un encabezado y localice las declaraciones de su familia de fuentes, tamaño de fuente y altura de línea en el panel Estilos.

3. Experimenta temporalmente con la tipografía.

En Elementos → Estilos , edita una declaración de font-family existente o añade una al elemento seleccionado. Por ejemplo, prueba Georgia, serif como sustituto local de una dirección serif, y luego experimenta con font-size , line-height o letter-spacing . Los cambios suelen ser visibles de inmediato, pero no son una edición permanente en tu sitio publicado. Google explica estos controles en su referencia CSS de Herramientas para desarrolladores .

Importante: Escribir el nombre de una fuente comercial en CSS no la descarga ni la carga automáticamente. Para ver la fuente comercial en su página, debe estar disponible a través de un recurso de fuentes con licencia y cargada correctamente, o mediante una instalación local autorizada. De lo contrario, el navegador mostrará una fuente alternativa. No confunda la vista previa alternativa con la fuente que desea comprar.

Dos versiones de la misma página de artículo que muestran tipografías contrastantes con y sin serifa.
Compara el mismo titular y párrafo con dos diseños tipográficos diferentes, comprobando el ajuste de texto y la jerarquía.

4. Compruebe la licencia antes de la implementación.

La vista previa gratuita en la tienda no otorga una licencia para alojar los archivos de fuente en un sitio web público. MyFonts explica que las fuentes web se integran mediante @font-face y requieren una licencia de fuente web adecuada; los dominios permitidos y las condiciones de visualización de página dependen de la licencia ofrecida para ese producto. Revise la información de licencia de la familia y las condiciones de compra antes de agregar los archivos a producción. No se debe asumir que una licencia de escritorio cubre la integración web.

Qué comprobar antes de elegir la fuente definitiva

  • Ajuste del titular: ¿El título se ajusta automáticamente a los anchos de pantalla de escritorio y móvil?
  • Legibilidad del texto: ¿Resultan cómodos los tamaños pequeños, el interlineado y la densidad de los párrafos?
  • Grosor y caracteres: ¿Están disponibles los caracteres en negrita, cursiva, puntuación y glifos de idioma que necesita?
  • Carga real: ¿Se muestra el rostro real o solo una imagen de respaldo del navegador?
  • Licencias: ¿El plan adquirido cubre el uso de su sitio web?

Si un cambio no parece surtir efecto, compruebe si una regla CSS más específica anula su edición, si la fuente se carga correctamente y si seleccionó el elemento de página adecuado. Pruebe con más de un ancho de ventana gráfica. El atractivo original de WebFonter residía en el contexto inmediato; hoy en día, combinar una muestra de MyFonts con ediciones temporales de DevTools ofrece una forma práctica de elegir una tipografía con conocimiento de causa sin tener que recurrir a la herramienta descontinuada.

Dejar un comentario

Comercio social en 2026: Compras mediante vídeos cortos y perspectivas de fin de año.

Comercio social en 2026: Compras mediante vídeos cortos y perspectivas de fin de año.

Una guía práctica para 2026 sobre vídeos cortos con opción de compra, afiliados de creadores y compras en directo, con previsiones actualizadas para EE. UU., ejemplos de plataformas y una lista de verificación para compradores sobre divulgaciones y devoluciones.

Los 10 mejores navegadores proxy para una navegación más segura y privada.

Los 10 mejores navegadores proxy para una navegación más segura y privada.

Compara 10 navegadores proxy y herramientas de navegación, desde Tor y Opera hasta Firefox y CroxyProxy, con limitaciones prácticas de privacidad y consejos de configuración.

Cómo eliminar masivamente publicaciones de Facebook usando el registro de actividad

Cómo eliminar masivamente publicaciones de Facebook usando el registro de actividad

Aprende cómo eliminar varias publicaciones de Facebook a la vez desde tu teléfono, filtrar actualizaciones antiguas, usar la Papelera o el Archivo y restaurar publicaciones en un plazo de 30 días.

Cómo solucionar el error ERR_TUNNEL_CONNECTION_FAILED en Chrome: 8 pasos

Cómo solucionar el error ERR_TUNNEL_CONNECTION_FAILED en Chrome: 8 pasos

Para solucionar el error ERR_TUNNEL_CONNECTION_FAILED de Chrome, primero revise la configuración del proxy y la VPN, y luego solucione los problemas con las extensiones, el DNS y el software de seguridad.

Bandeja de entrada integrada para Firefox: Acceda a las aplicaciones de Google dentro de Gmail.

Bandeja de entrada integrada para Firefox: Acceda a las aplicaciones de Google dentro de Gmail.

Descubre cómo Integrated Inbox incorporó las aplicaciones de Google a Gmail en Firefox, qué sigue funcionando en teoría y cómo se compara el panel lateral integrado de Gmail.

WebFonter: Previsualiza las fuentes de FontShop en cualquier sitio web: qué funciona ahora.

WebFonter: Previsualiza las fuentes de FontShop en cualquier sitio web: qué funciona ahora.

Descubre cómo WebFonter te permitía probar las fuentes de FontShop en sitios web reales, por qué la herramienta original está obsoleta y cómo previsualizar las tipografías hoy en día.

Cómo deshacer una publicación vergonzosa en Facebook: El truco de los cinco segundos y lo que funciona ahora

Cómo deshacer una publicación vergonzosa en Facebook: El truco de los cinco segundos y lo que funciona ahora

La antigua extensión de deshacer de Facebook ofrecía un retraso de cinco segundos. Descubre qué sigue funcionando para editar, eliminar, archivar o restaurar una publicación vergonzosa de Facebook.

Cambiar la configuración de privacidad de Firefox desde la barra de herramientas sin usar About:Config

Cambiar la configuración de privacidad de Firefox desde la barra de herramientas sin usar About:Config

Utiliza la extensión Privacy Settings para Firefox para cambiar las preferencias de privacidad compatibles desde una ventana emergente en la barra de herramientas, y descubre cuándo funcionan mejor los controles integrados.

Cómo comprobar si alguien más está accediendo a tu cuenta de Gmail

Cómo comprobar si alguien más está accediendo a tu cuenta de Gmail

¿Sospechas de accesos no autorizados a tu cuenta de Gmail? Revisa la actividad reciente de tu cuenta, las direcciones IP, los dispositivos conectados y los eventos de seguridad, y aprende cómo protegerla.

Cómo combinar varios enlaces en un enlace corto con Shrink2One

Cómo combinar varios enlaces en un enlace corto con Shrink2One

Descubre cómo Shrink2One agrupó originalmente varias URL en un único enlace corto, su función de contraseña opcional y qué hacer si el servicio no está disponible.