I was making a presentation using Google slides (in Chinese) and when I want to preview it in presentation mode, "some" of the font looks different from editor mode.
The sample here
I've tried searching on Google and found only this discussion thread, but my problem is a little bit different. The font changes when I change it in the editor and in the presentation mode, the "character" somehow just looks different in presentation mode(the font style is correct). I have tried Safari, Chrome, Firefox, but all fails.
Is this like a bug only for Chinese characters? English seems perfectly fine to me. Does anyone have the same problem and knows how to resolve it?
Actually this happens to many other languages (like JP, KO, etc.) as well.
It gets rendered differently from editor to presentation mode.
So, here is the quick fix for the issue.
Use 'ShowAsIs' Chrome extension to fix it.
https://www.youtube.com/watch?v=Rt4xnAFFGik
Disclaimer: I am the developer of the extension.
Related
We're using Barlow, available for free from Google fonts, in a web app. Here's the way a sample phrase looks when rendered on Google's example page. (If you want to reproduce it, you will need to enter the custom text yourself and adjust the slider to 14px.)
Note, in particular, the distinct space between the bottom of the i and its dot above, as well as the clarity of the top part of the f.
This is how the same phrase looks when rendered in our app, as reproduced in this Code Pen.
Note the muddy space between the i and its dot, as well as the muddy top curve to the f.
I've tried looking through all the styles on the elements in question, and I can't find any style that should affect these differently. The network tab clearly shows that the bold version of the font is being loaded; it doesn't look as if this could be faux bold.
This may seem trivial, but we've actually had quite a few complaints about how the font looks in our app, specifically that the bold, lowercase i looks like an l.
Anyone have an idea what might be happening here?
Update: Using Chrome on a Mac; I can confirm the same issue in Firefox. This is on an external display... on a retina there's no problem, as there is way more detail.
The problem turned out to be a problem with the source repo: "hinting got missed in the most recent commit" and the Google specimen (which looked correct) was "actually running an earlier version."
Happily, the maintainer was able to get the problem fixed with a subsequent version.
So this is a problem I have on a site I'm developing, but I included a screenshot from the Google Fonts web site, because it's public and everyone can look at it and it's also clear it's not something specific to my code.
The screenshot was taken on a Windows 7 virtual machine running IE9. It's the virtual machine from https://dev.modern.ie, so there shouldn't be anything special about it either.
And finally, this is the Fira Sans font, but this same issue has happened to me before with the Lato font on another (Windows) machine, so it shouldn't be the font either.
If you open the page — https://www.google.com/fonts/specimen/Fira+Sans — it will probably look just fine on your machine, as it does on mine. I can only reproduce it on the VM.
Here's how it looks in IE9:
In Chrome all glyphs are missing, so all of the text that is using the font is not rendered at all.
In Firefox the rendering is a little ugly, somewhat pixelated, but at least all of the glyphs are there and it's almost alright.
I tried deleting C:\Windows\System32\FNTCACHE.DAT and some font-related .dat file in
C:\Windows\ServiceProfiles\LocalService\Appdata\Local, but it made no difference.
At this point I have absolutely no idea what's going on. Do you have any idea what might be causing this? Any help is much appreciated.
I have been experiencing the weirdest problem, that I can't even begin to troubleshoot. It is important that the webpage in this project I am working is 100% printable. As you can see the signature field below and the note field (with the string "erererer") shows great in Google Chromes print preview but not when I actually print it out using the Chrome browser. In fact, the note field just prints out the border and nothing else (looks like a white empty div with a border) and the signature field prints out everything but the actual signature. When I use google chrome to save the document as a PDF and then print it out directly from the PDF everything prints perfect. When I use firefox to print, the signature area prints perfect, but the note problem remains of it only printing the outter border.
I would greatly appreciate any suggestions on how to begin to fix this or any input on why this may be happening.
Many thanks in advance!
If you need accurate & reliable printability, going iText and PDF is a solution. You can render the page as PDF and it will show in the browser, and then print exactly as specified.
HTML is often inexact, has marks (page numbers etc) from the browser, and can be glitchy.
iText (latest versions) are available open-source, or commercially. There's also an older version available free. See: What is latest version of itext that is not AGPL?
As for your note field: maybe there's something weird with backgrounds, non-standard styling? , or fonts that aren't present? Try making it a plain vanilla table.
I'm using local font Meera.ttf, MEERA0.eot on my current website which is Malayalam (a local language in India). Now the problem is the large posts showing some big fonts in Chrome, but it works perfectly in all other browsers. Other content works perfectly in both Chrome and other browsers. Attaching two screenshots. The first one is Chrome and the second is Firefox.
Chrome
Firefox
This happened on so many pages. But if the content is short, it works nicely.
For reference, the site is on Wordpress.
The W3C Markup Validator finds 101 markup errors on the page and additionally issues 10 warnings. The page structure is rather contrived, and it does some browser sniffing and tries to serve different style sheets for different browsers. It is very difficult to say whether these have something to do with the problem observed. It is probably a major effort to track down the cause of the problem, and having that many markup errors makes a page rather fragile.
I’m afraid the obvious answer “simplify the structure and fix the markup errors first” is not very realistic, but it might be the best advice you can get.
I just set up Google Fonts API on my site. Internet Explorer, whenever I refresh the page, a default font flashes before the Google Font 'Reenie Beanie' loads. But shouldn't this be sticking in the cache or something so that once it loads once, it's there and no longer should default fonts show up?
I'm using the WebLoader version to call the fonts. I originally just used the <link> call to the fonts, but the problem there was switching to an https page - I had to use the https link, but then I think that stopped the fonts from caching too. Everything is fine in Firefox (no flashing).
Any suggestions on this?
www.n-styleid.com
Everything is working as it should (In the worst sense of the words)
This is just a problem IE is having with its rendering engine. It cannot download/retrieve the fonts and render them as fast as the basic built-in fonts that the OS has.
There really is no good way to fix this as it is not something that you broke. The best advice that I can give you is to find a font in the system that looks closest to it (Not many handwritten in the system but better than arial) and use that in your font stack.
Hope that helps.
A work around is to hide the element with css and fade it in with jquery. This will give your font time to load. Its a good idea to use a decent fallback if the content is vital.