Member Avatar for Phanindra Reddy

Sorry to ask this one , but i am helpless to get it out. I am doing a site for my client and created a responsive menu.

The font style for the menu is not working even though I marked it as important.

My site url is.

The style i am trying to use is.. Cocktail Shaker

Please help me.. Client is very hurry..

Thanks in advance

  • 2 Contributors
  • 1 Reply
  • 362 Views
  • 18 Hours Discussion Span
  • Latest Post Latest Post by Ajay Gokhale

Dani AI

Generated

Quick summary: reported the menu font wasn't applying while saw the font working in his Firefox. That pattern usually means the font file is available but either a CSS-specificity override, a caching/minification issue, or a cross-origin / mixed-content problem is preventing the rule from taking effect for the OP's environment.

Checklist to debug (do these in order)

  • Inspect a menu link with DevTools: look at the Styles and Computed panes to see which font-family rule wins and whether any rule is crossed out or marked !important.
  • Confirm the webfont actually loads: open Network -> filter by “font” (or look for the Google fonts request) and verify a 200 response. If it fails, note the status (403, 404, blocked).
  • Check for mixed-content / protocol issues: on HTTPS sites load fonts over HTTPS (or use protocol-less URLs).
  • If fonts come from another domain, ensure CORS allows them (fonts blocked by missing Access-Control-Allow-Origin are common).
  • Clear caches (theme/plugin minify, CDN, browser). Test in an incognito window or another browser.
  • Verify the responsive/mobile menu uses the same selectors; some JS-driven menus clone markup and need separate selectors.

Practical fixes

/* enqueue in functions.php (use your font URL) */
function theme_enqueue_fonts() {
  wp_enqueue_style('theme-google-fonts',
    'https://fonts.googleapis.com/css2?family=Cocktail+Shaker&display=swap',
    array(), null);
}
add_action('wp_enqueue_scripts', 'theme_enqueue_fonts');
/* target the actual menu anchor selector used by your theme */
#site-navigation .menu li a,
.nav-menu li a {
  font-family: "Cocktail Shaker", serif;
}

If another rule has higher specificity, make your selector more specific (target the nav ID/class and link state) rather than jumping straight to !important. If the font still fails to load, check server/CDN headers for CORS and any optimization plugin that might rewrite or inline CSS.

Member Avatar for Ajay Gokhale

Hi,

I have look your site. From my side font is working. I am using latest Firefox. Please see attached screen shot.

Thanks,
Ajay c69fa1659a405c95d0bc18200dd8216e

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.