{"id":118769,"date":"2023-05-03T23:02:05","date_gmt":"2023-05-03T22:02:05","guid":{"rendered":"https:\/\/wpsimplefix.com\/?p=118769"},"modified":"2026-09-24T17:41:48","modified_gmt":"2026-09-24T17:41:48","slug":"host-fonts-locally-in-elementor","status":"publish","type":"post","link":"https:\/\/chkserv.com\/blog\/host-fonts-locally-in-elementor\/","title":{"rendered":"Host Fonts Locally in Elementor"},"content":{"rendered":"\n

Google Fonts is a vast collection of open-source fonts that can be used on any website. One of the popular website builders, Elementor,<\/a> allows you to upload them to your website. This will improve the typography and user experience of your website.<\/p>\n\n\n\n

<\/div>\n\n\n\n

Step 1: Choose the font you want to use<\/h2>\n\n\n\n

The first step is to choose the Google Font you want to use on your website. You can browse here<\/a> and choose the font that best fits your website’s style and design.<\/p>\n\n\n\n

Step 2: Download the files<\/h2>\n\n\n\n

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 > Editor > Custom Fonts.<\/p>\n\n\n\n

<\/p>\n\n\n\n

Step 3: Upload the font to Elementor<\/h2>\n\n\n\n

Now that you have the font family name and font weight, you can upload the font to Elementor. Click on the ‘Add New Font’<\/strong> at the top right.<\/p>\n\n\n\n

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.<\/p>\n\n\n\n

<\/div>\n\n\n\n

<\/p>\n\n\n\n

Step 4: Use the font in Elementor<\/h2>\n\n\n\n

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<\/strong>‘ at the top of the list.<\/p>\n\n\n\n

You can also select the weight, size, and other settings from the typography options.<\/p>\n\n\n\n

Disable external Google fonts<\/h2>\n\n\n\n

You may minimise the amount of external queries and enhance your site’s loading performance<\/a> by disabling Google Fonts. This will now prevent Elementor from loading External Google Fonts on your pages and posts.<\/p>\n\n\n\n