I have a web site that's using a print style to dictate how the pages look when printing.
We're using a Google font called Lato. The pages are printing fine in all browsers and even some colleagues Chrome browsers print the pages fine. However on my own browser and another colleague's the text seems to be printed in white and some glyphs apprear. It looks like the text is there but just in white as it still prints same number of pages, you can see bullet points, underlines etc.
I changed the font to a websafe Arial with !important on *, body and p selectors for print media type and this did make headers appear but body text still not appearing.
Related
We are using font awesome icons but all of a sudden the icons are not showing up while printing.
Yet those are visible everywhere else on the entire site. Just not while printing.
All the related assets like fonts and css are loaded locally from the site.
I have checked the #media print visibility and display attribute they are visible and block only.
I have a custom font which I would like to use on my webpage but its edges blur slightly when viewed in Chrome. I have the font on my server and it's linked in CSS.
I was making a code formatter for my website and I encountered some strange behavior between desktop and mobile browsers. On desktop the code block looks like this:
and on my iphone the line numbers are, for whatever reason, in a smaller font size:
I haven't done anything to edit any sort of font sizes anywhere on my website. It's all default sizes. If I manually set the font size, say to 12px, it is still lined up on my desktop browser, and still smaller on my mobile browser.
The code block is laid out as a table with two cells. The left cell contains a 1 column table, each row contains a number. The right cell contains a 1 column table, each row contains a line of code.
Any idea why the font is shrunk on the mobile browser?
EDIT: LINK: http://grantslatton.com/posts/blog/2013-08-16/sudoku_solver/
EDIT2: It renders correctly on windows phones and android phones.
SOLUTION: Turns out mobile Safari decides to change text size for you! I saw a solution on this page that worked :Fix font size issue on Mobile Safari (iPhone) where text is rendered inconsistently and some fonts are larger than others?
I put -webkit-text-size-adjust: 100% in the body { } section of my CSS to prevent mobile safari from messing with my text size.
Turns out mobile Safari decides to change text size for you! I saw a solution on this page that worked:
Fix font size issue on Mobile Safari (iPhone) where text is rendered inconsistently and some fonts are larger than others?
I put the following in my CSS to prevent mobile safari from messing with my text size.
body {
-webkit-text-size-adjust: 100%;
}
Check out this site, as you can see the menu renders properly on desktop but on the iPad the font seem to get much bigger, causing a line break. Could it be because the font im using isn't loaded, and it uses the second instead (Times New Roman)? That sounds very plausable since i achieve the same result if i use only TNR, but how can i make the font smaller if Times New Roman is used instead of my first choice of font?
I am not seeing any change in font size for iPad 1 and iPad2.
http://quirktools.com/screenfly/
For example, take a look at http://www.google.com/webfonts/specimen/Open+Sans. Inspect the type, change the font size to something smaller like 12px. Now when I implement this font on my own website (in the same browser, i.e. Firefox 10 on Windows 7) it has very poorly rendered edges. I can get the font to look better (but not really acceptable) at 11px, 13px, 15px, etc., but at the link above the font looks perfect at all of those sizes plus even sizes like 12px, 14px, etc.
I've scoured their code for some kind of "rendering intent" rule or something like that but I just don't see it. How the heck are they getting all of their fonts looking so good, even on Windows browsers?
Edit: Here's some text that I inserted into Google's preview of the font: http://imgur.com/3eWUV
And the identically styled item in my own HTML page: http://imgur.com/QKNMp
The "g", the dots in the "i"s and nearly all of the letters are rendering very poorly.
Please check the page http://www.cs.tut.fi/~jkorpela/test/open-sans.html on your browser. It tests Open Sans in a simple environment using the coding recommended by Google. Both the black on white text and grey on white text, in 12px size, look normal on my Firefox. If they look OK to you too, then the problem is in some additional code on your page. In that case, post the code or a URL of a minimal case that still exhibits the problem as you see it.