0

Is it possible to render different font-familys in different browsers? For example, I want to use font-family: 'A' to be rendered in Chrome and font-family: 'B' to be rendered in Firefox.

2r83
  • 659
  • 1
  • 11
  • 21
  • 2
    Possible duplicate of [how to call browser based css?](https://stackoverflow.com/questions/3387827/how-to-call-browser-based-css) – Carl Binalla Aug 03 '17 at 09:46
  • @Swellar yeah now I am reading about conditional tag, maybe you can explain to me more about it – 2r83 Aug 03 '17 at 09:51
  • @RémyTeats no, I want it to be different font-family, for example I want in chore to use 'arial' and in firefox or ie to use 'calibri' – 2r83 Aug 03 '17 at 09:52
  • Look into browser-hacks. However, I'm not sure you can target *only Firefox* and/or *only Chrome*, independent of version. – domsson Aug 03 '17 at 09:59
  • By the way, may I ask *why* you want to do this? – domsson Aug 03 '17 at 10:01
  • @domsson because my boss told me to do that haha. He wants different font-family in different browser, font A for chrome and ie, and font B for firefox – 2r83 Aug 03 '17 at 10:13
  • I think it couldn't hurt to ask your boss *why* he wants that. It seems like quite an odd request. – domsson Aug 03 '17 at 10:36
  • @domsson He only told me before because it is our client request – 2r83 Aug 03 '17 at 10:46

2 Answers2

4

Keep the font class in separate CSS files and link them with the following JS code:

if (BrowserDetect.browser.indexOf("chrome")>-1) {

   document.write('<'+'link rel="stylesheet" 
   href="../component/chromeCSSStyles.css" />');

} else if (BrowserDetect.browser.indexOf("mozilla")>-1) {

   document.write('<'+'link rel="stylesheet" 
   href="../component/mozillaStyles.css" />');

} else if (BrowserDetect.browser.indexOf("explorer")>-1) {

   document.write('<'+'link rel="stylesheet" 
   href="../component/explorerStyles.css" />');

}
Ivan
  • 34,531
  • 8
  • 55
  • 100
Gokulakrishnan M
  • 350
  • 4
  • 14
2

You can actually apply specific CSS properties on different browser:

// this targets Mozilla
@-moz-document url-prefix() {
  h1 {
    color: red;
  }
}

// this targets Chrome, Safari AND Edge
@media screen and (-webkit-min-device-pixel-ratio:0) {
  h1 {
    color: green;
  }
}

// this targets IE
@media screen and (-ms-high-contrast: active),
(-ms-high-contrast: none) {
  h1 {
    color: orange;
  }
}

The following HTML h1 tag will be green on Chrome and red on Mozilla.

<h1>Look at my color!</h1>
Ivan
  • 34,531
  • 8
  • 55
  • 100
  • thanks, so can I use those to specify font-family too? – 2r83 Aug 03 '17 at 10:01
  • Will this work for all (future) versions of Firefox and Chrome? Can we be sure it won't also target future versions of other browsers? – domsson Aug 03 '17 at 10:03
  • can you show me how to achieve that for IE? btw I test it on jsfiddle but thats not working – 2r83 Aug 03 '17 at 10:08
  • @2r83 yes you can apply any CSS properties inside the browser specific brackets. I have edited my answer with the IE property. – Ivan Aug 03 '17 at 10:35
  • @domsson, not sure about that, Chrome, Safari and Edge have the same, as for Moz they have their own so that shouldn't change. – Ivan Aug 03 '17 at 10:35
  • @Ivan thanks alot, thats really helpful, I will try it first – 2r83 Aug 03 '17 at 10:48
  • @2r83 Always happy to help! – Ivan Aug 03 '17 at 11:17