How to self-host Google Fonts in Astra Theme

When optimizing website performance, theSelf-hosted Google FontsIt's a matter of increasing speed and decreasing Cumulative Layout Skew (CLS) The effective methodology of theAstra The theme introduced this feature in version 3.6.0, allowing users to load Google fonts locally. In this article, we'll cover how to enable this feature, change the default settings, and how to remove the Astra branding.

Enabling Astra Self-Hosted Google Fonts

Astra provides Self-hosted Google Fonts feature that allows Google Fonts to be stored locally in order to woff2 format loading, reducing external requests and improving site performance.

Enabling Methods:

• log in WordPress Backend, go to Astra > SettingsThe
• start using "Load Google Fonts Locally" Options.

When enabled, Google Fonts will be loaded directly from local, reducing external requests and improving loading speed, especially for mobile device users.

How to modify Astra's self-hosted Google Fonts feature

By default, theAstra will save the font as woff2 format, which works in most browsers, but some older browsers (such as Internet Explorer and Opera Mini) do not support this format. If you need to support these browsers, or if you want to use a different format, you can follow the steps below to modify it.

1. Changing the font file format

in the event that woff2 format is not suitable for some browsers, you can change the font file format to woffIt is supported in more browsers.

Modify the method:

• Open the child theme and edit functions.php Documentation.
• Add the following code:

// Load font formats other than "woff2".
add_filter( 'astra_local_google_fonts_format', 'update_astra_local_fonts_format' ); }
function update_astra_local_fonts_format( $font_format ) {
  $font_format = 'woff'; // Change the format to "woff" or something else.
  return $font_format;
}

This enables the use of the woff Format loaded fonts, compatible with more browsers.

2. white-labeling Astra's self-hosted Google Fonts feature

By default, Astra will add a new file to the fonts folder and to the local CSS In the file name, add Astra Branding Logo. If you wish to remove the brand logo and white-label it, you can modify it using the following code:

• Rename the fonts folder:

add_filter( 'astra_local_fonts_directory_name', 'update_astra_local_fonts_file_directory_name' );
function update_astra_local_fonts_file_directory_name( $folder_name ) {
  $folder_name = 'mysite'; // Change 'mysite' to the desired folder name.
  return $folder_name;
}

• Rename the local CSS file:

add_filter( 'astra_local_font_file_name', 'update_astra_local_fonts_file_name' );
function update_astra_local_fonts_file_name( $file_name ) {
  $file_name = 'mysite-font'; // Change 'mysite-font' to the desired file name.
  return $file_name;
}

With these changes, the font folder and CSS file names will no longer contain the Astra Branded logo, fully compliant with customization requirements.

3. Clearing the cache

After completing the modifications, go to Astra > Settings page and click "Clear local font files." button. This will clear the old cache and ensure that the changes take effect immediately.

suggestion

When making these changes, it is recommended to use the subtheme, to prevent customization settings from being lost when the theme is updated. If you are not sure how to set up a child theme, you can refer to the tutorial. Also, it's best to set the customization settings in the interim environment The tests were conducted in order to avoid directly affecting the official website.

summarize

by enabling Astra thematic Self-hosted Google Fonts feature, users can load fonts locally to improve website performance. If you need to support more browser formats or remove thebrand identity, the modifications in this article can help complete the customization setup.

Latest Articles

Contact Us
Can't read the tutorial? Contact us for a free answer! Free help for personal, small business sites!	Customer Service
① Tel: 020-2206-9892
② QQ咨询：1025174874
(iii) E-mail: info@361sale.com
④ Working hours: Monday to Friday, 9:30-18:30, holidays off