Skip to main content

Adding Additional Fonts to Your Divi Mobile Menu

Customizing the font of your Divi Mobile menu can significantly enhance the look and feel of your site's mobile navigation, making it more aligned with your brand's identity. This guide will show you how to add new fonts to your mobile menu using CSS.

Step 1: Add Custom CSS for Font Change​

  1. In your WordPress dashboard, go to Divi > Theme Options. This section allows you to customize various aspects of your Divi theme.
  2. Scroll down to the Custom CSS box. This field lets you add custom CSS codes that can override the default styles of your Divi theme.
  3. To change the font of your mobile menu, you will need to add CSS code targeting the menu's links. Substitute 'font-name' with the actual name of the font family you wish to use. For instance, to use the Poppins font for your mobile menu, you would add the following code:

Add Custom CSS

#dm-menu a {font-family: 'Poppins', sans-serif;}

Ensure that the font you choose is properly imported or available by default in web browsers. If it's a custom font or not widely supported, you might need to import it using @import in your CSS or link it in the <head> section of your site through your theme options or another method.

Tips for Success​

  1. Font Availability: Ensure the font you wish to use is available for web use. If using Google Fonts or another web font service, you may need to import the font into your site's CSS.
  2. Fallback Fonts: Always include a generic fallback font (like sans-serif or serif) to ensure text is displayed in a legible font if the primary font fails to load.
  3. Consistency: Choose a font that complements the rest of your site's design to maintain visual consistency across your site.
  4. Testing: After applying the new font to your mobile menu, test it on various devices to ensure it displays correctly and enhances the user experience.

By following these steps, you can add a custom font to your Divi Mobile menu, further customizing your site’s mobile appearance and improving its branding and readability on smaller devices.

Last updated on