What is the tutorial about?
See how you replace Google Fonts with Custom Fonts on your Elementor Website brought to you by Web Squadron. It is a must-watch for anyone looking to enhance their website’s aesthetics and performance. If you want to learn more about how to reduce the size of your fonts even further check out this tutorial.
Tutorial Steps
- Identify the Current Font:
Start by identifying the fonts used on your website. In this tutorial, the ‘Railway’ font was used as an example. - Access the Custom Fonts Option:
If you have Elementor Pro, you’ll find the custom fonts option in your WordPress dashboard. - Add Your Font:
Click on ‘Add New’ and input the name of your font (in this case, ‘Railway’). Click on ‘Add Font Variation’. - Upload the Font:
Upload the font file. The tutorial recommends using the WOFF2 format as it is compressed and will help improve your website’s speed. - Publish the Font:
Once you’ve uploaded the font, click on ‘Publish’. - Refresh Your Page:
Go back to your website and refresh the page. Your new custom font should now be in use. - Check Your Work:
To confirm that your custom font is being used, go to the ‘Style’ section and check the ‘Typography’ settings.
Use Cases for this Tutorial
- Website Redesign:
If you’re looking to give your website a fresh look, changing the font can make a significant difference. - Speed Optimization:
Using custom fonts, especially in the WOFF2 format, can improve your website’s loading speed. - GDPR Compliance:
If you’re concerned about GDPR, using custom fonts can help you avoid fetching data from Google Fonts.
