The use of fonts is absolutely necessary for building a website. While there are several ways to use them, certain methods can result in an unwanted extra loading times for our website.
Below, we’ll explain how and why it’s recommended to load fonts on WordPress sites using Elementor. However, these methods can be useful with other builders, such as the Bricks site builder. By doing this, we can achieve performance improvements of up to 90%.
Let’s get started by using Google Web Fonts as an example, one of the leading font sources today. The steps we follow below don’t necessarily need to be based on fonts from this site.
There are three ways to upload fonts to your website:
Embed the code for your chosen font from Google Web Fonts in your site’s header.
Choose the desired font from the list of available fonts in the builder (e.g., Elementor).
Install your fonts locally.
There are two main reasons why you shouldn’t load fonts using methods 1 and 2 in the list above. The first is that these methods aren’t compatible with Europe’s GDPR (General Data Protection Regulation) because Google collects information from our sites when using their fonts this way. The second reason to be careful with these loading methods is performance. For these reasons, option 3 is recommended. In Elementor, you just need to access the WordPress dashboard and go to “Elementor > Custom Fonts” to load the font you want.
To get the font we want, simply search for the one we like on Google Web Fonts and download it.
When choosing fonts, it’s important to consider that having more than two or three different types of variants isn’t necessary for a website. Furthermore, within each font, there may be many more variants than we actually need.
Let’s take the Lato font, for example. We can see that it has a large number of variants, such as thin, light, regular, bold, and black. It’s unlikely that if our design has a balanced use of fonts, we’ll use all of its variants. For example, if we’ve used Lato in its Regular and Bold versions, we’ll only need to download and install those files. Installing all the others would put an extra load on our website, so we recommend loading a maximum of five types.
Once the fonts have been downloaded, there are some considerations to keep in mind to ensure our website’s performance.
As we see in the image above, Elementor will allow us to upload fonts in up to 5 different formats, but each of them has a different implication, and this is where we need to pay attention.
EOT (Embedded OpenType)
This is a font format created to be embedded in web pages, primarily for older versions of Internet Explorer (IE 6-8). Because these are such old browsers, they’re likely not useful for much of your traffic, so it doesn’t make sense to sacrifice performance with this format.
SVG (Scalable Vector Graphics)
The SVG format isn’t dedicated to fonts, but rather to icons and glyphs. A useful example of this format would be “fontawesome,” an icon library, but its use is still unusual. Fonts in this format can be cumbersome and thus affect website performance.
TTF (TrueType Font)
This is a classic, old-school format that has been used for a long time. Its advantage is that it’s well supported and most devices can render it without issue. Its main problem is its size. It’s precisely for this reason that the formats listed below were developed.
WOFF (Web Open Font Format)
This format was Google’s solution to reducing the size of TTF files, resulting in better performance. All modern browsers, some older ones, and even Android support this format.
WOFF 2 (Web Open Font Format 2)
While similar to the aforementioned format, this one offers better compression quality, which will undoubtedly impact the performance and loading times of the website where it is used. The limitation of this format is that it is not supported by as many devices/browsers as its predecessor.
Now that we understand the characteristics of these different formats, which ones should we choose?
We consider both formats, WOFF and WOFF2, to be ideal. WOFF2 is used because of its lightweight nature, and WOFF serves as a backup in case the user’s browser doesn’t support the former.
Below, we share the contrast between a site with fonts in TTF and WOFF formats. In the first case, the page weight is 878kb, while in the second, with fonts optimized for performance, the site weight drops to 565kb, a more than considerable difference.
When converting TTF files downloaded from Google Web Fonts, we recommend using the Font Squirrell font generator with the following settings. If you encounter any issues with this converter, you can search for other converters online that offer fewer options but are easier to use.
The new version of Bricks has been released, laying the groundwork for creating professional websites for 2025 and beyond. This update brings features chosen by the community, which received over 30,000 votes in total.
Bricks is included as part of our plugin package with WordPress Plus.
Builder capabilities
Originally, Bricks offered only three types of access permissions for its users: “Full Access,” “Edit Content,” and “No Access.” While this was sufficient in the early stages of Bricks, with the availability of new tools, an evolution is now necessary. Version 2.0 addresses this access dilemma with the release of “Builder Capabilities.”
Now, in the WordPress admin panel, you can define custom permissions for each user or role. To do this, go to “Bricks > Settings > Builder Access.”
This new feature allows you to define more than 50 individual permissions for the following areas:
Post Types: Select which post types can be edited with Bricks. General: Access specific Bricks features (Icon Manager, Font Manager, Breakpoint Manager, etc.). Templates: Define template editing functions. Global Styles and Settings: Access theme styles, color palettes, global class and variable manager, etc. Components: Define component editing functions. Element Editing and Styling: Access query loops, content and/or style settings, etc. Edit Elements: Set element editing permissions. Add Elements: Set permissions for adding elements.
Element Manager
This new tool allows you to limit the number of Bricks elements available on your website. Since it’s unlikely you’ll ever need to use all 110+ native elements, you can now disable any you want, whether to tidy up the builder, improve performance, or more.
In the WordPress admin, these options can be found under “Bricks > Elements” and can be set to one of the following modes:
Active: The element is visible in the builder and the frontend. This is the default behavior. Hidden (Builder): The element is not visible in the builder’s elements panel, but is displayed in both. Elements can also be added via import, copy and paste, etc. This option only clears the elements panel; it does not disable the element. Disabled: A disabled element does not load in either the builder or the frontend.
Elements can be filtered by:
Unused elements
Native elements
Custom elements
This feature precedes the previously mentioned “Builder Capabilities” feature, so if we disable an element here, it will not be available to any user.
Builder UI: Revamped
The interface has been improved with higher contrast and improved readability. The control groups and the structure panel have a refreshed look, and the theme styles panel has been cleaned up, with all individual elements nested under the “Elements” group. The preload screen is now truly dark, and the pseudo-class UI has found a new home outside of the builder toolbar.
Font Manager (In the builder)
The new Font Manager is accessible from the WordPress admin panel by going to “Settings > Font Manager” or by clicking the gear icon on any font dashboard, allowing for professional-quality font addition and management. Some of the new features include:
Create custom fonts by quickly uploading all font variation files in one step.
Browse and download any Google Font with a single click to host locally (GDPR compliant).
Mark individual fonts as favorites to narrow down your font family selection in the builder.
Move fonts to the trash without immediately deleting them.
Icon Manager (In the builder)
The new Icon Manager 2.0 allows you to create and manage your own icon sets. This setting can be accessed from Settings > Icon Manager by clicking the Options button.
Features:
Create custom icon sets (upload your own SVG files).
Use these icons in any icon control and SVG element.
Adjust the height, width, stroke color, and fill of your icons.
Disable any icon set, even built-in ones (previously configured icons will be displayed and rendered).
SVG Styles
Prior to version 2.0, icon styles were only applicable to the design’s base size.
This limitation has now been removed, and you can now define SVG icon styles (height, width, stroke width, stroke color, fill) for any resolution or global class.
Joint editing of elements
This is a massive change to improve your workflow. Bricks now allows you to select multiple elements to edit at once. To do this, hold down CMD/CTRL and click on the elements you want to edit in the workspace or in the structure panel. You can also select a series of elements between the first and last selected by holding down the SHIFT key.
Supported bulk editing actions
The options for editing together depend on the selected elements. If all the selected elements are the same, for example, if we select three headings, joint editing can be done in the Style and Content tabs. If the elements are different, only the Styles tab will be available.
Supported Bulk Editing Actions
In addition to editing elements together, it’s possible to move them at the same time if they’re within the same parent element. It’s also possible to duplicate, delete, and wrap selected elements. Finally, you can assign new classes to groups of selected elements. Pre-assigned classes won’t be displayed, as each element can and likely has different default classes assigned.
Context menu: Unwrap
Now in Bricks 2.0 you can select any element in the page structure and right-click on it and use the new “Unwrap” action to remove the selected element and move all its nested elements into place.
Visual CSS Grid Builder
Finally, we want to mention another great tool that Bricks 2.0 brings us. While it’s been possible to create CSS grid layouts in Bricks for some time now using simple text input, it was never as easy or enjoyable an experience as it should have been.
If you weren’t familiar with the rules for creating CSS grids, this process became a tedious exercise in trial and error.
The new “Visual CSS Grid Builder” makes this process more user-friendly. To access this feature, you’ll find the “grid” icon next to the “Display” control if the display value is “Grid.” Clicking this icon will open the full-screen CSS grid editor, where you can edit and modify the grid layout to your liking, without having to write any code.
Visual Grid Builder Interface
Once this interface is open, you’ll clearly see a representation of the currently selected grid. This allows you to easily adjust the number of columns, rows, and the gap between them.
If you want to adjust the size of an individual element, simply interact with the cursor by dragging one of its corners until you achieve the desired result. If you want to move an item, simply drag and drop it wherever you like.
For more information about this complex tool, Bricks has published an article dedicated exclusively to the features it offers.
Final conclusions
Bricks is a lightweight visual builder with a lot of potential. Its influence and available tools are such that we’ve even noticed Elementor preparing to incorporate some of them, such as the use of classes, in future versions.
Although still in its alpha version, we recommend keeping Bricks under your radar and giving it a try, at least in a testing environment, to understand its potential and know how to choose the right builder for your next project.
Elementor’s latest online event brings us an extensive list of improvements and updates to Elementor AI, Site Planner, briefs, sitemaps, wireframes, and more.
AI Notetaker
This Site Planner feature will help make client discovery calls run smoothly and lay the groundwork for your website to transcribe the conversation and generate a structured project brief. Support for Zoom and Google Meet calls is coming soon.
Site Planner will be more accessible to other languages, including those that are written from left to right or vice versa. Once you start typing in a language, Site Planner will respond in that same language and generate your project brief, sitemap, wireframe, and entire sitekit this way.
Site Planner Improvements
Styling options for the early stages of design are coming soon. You can now add styling tweaks like fonts, color palettes, and logos within the wireframe.
Clicking the “Style” button in the wireframe tab will take you to an interface welcoming you with a predefined color palette, generated by AI based on your brief, considering the industry, tone, or any brand preferences mentioned in the meeting with the client. You can then adjust any other settings by customizing the palette with the color picker or HEX codes, choosing fonts, or even uploading your brand logo.
These changes are updated in real time, allowing your client to receive clear feedback and understand your vision from the earliest stages of the project, thus accelerating the design process. All these adjustments will be transferred to Elementor with its global styles, so you won’t have to start from scratch when creating your website. After completing this process, you can easily share the project with your client.
The wireframe tool will incorporate new features. Elementor will offer the ability to move pre-designed blocks or describe design decisions with the ability to easily undo and redo changes. This will make iterations smoother and faster. This way, Site Planner offers a better integration experience with Elementor.
Next quarter, Site Planner will support more complex websites with greater wireframe customization. Elementor will also soon support logo creation with the AI-powered Logo Maker.
Hello Biz
Hello Biz is a lightweight, free WordPress theme launched by Elementor earlier this year for business websites. This theme will help users create professional business websites quickly and flexibly.
Because Elementor understands that performance is key to staying competitive, Hello Biz offers pre-designed templates, content-focused “Hello Plus” widgets, and a dedicated home screen to guide you through the website setup.
Contact widget
This is an all-in-one widget, ready to offer contact information, social media links, and Google Maps location, all in a single tool. It offers three flexible design styles that will help you achieve better results when applying it to contact pages or even footers. The main advantage of using this widget is that you can edit all elements without having to navigate through layers.
Visual layout presets
A new feature for the Hello Plus widgets is the visual layout presets. This will allow you to choose between different ways to show your content, exclusively in the Hello Plus widget. This enhancement is currently available in the “Flex Hero”, “CTA”, “Contact” and “Header” widgets. In the upcoming months this feature will also be available for the “Form light” and “Footer” widgets.
This presets will allow you to seemlessly switch your layouts without losing your content, providing you flexibility and efficiency in your design workflow. Unlock numerous layout combinations with each preset activating specific alignment options under the style tab.
Looking to improve this features, Elementor has implemented two significant tool enhancements. One for the “Form light” widget with form submissions feature. This Elementor Pro feature allows you to receive all messages from the contact form in your “Elementor > Submissions” tab. This way you will centralize all form entries within a dedicated space ensuring efficient management of visitor interactions. The other enhancement consists on having dynamic tags available accross Hello Plus widgets. Having this feature available will ensure you can incorporate dynamic content facilitating the development of more advanced and personalized websites.
Editor v4
The new version of the Elementor editor, announced three months ago, not only improves styles but also features to further empower professional web creators and pave the way for more advanced features in the future.
Three months later, it’s time to announce that the alpha version of the v4 editor is just around the corner. If you’d like to try out some of the upcoming features, they’ll be available in the next update, version 3.29. It’s highly recommended to use these new tools on test sites for the time being.
CSS Oriented design system
Editor v4 completely revolutionizes how styling works in Elementor. Instead of element-specific styling, Elementor introduces a structured, scalable, and performance-focused approach designed for site-wide consistency. You’ll have full control over variables, classes, and states.
Atomic elements
A component-based tool that allows you to group multiple reusable elements and create variants of them. This tool allows you to manage complex designs consistently.
Improved performance
Editor V4 claims to be faster than it’s predecesors. With the focus set on improving performance, this new version of the builder will load much faster. Some of the speed will come from shifting to a class-based approach but unnecesary wrappers will be removed aswell. This will help generate cleaner outputs.
Although the alpha version still runs alongside V3, improvements will be noticeable but the full performance difference will be trully impactful once V4 gets to run on it’s own.
User experience
The user interface has been revamped and modernized, reimagining the editor experience, making it more fluid and intuitive. The design tab has been updated, unifying the style tab, inline editing, multi-selection, and fully responsive customization.
Editor v4 alpha
This alpha version of the new builder will offer the “Unified Style Tab,” “Classes,” “States,” and “Fully Responsive Styling” features. Elementor states that this is just the beginning and that there will be much more to experience in subsequent versions of Editor v4.
Unlike previous versions, v4 will only offer two tabs with the same styling options for each widget. Now, all elements share a single, consistent interface for design controls. This makes working with different widgets faster and more intuitive, as the styling options will remain the same. This consistency in the interface is the foundation of a scalable, professional-quality design system, which will support future features like the variables and atomic components mentioned above.
If you want to try the alpha version of the v4 editor, you’ll need to access a new tab in the Elementor settings menu in your WordPress dashboard called “Editor v4.” Simply click the “Activate the new experience” button, and after a few confirmation steps, you’ll be ready to go.
To sign up for early access to the alpha version, scan the QR code below or visit elementor.com/editor-v4.
To launch the alpha version, Elementor claims to have dedicated teams already working on the next phases of Editor v4. Future versions will offer new features, starting with “Variables,” a new generation of global variables that will simplify the process by allowing you to define and manage fonts, colors, and sizes globally. With a single update, your entire site will instantly adapt with perfect consistency.
Later this year, Elementor Editor v4 will introduce atomic components, drag-and-drop improvements, a new user interface, and more. This includes a cloud-based template library that will allow you to save, manage, access, and share design elements across projects and users—whether sections, containers, or entire pages with all their content, styling, media, and attachments. This is intended to improve efficiency when working across multiple projects.
Site Mailer
With over 100,000 active installations, Site Mailer uses a modern, API-based approach instead of an outdated SMTP to dramatically improve email deliverability. This tool ensures that emails reach their destination, whether they’re form submissions, order confirmations, or customer communications. Site administrators can also monitor email deliveries and troubleshoot issues, giving them greater control and confidence.
Image optimizer
The Image Optimizer has over a million installs. It automatically compresses and displays images in cutting-edge formats. This improves loading times and performance without sacrificing quality. Since performance influences a website’s ranking, this feature will help you optimize your SEO strategies.
Greater accessibility with Ally
Accessibility isn’t just a legal requirement. This Elementor accessibility plugin will help you create more inclusive websites without added complexity. The essential tools to get started are available now with the launch of Ally’s first phase. You can now add a usability widget to your website that gives visitors control over visual settings. You can also create a custom accessibility statement, as required by law in many countries.
Three useful new features have recently been added to Ally:
Screen reader
A native multilingual tool integrated into the widget. Users can choose between fast, normal, or slow reading speeds to have website content read aloud without the need for external tools.
Analitycs
This tool provides access to interactive dashboards to track visitor interactions with the accessibility widget.
White label
This option will allow you to remove the Ally branding that displays by default in the widget, allowing you to fully integrate it with your website’s design.
Site scanner
This automated tool, coming soon, scans your entire website to identify accessibility issues. It includes an intuitive step-by-step guide that will explain how to resolve them.
Send
In the last two weeks of March, Send officially entered beta. This plugin is now available for download from the WordPress repository. It’s more than just a marketing tool for WordPress and works seamlessly with WooCommerce and non-commercial websites.
Integrations
There will be several updates to Send in the upcoming months. The first improvement will expand integrations with more form plugins to optimize data capture and speed up automations.
Integrations with Connect Form 7, WPForms, Ninja Forms, and Gravity Forms will be added based on feedback from early access users.
Personalization
Send will soon be adding smarter, more granular features for workflows and broadcasts, so your messages reach the right people at the right time. Instead of sending the same message to everyone, you’ll send messages to the right audience at the right time.
This new level of personalization will be achieved with advanced triggers and dynamic content widgets. From real-time cart activity to specific product views and customer behavior, users will be able to segment more precisely and engage with customers on a deeper level. Send will also enable post-purchase follow-ups, limited-time offers, and cart reminders, enabling highly relevant emails that convert better, reaching the right person at the right time based on their location, availability, or even their date of birth.
Brand Brush
Another revolutionary feature is coming soon. “Brand Brush” will allow you to instantly apply your branding to every email and resource with a single click. Send will automatically pull your branding style directly from the website you just created.
This one-click tool will allow you to instantly import your fonts, color palette, logo, and more, automatically applying them to every email you send.
New appearance
Finally, a completely new visual interface will be introduced for the Send app, combining an intuitive design with a more elegant and modern experience.
This new look will allow users to work faster, stay creative, and accomplish more with less effort. Every detail will be considered so you can move faster and enjoy the process.
All of these improvements will make Send not only powerful but also a pleasure to use. This new level, based on user feedback, will help define the future of marketing automation in WordPress.
Final conclusions
Elementor appears to be establishing a broad and organized set of goals to improve WordPress website creation and management. The upcoming months will undoubtedly bring new ways to create websites. We hope these new features will integrate seamlessly with the ones we already have available, improving our experience as designers/developers and allowing us to deliver better results to our clients.
Editor V4 promises a better creation experience for web design. At Fastweb, we hope these tools will allow us to create better experiences for those who rely on us.
