Member Avatar for Graycode

At

Depending on the browser, depends on whether the font inside the posts displays correctly. It's all meant to be Arial and the Header font H1-H2 and the body text is also Arial at 13pt. How can I do this as a mass change? There is 3000+ posts so I cannot change the tags for all of them.

  • 4 Contributors
  • 3 Replies
  • 109 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by Buppy

Dani AI

Generated

Short summary for : inconsistent fonts across browsers usually come from presentational HTML or inline styles inside posts (legacy <font> tags or style="font-family:..."), plus differences in OS font availability. Because editing 3,000 posts by hand isn’t practical, fix it with a stylesheet override and consider cleaning the stored post HTML as a longer-term solution.

As pointed out, a very broad rule will change everything; that can work but is heavy-handed and can break things like code blocks, form controls and icon fonts. ’s idea to set a root stack is good practice for new content, and ’s targeted selector strategy is useful when you only want headings or a subset changed. Neither alone necessarily beats inline font attributes, though.

Practical override to add at the end of your main stylesheet (place after all other CSS so it wins). This targets the posts container, forces a consistent sans stack, and restores monospace where needed:

#content .posts * {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
  font-size: 13px !important;
}

#content .posts code,
#content .posts pre,
#content .posts kbd,
#content .posts samp {
  font-family: monospace !important;
}

If older posts use <font face="..."> or inline style attributes, consider a DB cleanup on a dev copy: back up, then run a script (DOM-based preferred over regex) to remove face attributes and strip font-family from inline styles. Test thoroughly. Use the browser inspector (Computed styles) to find which rule is winning before and after changes. Use !important only where necessary and prefer fixing stored HTML for a permanent, cleaner outcome.

Recommended Answers

All 3 Replies

Member Avatar for MagicMedia 
* {font-family:arial,sans-serif;}
Member Avatar for macneato

Considering all (or atleast majority) of the styles are set to inherit, why don't you just try adding an arial stack. To do so, try the following:

body {
font-family: Arial, Helvetica, sans-serif
}

If its still not working, just be more specific

html body {
font-family: Arial, Helvetica, sans-serif
}
Member Avatar for Buppy

You can very easily target specifically nested tags. Like this:

body div#content div.posts div.single-post h1, body div#content div.posts div.single-post h2 {
font-family: Arial, Helvetica, sans-serif
}
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.