Google Fonts is a vast collection of open-source fonts that can be used on any website. One of the popular website builders, Elementor, allows you to upload them to your website. This will improve the typography and user experience of your website.
Step 1: Choose the font you want to use
The first step is to choose the Google Font you want to use on your website. You can browse here and choose the font that best fits your website’s style and design.
Step 2: Download the files
Once you’ve chosen the font you want to use, you need to get the files by downloading them. Once you downloaded, then head over to your WordPress Admin dashboard and go to Elementor > Custom Fonts.
Step 3: Upload the font to Elementor
Now that you have the font family name and font weight, you can upload the font to Elementor. Click on the ‘Add New’ button and fill in the font name.
Next, click on the ‘Upload’ button. Select the font file from your computer and upload it. You will need to repeat this step for each weight that you want to use.
Step 4: Use the font in Elementor
Now that you have uploaded the font to Elementor, you can use it in your designs. Open the Elementor editor and navigate to the ‘Typography’ section of the widget or element you want to modify. Click on the ‘Font Family’ dropdown and select the one you uploaded, which will be listed under ‘Custom Fonts‘ at the top of the list.
You can also select the weight, size, and other settings from the typography options.
Disable external Google fonts
You may minimise the amount of external queries and enhance your site’s loading performance by disabling Google Fonts. This will now prevent Elementor from loading External Google Fonts on your pages and posts.
- Go to the Elementor settings page in your WordPress dashboard.
- Choose the “Style” tab. There is an option in the Style settings called “Disable Default Fonts.”
Don’t worry, your site will now use the local Google fonts you uploaded. Repeat step 3, for any additional fonts you may want on your site.
