Inicio
» WEB
»
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.
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.
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.
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.
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.
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.
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.
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.
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.