I am using Materialize to style some of my web pages. I have noticed that Roboto font does not render correctly in Firefox (v43.0.3), but looks fine in Chrome. Both browsers are downloading the woff2 font file from my server, which this question seems to indicate should be the optimum choice for modern browsers.
Chrome rendering:
Firefox rendering:
(I realize these low-res screencaps are not the best reproduction, the differences are much more apparent in the actual browsers.)
In the Firefox console, I receive a string of error messages similar to:
downloadable font: GSUB: too large substitute: 65535 (font-family: "Roboto" style:normal weight:normal stretch:normal src index:1)
downloadable font: Layout: Failed to parse lookup subtable 0 (font-family: "Roboto" style:normal weight:normal stretch:normal src index:1)
downloadable font: Layout: Failed to parse lookup subtable 0 (font-family: "Roboto" style:normal weight:normal stretch:normal src index:1)
No complaints from Chrome.
As I am not at all familiar with the intricacies of font rendering, I was hoping that someone with some knowledge in that area might have an idea what the problem is based on the error messages from Firefox.
I finally had some time available to look into this a bit more, it appears that some of the font files in the materialize repository are defective. I was able to completely resolve this issue simply by replacing the font files in the dist/font/roboto directory with the same files available at roboto-fontface-bower. Just pull from any of the version branches v0.3.0 or better.
Hope this helps anyone else who has been frustrated by this.
To me it looks like either the woff2 file has wrong offsets to the internal font tables or Firefox reads wrong offsets when parsing the offsets.
The GSUB table mentioned in the error message cannot be the main reason for the rendering problems, because it only defines glyph substitutions (like ligature composition and decomposition, alternative glyphs for the same char code, etc). The table does not contain any rendering information for standard glyphs, so if only that table fails to load, rendering of standard text should not be affected. Details about the GSUB table can be found in Microsoft's OTF specification.
Also, I get another error message when looking at this website:
http://gwt-material-demo.herokuapp.com/
Firefox tells me that there is something wrong with the OS/2 table (which contains Windows font metrics). This is a completely different part of the font file, which again indicates that there is something wrong with the font structure or with reading the font structure.
So there are two things you can do:
Do not use the woff2 file.
Notify the Roboto and Firefox developers about the issue and hope that they will find the cause for this bug and fix it.
Related
In Blazor Web Assembly project I referenced Ubuntu font as default font for the project, when I load any page I got the following warning in console:
downloadable font: glyf: Number of composite points in glyph 1258
exceeds maxp maxCompositePoints: 165 vs 150, adjusting limit.
(font-family: "MyFont" style:normal weight:400 stretch:100 src
index:0) source: https://localhost:1111/fonts/Ubuntu-Medium.ttf
This issue is just in Firefox browser.
Environment: windows 10
Unfortunately I found no solution to fix it, is there any way to fix this issue?
I'm not 100% sure if I interpreted the warning correctly.
The font you're using seems to be violating the TrueTypeFont Standard.
Maybe consider using another Version of the Font. Or simply ignore the warning , if there are no further problems with this font.
Here are further sources on TTF:
https://learn.microsoft.com/en-us/typography/opentype/spec/ttch01
https://learn.microsoft.com/en-us/typography/opentype/otspec180/maxp
Suggestion
Apparently the font you're using is available via the google fonts API.
Here's how to get started: link
Note that using this approach, your browser will fetch the fonts directly from google. Also the fonts will be in woff2 format.
I am using Century Gothic font in my HTML and then converting it in to PDF. It works perfectly on my mac, but on my Slackware 14.1 server, when I convert the HTMl in to the PDF, the font is not rendered as smoothly as it should be.
I read several ways to include non-standard fonts in the HTML, as #font-face, or adding the entire font in the CSS file as an encoded font and both these methods worked for me in the HTML. The HTML is rendered perfectly in the browser, it's the PDF which is not getting a correct Century Gothic. Any help is highly appreciated.
Thank you
I did some research too and it seems that this is a known bug with qt-webkit.
See the issue documentation here:
https://github.com/wkhtmltopdf/wkhtmltopdf/issues/2193
Sorry to not have better news for you. Maybe just try with a supported font that's close enough to what you like it to look?
I've got yet another problem with Crystal Reports 2008. This time, when I'm exporting to PDF from CR2008 from the company server, a font, Dax-regular, gets blurry. It's not completely illegible, but it is smudged out, like the ink got wet.
Another problem is that certain fonts, which I am sure are not DRM-protected or anything like that, when exported are random gibberish symbols, not readable text. This seems to be a problem with the embedding of fonts in CR.
I believe the smudged fonts could be caused by a fix I had to perform because of the small text bug that others have reported (http://www.arcanadev.com/support/kb/K00000394.aspx).
What can I do to troubleshoot and, if possible, fix this problem?
Thanks!
To my experience I haven't seen anything like that all fonts are properly exported to PDF if you provide any screenshot it would be more helpful.
Your second issue of symbols there are some fonts when you type will provide you symbols may be you are using those....
Sorry if I understood yout issue in a wring way
Following the instruction in this link ( https://github.com/EllisLab/CodeIgniter/wiki/PDF-generation-using-dompdf ), I always encounter an error when opening the pdf file created. The error message is:"Cannot extract embedded font 'TradeGothicLT-CondEighteen'.Some characters may not display or print correctly. " and when i click OK, the pdf displays black background and when i start highlighting the body, it captures the text but text are in black font-color. what should I do to get rid of this error?
There may be something wrong with your font cache, located at dompdf/lib/fonts/dompdf_font_family_cache.php (though the exact file name depends on your release and whether you have loaded fonts). This file tells dompdf what fonts are available for use in the PDF. If this file references a font that isn't actually available you can run into major issues on viewing. You may need to re-load your font files. Take a look at the Unicode how-to for an overview of using embedded fonts. This document hasn't been updated to reflect changes implemented in dompdf 0.6.0 beta 3, but the information is still pertinent.
I'm having troubles figuring out why Chrome and Firefox are rendering some things differently. Below are images of a part of my project as seen in Firefox (top) and Chrome (bottom). MathJax renders everything as the page is loading and once everything has been processed and typeset, it is displayed on the page. So I'm not sure if this is my fault of MathJax's fault. Anyway here are the images...
... if you would notice, the square with black border is different in Chrome, and in a bad way. Any ideas as to why this might be happening? The following is output from Chrome's console...
Resource interpreted as font but transferred with MIME type image/svg+xml. /MathJax/fonts/HTML-CSS/TeX/svg/MathJax_Main-Regular.svg#MathJax_Main-Regular:-1
Resource interpreted as font but transferred with MIME type image/svg+xml. /MathJax/fonts/HTML-CSS/TeX/svg/MathJax_Main-Bold.svg#MathJax_Main-Bold:-1
Resource interpreted as font but transferred with MIME type image/svg+xml. /MathJax/fonts/HTML-CSS/TeX/svg/MathJax_Main-Italic.svg#MathJax_Main-Italic:-1
Resource interpreted as font but transferred with MIME type image/svg+xml. /MathJax/fonts/HTML-CSS/TeX/svg/MathJax_Math-Italic.svg#MathJax_Math-Italic:-1
etc...
The code for rendering the square alone, without all the other fancy stuff, is relatively simple...
<div id="square">
<math xmlns="http://www.w3.org/1998/Math/MathML" display="block">
<mo id="tag0" class="expand">◻</mo>
</math>
</div>
... and then I tell MathJax to render it...
MathJax.Hub.Queue(["Typeset", MathJax.Hub, "square"]);
... and MathJax does its thing (I have no control over the rendering MathJax does). So I don't quite know where the problem is.
I know this is a very strange and very specific question but I'm hoping someone in the Stack Overflow community might have some idea or has dealt with MathJax previously. Hopefully some brainstorming will help resolve this issue.
The box you are seeing Chrome is the "missing character" symbol. The MathJax fonts don't include U+25FB, and so Chrome is showing the missing symbol. It looks like Firefox is finding the character in a different font and using that (or perhaps you have STIX fonts on the machine running Firefox but not the one running Chrome, and MathJax is using that). Browsers differ in their ability to find alternative fonts for symbols that aren't in the MathJax fonts.
In any case, try using U+25A1 instead of U+25FB and see if that works better for you.
Davide
MathML will come to Chrome natively, WebKit has been working on it for some time now:
http://www.webkit.org/projects/mathml/index.html
I guess this question should be marked as a bug for MathJax. Hopefully soon, there would be a native solution.
I do not have a real answer, however rendering differences among browsers are nothing new. I use Firefox, Chrome, Opera, IE (in that order), quite often one of the browsers renders better than the rest. Firefox has some nice debugging plugins, you may try those (Firebug???). Warning: You may spend a lot of effort on this. If you get into troubleshooting CSS, ouch :).