The Font field is the single-purpose sibling of the Typography field: one dropdown, one value, the font family. Editors pick from system fonts and the Google Fonts list, and your widget receives the family name as a plain string. Inside the Master Addons Widget Builder, that makes it the lightweight choice when a widget only needs to change which typeface an element uses, nothing else.
The Font field supports Conditions, handy for revealing it only when a “custom typography” toggle is on, and its value prints through the Twig-syntax template engine into your CSS. Both guides cover setup and limitations.
Unlike the Typography field, which works through a selector and has no template token, the Font field IS a token field. You write the font-family rule yourself in the CSS panel and print the field’s value into it. That difference decides which of the two fields a given widget needs.
What the Font field does #
- Renders a font family dropdown in the widget’s Elementor panel, listing system fonts and Google Fonts.
- Stores the chosen family as a plain string, for example
LoraorGeorgia. - Prints that string through
{{ your_field_name }}, typically inside afont-familyrule in the CSS panel. - Controls exactly one property. Size, weight, spacing, and the rest stay in your stylesheet or in separate controls.
- Takes a default family name so the widget ships with a deliberate typeface.
Haven’t built a widget yet? The Widget Builder overview is the place to start before the field-level docs.
Before you start #
- WordPress with Elementor installed and active.
- Master Addons for Elementor installed and active. New to the plugin? See the installation guide.
- A custom widget open in the Widget Builder editor. Our example is a pull-quote widget with a Font field named
quote_fontthat changes the typeface of the quote text only.
How to add a Font field #
Drag the Font field from the fields panel into a section under the Style tab, its natural home, though any tab works. Its options open on the left once it lands.
Font field options explained #
The option list is short, which is the point of the field:
- Label: the text shown next to the dropdown in Elementor, for example “Quote Font”.
- Name: the unique identifier your templates refer to. Letters, numbers, and underscores only, for example
quote_font. - Default: the family name string the widget starts with, for example
Georgia. Pick something that renders well before anyone touches the control.
Connect the Font field in your CSS panel #
The Font field is a token field, and the CSS panel is where its token belongs. Print the value inside a font-family rule and always follow it with a fallback stack:
/* CSS panel */
.pq-quote {
font-family: {{ quote_font }}, Georgia, serif;
font-size: 1.5rem;
line-height: 1.4;
}The token renders to the picked family name, so the rule above becomes font-family: Lora, Georgia, serif; when an editor picks Lora. Size and line height stay yours; the control only swaps the typeface.
The token also works in the HTML panel, for example in a conditional that switches a class when a specific family is active, but CSS is the practical home for it.
Watch out: picking a Google Font in this dropdown does not load the font file. Unlike the Typography group control, the Font field does not auto-enqueue Google Fonts, so a chosen web font renders as its fallback unless the site loads it some other way. Either have the widget load the font itself, a small JS-panel injector that appends the Google Fonts stylesheet link works, or limit expectations to font stacks the site already has. That fallback stack after the token is not optional decoration; it is what visitors see whenever the family is not loaded.
A minimal loader in the JS panel looks like this:
// 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);
}One subtlety in that loader: the getElementById guard keys on a fixed id, so if the same widget appears twice on a page with two different families, only the first instance’s font loads. The second silently falls back. If multiple instances per page is a realistic scenario for your widget, build the id from the family name instead.
Use the Font control in Elementor #
Add your custom widget to a page in Elementor, or reload the editor if the page was already open. The Font field appears as a dropdown under your label; open it and the family list is searchable as you type.
Pick a family and the preview updates. If the widget loads the font, the new typeface draws in as soon as the file arrives. Otherwise the element renders in the fallback from your stack.
Common use cases #
- Quote and testimonial widgets where only the quote text swaps typeface.
- Decorative headings in hero and banner widgets, with body text left untouched.
- Monogram, drop-cap, and label elements that carry one display face.
- Widgets that expose a single brand choice without opening a full typography panel to clients.
- Conditional class switching, comparing the value in the HTML panel when one family needs extra letter-spacing rules.
Tips for working with the Font field #
- Always write a fallback stack.
font-family: {{ quote_font }}, Georgia, serif;keeps the widget readable when the picked font is not loaded. - Remember there is no auto-enqueue. Google Fonts picked here need a loader in the widget or a site that loads them already; that is the field’s one sharp edge.
- Reach for Typography when you need more. Size, weight, spacing, responsive values, and automatic font loading all belong to the Typography field. Font is for the family-only case.
- Set a real Default. An explicit starting family beats inheriting whatever the theme cascades in.
- Keep the token in CSS. One rule in the CSS panel is easier to maintain than inline style attributes scattered through the HTML.
- Do not expect a Selector shortcut here. The natural wiring for this field is the token in your own
font-familyrule, where you also control the fallbacks.
Frequently Asked Questions #
What is the Font field in the Master Addons Widget Builder?
The Font field adds a font family dropdown, system fonts plus the Google Fonts list, to a custom Elementor widget. It stores the chosen family as a string, which your CSS panel prints with {{ field_name }} inside a font-family rule.
How is the Font field different from the Typography field?
Font controls one property, the family, through a template token you place in your own CSS. Typography is a group control covering family, size, weight, spacing, and more; it works through a Selector option, has no token, and handles Google Font loading itself. Family-only widgets take Font; full text styling takes Typography.
Why does my chosen Google Font render as a fallback font?
The Font field does not enqueue Google Font files. The browser falls back to the next family in your stack until the font is loaded by the widget’s own script or elsewhere on the site. Add a loader like the JS-panel example above, or stick to families the site already serves.
Where do I put the Font field’s token?
In the CSS panel, inside a font-family declaration: font-family: {{ quote_font }}, serif;. The token renders to the family name string, and the fallbacks after the comma are yours to define.
Can I set font size or weight with the Font field?
No. The field carries only the family. Keep size and weight in your stylesheet, add a Number field for a tunable size, or switch to the Typography field for the full panel.
Can the template react to which family was picked?
Yes. The value is a plain string, so the HTML panel can compare it: {% if quote_font == 'Lora' %}class="pq-quote pq-quote--tight"{% endif %}-style branching works when one face needs special treatment.
Wrapping up #
The Widget Builder Font field does one job with very little surface: a family dropdown in the panel, a string token in your font-family rule, and full control of the fallbacks left in your hands. Load the font when you offer Google families, and step up to the Typography field when a widget needs the complete text-styling panel. Explore the rest of the Master Addons widgets and extensions, and see the pricing page for what each plan includes.
