Complete Guide to Implementing Local Hosting of Fonts in GeneratePress Themes

In order to improve website loading speed and protect privacy, many webmasters choose to host their font files locally instead of relying on external services such as Google FontsThis article describes how to download and host fonts locally in GeneratePress theme environment. This article describes the steps to download and locally host font files in GeneratePress theme environment.

1. Download the font file

• utilization Google Fonts Helper and other tools to search and select the desired fonts.

• Check the necessary font variants to avoid adding to the page load.

• Skip the CSS code copying, download the font file zip and unzip it.

2. Uploading font files

WordPress The Media Library restricts font file uploads by default.

We recommend using the "Code Snippets" plugin to avoid the risk of directly modifying the theme files.

Add a new code snippet to the plugin that pastes open the font file upload permissions for thefunction (math.)Code.

After saving and activating the code snippet, themedia libraryUpload all unzipped font files.

Add the following PHP Code, temporary open font file upload permission (put in)subtheme functions.php (or managed with a code snippet plugin):

add_filter( 'upload_mimes', function( $mimes ) {
    $mimes['woff'] = 'application/x-font-woff';
    $mimes['woff2'] = 'font/woff2';
    $mimes['ttf'] = 'application/x-font-ttf';
    $mimes['svg'] = 'image/svg+xml';
    $mimes['eot'] = 'application/vnd.ms-fontobject';

    return $mimes.
} );

Upload the unzipped font file, it is recommended to delete the code after uploading.

3. Get a link to the font file

• Copy any font file in its entirety URL, e.g.: http://your-site/wp-content/uploads/2019/02/font-name.woff2
• Remove the filename and keep only the directory path as the CSS Path Usage.http://your-site/wp-content/uploads/2019/02/

4. Generate and add @font-face CSS

Let's go back to the Google Fonts Helper for downloading font files.

• Fill in the directory path in Google Fonts Helper.http://your-site/wp-content/uploads/2019/02/

• Copy the generated full CSS code.

• Paste into WordPress backend "Appearance" → "Customize" → "Attach CSS", or child theme style file.

5. Adding Local Fonts to GeneratePress Themes

• Go to "Appearance" → "Customize" → "Typography".
• Adding font names (with CSS) font-family (Consistent).

• Turn off the Google Fonts option and enable local fonts.
• Set the font application range and save to take effect.

6. Make local fonts appear in WordPress block editor.

The block editor does not load customizations by default @font-face CSS.

If CSS is in "Additional CSS", add the code injection editor:

add_filter( 'block_editor_settings_all', function( $editor_settings ) {
    $css = wp_get_custom_css_post()->post_content;
    $editor_settings['styles'][] = array( 'css' => $css );

    return $editor_settings;
} );

If CSS is used in a child theme style.css, add code:

add_filter( 'generate_editor_styles', function( $editor_styles ) {
    $editor_styles[] = 'style.css';

    return $editor_styles;
} );

Once this is done, the editor will display the local fonts correctly.

summarize

Locally hosted fonts improve loading speed and reduce third-party dependencies. Combined with GeneratePress theme's typography features, complete withcalligraphic styleFile download and upload permissions are turned on,CSS Adding and theme and editor font configurations enables perfect local hosting of fonts, improving the visual and performance performance of your website.

Recent Updates

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: [email protected]
④ Working hours: Monday to Friday, 9:30-18:30, holidays off