0

I have been starting to use below method for smooth font in webkit browser. Well, when I say webkit browsers, I meant Chrome on Windows, not safari, because safari renders font smooth enough. If possible, I would like to make it work for Opera as well, because Opera just became webkit based browser. Anyhow, I have 3 questions:

  1. How to detect Chrome browser on windows only? I only need to apply the bottom style to Windows Chrome.

  2. I use svg font for titles only. Can search engine(mainly Google) find svg text? Is it good for SEO? One of the reason I asked is because the font on my games page are not being highlighted when I select them using Ctrl+F or mouse. It's just weird in Chrome. www.comc.com/Challenges/Default.aspx (you have to sign up)

  3. What does this "break hinting" mean exactly? This is the original note from using the css at bottom. "Note, that will break hinting! In other OS-es font will be not as sharp as it could be"

    var winxp = navigator.userAgent.indexOf('Windows NT 5.1'),

    winvs = navigator.userAgent.indexOf('Windows NT 6.0'),

win7 = navigator.userAgent.indexOf('Windows NT 6.1'),

win8 = navigator.userAgent.indexOf('Windows NT 6.2');


if ($(winxp > 0) || $(winvs > 0) || $(win7 > 0) || $(win8 > 0)) {
    $('<link rel="stylesheet" type="text/css" href="/css/fontello-windows.css?25"/>').appendTo('head');
};



@font-face { 
   font-family: 'CardoRegular';
    src: url('../fonts/Cardo104s-webfont.eot');
    src: url('../fonts/Cardo104s-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/Cardo104s-webfont.woff') format('woff'),
         url('../fonts/Cardo104s-webfont.ttf') format('truetype'),
         url('../fonts/Cardo104s-webfont.svg#CardoRegular') format('svg');
    font-weight: normal;
    font-style: normal;
}

@media screen and (-webkit-min-device-pixel-ratio:0) {
    @font-face {
        font-family: 'CardoRegular';
        src: url('../fonts/Cardo104s-webfont.svg#CardoRegular') format('svg');

    }
}
user2734550
  • 952
  • 1
  • 12
  • 35

1 Answers1

0

Detecting Chrome on Windows

Probably the best browser-detect for chrome on Windows is

/Chrome/.test(navigator.userAgent) && /win32/.test(navigator.platform)

SVG fonts and SEO

When you import an SVG font, it's just a font. It's the same as any other @font-face rule. It doesn't affect SEO, since the plain text is still readable by crawl-bots.

Hinting

Font hinting is a technology which uses algorithms to guess how the normal shape of glyphs should be adjusted to best fit the raster (e.g. pixel grid) of the display. You can read more on wikipedia.

I assume the phrase "break hinting" is warning you that SVG fonts don't support this.

Why are you doing this anyway?

To be blunt, Google Chrome on Windows has terrible font rendering. Every Chrome user has, by using Chrome, signed up for that.

Also, I believe Chrome will, at some stage, fix their font rendering. When that happens, this code is worse than redundant: you will be degrading the performance of Chrome by forcing SVG fonts instead of WOFFs.

Community
  • 1
  • 1
Jeremy
  • 2,642
  • 18
  • 36
  • What if people are using win64 like myself? I am already using the media screen() method it works great. Font looks very smooth and sharp in Chrome. If chrome fix the way they render font, I will change at that time. Not a big deal. – user2734550 May 09 '14 at 17:43
  • Even 64-bit windows reports itself as `win32` ([see here](http://stackoverflow.com/questions/19877924/what-is-the-list-of-possible-values-for-navigator-platform-as-of-today)). As the original comment says, the `@media` approach hurts other OS's by providing inferior hinting. Assuming, of course, that your font actually *has* hinting. The `@media` is also a hack, which is undesirable from a code readability perspective. – Jeremy May 11 '14 at 23:21