How To Enable Font File Uploading in WordPress

For these plugins to work, you must enable font file loading in your wordpress site. Following are the various ways you can achieve that.

1. Update .htaccess File (For Apache Servers)

Add this to your WordPress root .htaccess file:

apache

# Enable font file serving
<IfModule mod_mime.c>
    AddType font/ttf .ttf
    AddType font/otf .otf
    AddType font/woff .woff
    AddType font/woff2 .woff2
    AddType font/eot .eot
</IfModule>

# Enable CORS for font files
<IfModule mod_headers.c>
    <FilesMatch "\.(ttf|otf|eot|woff|woff2)$">
        Header set Access-Control-Allow-Origin "*"
        Header set Access-Control-Allow-Methods "GET, POST, OPTIONS"
        Header set Access-Control-Allow-Headers "Content-Type"
    </FilesMatch>
</IfModule>

# Set proper expires headers for fonts
<IfModule mod_expires.c>
    ExpiresActive on
    ExpiresByType font/ttf "access plus 1 year"
    ExpiresByType font/otf "access plus 1 year" 
    ExpiresByType font/woff "access plus 1 year"
    ExpiresByType font/woff2 "access plus 1 year"
    ExpiresByType font/eot "access plus 1 year"
</IfModule>

2. For Nginx Servers

Add this to your Nginx configuration:

nginx

# Font file MIME types
location ~* \.(ttf|otf|eot|woff|woff2)$ {
    add_header Access-Control-Allow-Origin *;
    add_header Access-Control-Allow-Methods "GET, POST, OPTIONS";
    add_header Access-Control-Allow-Headers "Content-Type";
    expires 1y;
    add_header Cache-Control "public, immutable";
}

3. WordPress Functions.php Method

Add this to your theme’s functions.php file:

php

// Allow font file uploads in WordPress
function allow_font_uploads($mimes) {
    $mimes['ttf'] = 'font/ttf';
    $mimes['otf'] = 'font/otf';
    $mimes['woff'] = 'font/woff';
    $mimes['woff2'] = 'font/woff2';
    $mimes['eot'] = 'application/vnd.ms-fontobject';
    return $mimes;
}
add_filter('upload_mimes', 'allow_font_uploads');

// Enqueue fonts properly
function enqueue_custom_fonts() {
    // Example of loading a custom font
    wp_enqueue_style('custom-fonts', get_template_directory_uri() . '/fonts/custom-font.css');
}
add_action('wp_enqueue_scripts', 'enqueue_custom_fonts');