Fuente

El Campo de fuente es el hermano de propósito único del campo Tipografía: un menú desplegable, un valor, la familia de fuentes. Los editores eligen entre las fuentes del sistema y la lista de fuentes de Google, y su widget recibe el apellido como una cadena simple. Dentro de los complementos maestros Creador de widgets, eso lo convierte en la opción liviana cuando un widget solo necesita cambiar qué tipo de letra usa un elemento, nada más.

El campo Fuente es compatible Condiciones, útil para revelarlo solo cuando hay una opción de “tipografía personalizada” activada y su valor se imprime a través de Motor de plantilla de sintaxis de ramita en tu CSS. Ambas guías cubren la configuración y las limitaciones.

A diferencia del Campo de tipografía, que funciona a través de un selector y no tiene token de plantilla, el campo Fuente ES un campo de token. Tú escribes el font-family gobierna en el panel CSS e imprime el valor del campo en él. Esa diferencia decide cuál de los dos campos necesita un widget determinado.

Qué hace el campo Fuente #

• Representa un menú desplegable de la familia de fuentes en el panel Elementor del widget, que enumera las fuentes del sistema y las fuentes de Google.
• Almacena la familia elegida como una cadena simple, por ejemplo Lora o Georgia.
• Imprime esa cadena {{ your_field_name }}, normalmente dentro de a font-family regla en el panel CSS.
• Controla exactamente una propiedad. El tamaño, el peso, el espaciado y el resto permanecen en su hoja de estilo o en controles separados.
• Toma un apellido predeterminado para que el widget se envíe con un tipo de letra deliberado.

¿aún no has creado un widget? El Descripción general del creador de widgets es el lugar para comenzar antes de los documentos a nivel de campo.

Antes de empezar #

• WordPress con Elementor instalado y activo.
• Complementos maestros para Elementor instalado y activo. ¿Nuevo en el complemento? Ver el guía de instalación.
• Un widget personalizado abierto en el editor Widget Builder. Nuestro ejemplo es un widget de comillas con un campo Fuente llamado quote_font eso cambia únicamente el tipo de letra del texto de la cita.

Cómo agregar un campo Fuente #

Arrastra el Fuente campo desde el panel de campos a una sección debajo del Estilo tab, su hogar natural, aunque cualquier pestaña funciona. Sus opciones se abren a la izquierda una vez que aterriza.

Se explicaron las opciones del campo de fuente #

La lista de opciones es corta, que es el punto del campo:

• Etiqueta: el texto que se muestra junto al menú desplegable en Elementor, por ejemplo “Cita fuente”.
• Nombre: el identificador único al que se refieren sus plantillas. Sólo letras, números y guiones bajos, por ejemplo quote_font.
• Predeterminado: la cadena de apellido con la que comienza el widget, por ejemplo Georgia. Elija algo que rinda bien antes de que alguien toque el control.

Conecte el campo Fuente en su panel CSS #

El campo Fuente es un campo de token y el panel CSS es donde pertenece su token. Imprima el valor dentro de a font-family gobierna y síguelo siempre con una pila alternativa:

/* CSS panel */
.pq-quote {
  font-family: {{ quote_font }}, Georgia, serif;
  font-size: 1.5rem;
  line-height: 1.4;
}

El token se traduce en el apellido elegido, por lo que la regla anterior se convierte en font-family: Lora, Georgia, serif; cuando un editor elige Lora. El tamaño y la altura de la línea siguen siendo suyos; el control solo cambia el tipo de letra.

El token también funciona en el panel HTML, por ejemplo en un condicional que cambia de clase cuando una familia específica está activa, pero CSS es el hogar práctico para ello.

Ai grijă: al elegir una fuente de Google en este menú desplegable, no se carga el archivo de fuente. A diferencia del control del grupo Tipografía, el campo Fuente no pone en cola automáticamente las fuentes de Google, por lo que una fuente web elegida se representa como alternativa a menos que el sitio la cargue de otra manera. Ya sea que el widget cargue la fuente en sí, un pequeño inyector de panel JS que agrega el enlace de la hoja de estilo de Google Fonts funciona o limite las expectativas a las pilas de fuentes que el sitio ya tiene. Esa pila alternativa después del token no es una decoración opcional; es lo que ven los visitantes cuando la familia no está cargada.

Un cargador mínimo en el panel JS se ve así:

// JS panel
var fam = "{{ quote_font }}";
if (fam && !document.getElementById("pq-font")) {
  var l = document.createElement("link");
  l.id = "pq-font";
  l.rel = "stylesheet";
  l.href = "https://fonts.googleapis.com/css2?family=" +
           encodeURIComponent(fam) + "&display=swap";
  document.head.appendChild(l);
}

Una sutileza en ese cargador: el getElementById guarda las teclas en una identificación fija, por lo que si el mismo widget aparece dos veces en una página con dos familias diferentes, solo se carga la fuente de la primera instancia. El segundo retrocede silenciosamente. Si varias instancias por página son un escenario realista para su widget, cree la identificación a partir del apellido.

Utilice el control de fuente en Elementor #

Agregue su widget personalizado a una página en Elementor o recargue el editor si la página ya estaba abierta. El campo Fuente aparece como un menú desplegable debajo de su etiqueta; ábralo y la lista familiar se podrá buscar a medida que escribe.

Elija una familia y la vista previa se actualiza. Si el widget carga la fuente, el nuevo tipo de letra aparece tan pronto como llega el archivo. De lo contrario, el elemento se representa en el respaldo de su pila.

Casos de uso comunes #

• Widgets de citas y testimonios donde solo el texto de la cita intercambia tipografía.
• Encabezamientos decorativos en widgets de héroe y banner, con el texto del cuerpo intacto.
• Elementos de monograma, tapa abatible y etiqueta que llevan una cara de exhibición.
• Widgets que exponen una única elección de marca sin abrir un panel tipográfico completo a los clientes.
• Cambio de clase condicional, comparando el valor en el panel HTML cuando una familia necesita reglas adicionales de espaciado de letras.

Consejos para trabajar con el campo Fuente #

• Escriba siempre una pila alternativa. font-family: {{ quote_font }}, Georgia, serif; mantiene el widget legible cuando la fuente elegida no está cargada.
• Recuerde que no hay cola automática. Las fuentes de Google elegidas aquí necesitan un cargador en el widget o un sitio que ya las cargue; esa es la única ventaja del campo.
• Busque tipografía cuando necesite más. El tamaño, el peso, el espaciado, los valores de respuesta y la carga automática de fuentes pertenecen al Campo de tipografía. La fuente es para el caso exclusivo de familia.
• Establezca un valor predeterminado real. Una familia inicial explícita supera la herencia de cualquier tema que caiga en cascada.
• Mantenga el token en CSS. Una regla en el panel CSS es más fácil de mantener que los atributos de estilo en línea dispersos por el HTML.
• No espere un acceso directo al Selector aquí. El cableado natural para este campo es el token propio font-family regla, donde también controlas las alternativas.

Preguntas frecuentes #

Envolviendo #

El campo Fuente Widget Builder hace un trabajo con muy poca superficie: un menú desplegable familiar en el panel, un token de cadena en su font-family regla y control total de los respaldos que quedan en tus manos. Cargue la fuente cuando ofrezca familias de Google y dé un paso al frente Campo de tipografía cuando un widget necesita el panel de estilo de texto completo. Explora el resto del Widgets y extensiones de complementos maestros, y mira el página de precios por lo que incluye cada plan.