Fonte

O Campo fonte é o irmão de propósito único do campo Tipografia: um dropdown, um valor, a família de fontes Os editores escolhem as fontes do sistema e a lista de Fontes do Google, e seu widget recebe o nome da família como uma string simples Dentro dos Complementos Mestres Construtor de widgets, isso o torna a escolha leve quando um widget só precisa alterar qual tipo de letra um elemento usa, nada mais.

O campo Fonte suporta Condições, útil para revelá-lo somente quando uma alternância de “tipografia personalizada” estiver ligada e seu valor for impresso através do Mecanismo de modelo de sintaxe dupla no seu CSS. Ambos os guias cobrem a configuração e as limitações.

Ao contrário do Campo tipografia0, que funciona através de um selector e não tem nenhum token de modelo, o campo Fonte É um campo de token Você escreve o font-family governe-se no painel CSS e imprima o valor do campo nele Essa diferença decide qual dos dois campos um determinado widget precisa.

O que o campo Fonte faz #

• Rende uma queda da família de fontes no painel Elementor do widget, listando fontes do sistema e Fontes do Google.
• Armazena a família escolhida como uma string simples, por exemplo Lora ou Georgia.
• Imprime essa string {{ your_field_name }}, normalmente dentro de a font-family regra no painel CSS.
• Controla exatamente uma propriedade Tamanho, peso, espaçamento e o restante ficam em sua folha de estilo ou em controles separados.
• Assume um nome de família padrão para que o widget seja fornecido com uma fonte deliberada.

Ainda não construiu um widget? o Visão geral do Widget Builder é o lugar para começar antes dos documentos de nível de campo.

Antes de começar #

• WordPress com Elementor instalado e ativo.
• Complementos Mestres para Elementor instalado e ativo. Novo no plugin? veja o guia instalação.
• Um widget personalizado aberto no editor Widget Builder Nosso exemplo é um widget pull-quote com um campo Fonte nomeado quote_font isso altera apenas o tipo de letra do texto da citação.

Como adicionar um campo Fonte #

Arraste o Fonte campo do painel de campos em uma seção abaixo do Estilo tab, sua casa natural, embora qualquer tabulação funcione Suas opções abrem à esquerda assim que ela pousar.

Opções do campo de fontes explicadas #

A lista de opções é curta, que é o ponto do campo:

• Etiqueta: o texto mostrado ao lado do dropdown em Elementor, por exemplo “Quote Font”.
• Nome: o identificador exclusivo a que seus modelos se referem. Apenas letras, números e sublinhados, por exemplo quote_font.
• Predefinição: a string de nome de família com a qual o widget começa, por exemplo Georgia. Escolha algo que seja bem renderizado antes que alguém toque no controle.

Conecte o campo Fonte no seu painel CSS #

O campo Fonte é um campo de token, e o painel CSS é onde seu token pertence Imprima o valor dentro de um font-family regra e sempre siga com uma pilha de fallback:

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

O token é renderizado para o sobrenome escolhido, então a regra acima se torna font-family: Lora, Georgia, serif; quando um editor escolhe Lora. O tamanho e a altura da linha permanecem seus; o controle troca apenas o tipo de letra.

O token também funciona no painel HTML, por exemplo, em um condicional que alterna uma classe quando uma família específica está ativa, mas o CSS é o lar prático para isso.

Cuidado: escolher uma Fonte do Google neste menu suspenso não carrega o arquivo de fonte Ao contrário do controle de grupo Tipografia, o campo Fonte não faz a auto-enquistagem das Fontes do Google, portanto, uma fonte da Web escolhida renderiza como seu fallback, a menos que o site a carregue de alguma outra maneira Ou faça com que o widget carregue a própria fonte, um pequeno injetor de painel JS que anexa o link da folha de estilo do Google Fonts funcione ou limite as expectativas de pilhas de fontes que o site já possui Essa pilha de fallback após o token não é decoração opcional; é o que os visitantes veem sempre que a família não é carregada.

Um carregador mínimo no painel JS é assim:

// 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);
}

Uma sutileza naquele carregador: o getElementById teclas de guarda em um id fixo, portanto, se o mesmo widget aparecer duas vezes em uma página com duas famílias diferentes, apenas a fonte da primeira instância carrega A segunda silenciosamente cai para trás Se várias instâncias por página for um cenário realista para o seu widget, construa o id a partir do nome da família em vez disso.

Use o controle de fonte no Elementor #

Adicione seu widget personalizado a uma página no Elementor ou recarregue o editor se a página já estiver aberta O campo Fonte aparece como um menu suspenso sob seu rótulo; abra-o e a lista de famílias poderá ser pesquisada conforme você digita.

Escolha uma família e as atualizações de visualização Se o widget carregar a fonte, o novo tipo de letra será utilizado assim que o arquivo chegar. Caso contrário, o elemento será renderizado no fallback da sua pilha.

Casos de uso comum #

• Widgets de citações e depoimentos onde apenas o texto de citação troca o tipo de letra.
• Rubricas decorativas em widgets de herói e banner, com o corpo do texto deixado intocado.
• Elementos de monograma, drop-cap e etiqueta que carregam uma face de exibição.
• Widgets que expõem uma única escolha de marca sem abrir um painel tipográfico completo aos clientes.
• Troca de classe condicional, comparando o valor no painel HTML quando uma família precisa de regras extras de espaçamento entre letras.

Dicas para trabalhar com o campo Fonte #

• Sempre escreva uma pilha de fallback. font-family: {{ quote_font }}, Georgia, serif; mantém o widget legível quando a fonte escolhida não é carregada.
• Lembre-se de que não há fila automática. As fontes do Google escolhidas aqui precisam de um carregador no widget ou de um site que já as carregue; essa é a única vantagem do campo.
• Alcance a tipografia quando precisar de mais. Tamanho, peso, espaçamento, valores responsivos e carregamento automático de fontes pertencem ao Campo tipografia. Fonte é para o caso apenas familiar.
• Defina um padrão real. Uma família inicial explícita é melhor que herdar qualquer que seja a cascata do tema.
• Mantenha o token em CSS. Uma regra no painel CSS é mais fácil de manter do que os atributos de estilo inline espalhados pelo HTML.
• Não espere um atalho do Seletor aqui. A fiação natural para este campo é o token em seu próprio font-family regra, onde você também controla as desvantagens.

Perguntas frequentes #

Embrulhando #

O campo Fonte do Widget Builder faz um trabalho com muito pouca superfície: um dropdown familiar no painel, um token de string no seu font-family regra, e controle total dos fallbacks deixados em suas mãos Carregue a fonte quando você oferecer famílias do Google, e passo até o Campo tipografia quando um widget precisa do painel completo de estilo de texto. Explore o resto do Widgets e extensões Master Addons, e veja o página preços para o que cada plano inclui.