large Iconfont icon cut off on the right side

Question

I'm using a large Icon from an icon font my client delivered as a header logo on the index page of a web app. The logo is as large as 60% of the device width and consists of a large round logo (about 40% of the icon) with text below and as wide as 60% of the device in portrait mode.

I got the logo with text as one vector icon font icon because the customer want's the text to be exactly as the brands CI demands.

_____###_____
____#####____
_____###_____
Slogan is here

It looks alright on the desktop preview and my google nexus 4 Dolphin Browser but in chrome (on the nexus) the slogan is cut off somewhat like this "Slogan is h". If I switch to landscape, it's displayed correctly again.

.header-box-logo {
  color: #fff;
  font-size: 6.4rem;
  margin: 1rem auto;
  display: inline-block;
}

[class^="icon-"], [class*=" icon-"] {
  font-family: 'iconfontnamehere';
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

I'm using a custom version of foundation 5 and iconmoon. I can't show you a demo as all images are bound by the NDA.

I'm at a loss here, any idea why this happens?

Answer 1

Try it media query

/* Galaxy Nexus (portrait and landscape) ----------- */
@media only screen and (min-device-width : 360px) and (max-device-width : 598px) {
    [class^="icon-"], [class*=" icon-"] { font-size: 1.6em; }
}

/* Galaxy Nexus (landscape) ----------- */
@media only screen and (min-width : 361px) and (orientation: landscape){
    [class^="icon-"], [class*=" icon-"] { font-size: 1.6em; }
}

/* Galaxy Nexus (portrait) ----------- */
@media only screen and (max-width : 360px) and (orientation: portrait) {
    [class^="icon-"], [class*=" icon-"] { font-size: 1.6em; }
}

/* Nexus 7 (portrait and landscape) ----------- */
@media only screen and (min-device-width : 603px) and (max-device-width : 966px) {
    [class^="icon-"], [class*=" icon-"] { font-size: 1.6em; }
}

/* Nexus 7 (landscape) ----------- */
@media only screen and (min-width : 604px) and (orientation: landscape) {
    [class^="icon-"], [class*=" icon-"] { font-size: 1.6em; }
}

/* Nexus 7 (portrait) ----------- */
@media only screen and (max-width : 603px) and (orientation: portrait) {
    [class^="icon-"], [class*=" icon-"] { font-size: 1.6em; }
}

Answer 2

In my case I solved the problem by prioritizing the svg format for fonts. Which is unfortunate, since it has the largest footprint (enabling http compression helps though)

As well make sure not to use the # symbol in your font url:

@font-face {
    font-family: 'myIconFont';

    src:url('fonts/myIconFont.eot?-7pdf04');
    src:url('fonts/myIconFont.eot?#iefix-7pdf04') format('embedded-opentype'),
        url('fonts/myIconFont.woff?-7pdf04') format('woff'),
        url('fonts/myIconFont.ttf?-7pdf04') format('truetype'),
        url('fonts/myIconFont.svg?-7pdf04') format('svg');
    font-weight: normal;
    font-style: normal;
}

@media screen and (-webkit-min-device-pixel-ratio:0) {
    @font-face {
        font-family: 'myIconFont';
        src: url('fonts/myIconFont.svg?-7pdf04') format('svg');
    }
}

Answer 3

This is a known issue in Chrome on Android and it's a pretty infuriating one. Have had it in a few situations myself. Seems to manifest whenever the browser:

• Is in landscape
• The object in question or one of its ancestor is centered by any method (text-align, absolute positioning or margin: 0 auto)

The bug has been mentioned in the chromium forums: https://code.google.com/p/chromium/issues/detail?id=391183

I wish I had a way to resolve it, but at the time of writing there doesn't seem to be a definitive solution. Lets hope a bug fix comes soon.