Add a Custom Font to Divi Without Losing Readability
By George Nicolaou
A custom font can make a website distinctive, but readability and loading behaviour matter more than novelty. Start with a font whose licence permits web embedding.
Prepare the font files
Use the formats supported by your installed Divi and WordPress versions. Choose only the weights and styles you need. Uploading several unused families increases the work needed to load and maintain the design.
Apply a consistent type system
Set the font through Divi’s native typography controls or reusable presets, rather than changing individual paragraphs by hand. Check headings, body text, buttons and form labels together. Keep a sensible fallback family for visitors who have not yet loaded the custom file.
If WordPress rejects the upload
Confirm the file type and the user’s permissions first. Do not allow every file type just to upload one font. The earlier MIME-type example below is retained as a development reference; any exception should be narrowly scoped and reviewed for the current environment.
Test the result
Read a long paragraph on a phone, inspect accented characters and check the page on a slower connection. Watch for layout movement when the font arrives. If the typography becomes difficult to read, simplify the weight, size or spacing before adding more effects.
Related guides
add_filter('upload_mimes', 'add_custom_upload_mimes');
function add_custom_upload_mimes($existing_mimes) {
$existing_mimes['ttf'] = 'application/x-font-ttf';
$existing_mimes['otf'] = 'application/x-font-otf';
return $existing_mimes;
}
0 Comments