Does any one know why some of my font families won't render on some mobile devices? Here's a page that demonstrates the fonts:
http://jl.evermight.com/font/
The fonts render properly on desktop chrome browser, ipad and iphone.
But when i view that page on my galaxy note, the Have A Nice Day font renders as something that looks like arial. On my friends nexus 4, Have a nice day works fine, but the universe condense renders as something that looks like arial.
Does anyone know why?
I've attached screenshot of what the fonts should look like
Additional notes
some people claim Have a nice day is not working in Firefox or IE10. For me, the font works on Firefox. I don't have IE10, so unable to verify.
How do I make this font work on my android?
Additional Notes
I had a typing mistake in my link path to my css files. I've corrected it now. But the problem still appears in my droid browser.
Just tried out the link on my phone - HTC 8s, everything seemed to work fine. Below is the screenshot for the same.
ON HTC 8S
ON IE 10
It's possible it's a downloading issue. The fonts listed in your declaration should work across most browsers (just make sure you're not in Opera Mini, it doesn't really support much of anything).
Additionally, Have a Nice Day is loaded through #font-face declarations in the CSS file, but the others appear to be loaded from the JavaScript, which might be part of the issue. Droid Sans is on Android phones by default, so they're likely just pulling them locally, which is why they work across the board on Android. From there, it might be a difference of JavaScript support (if Universe doesn't work, JS isn't turned on, for example).
Another thing that might help is opening up developer tools in a desktop browser that isn't working (in the case of Firefox, you'll want to pick up the Firebug extension). Check the "Net" or "Network" tab and see if your font files are getting downloaded.
If that still doesn't work, try playing around with the order of the font files in the declaration. I've seen browsers take issue with the order.
Also, the Droid Serif fonts are available from Google Web Fonts, which works cross browser with little headache. It might be worth seeing if your other fonts (or something close) are there, too, and just use Google's Web Font Loader to load your fonts.
The problem has been fixed. Apparently there was a bug on myfonts.com that corrupted my font files. I contacted myfonts.com and they corrected the issue right away. Then re-sent me the font files. Now everything works perfectly.
The guys at myfonts.com are amazing. Very good customer + tech support services.
Below is a link to how I do my #fontfaces for cross browser compatibility.
Cross Browser Fontface
Related
I have my custom.css and inside this file I am using this Google Font #import url(https://fonts.googleapis.com/css?family=Montserrat:400,500,600,700); and until yesterday I was working fine in my Ubuntu 16.04 and Firefox version 88.0.
But today when I opened the website, the font color getting light like below.
The strange thing I have noticed is, its not happening with new Firefox versions (like versions above 100) in Ubuntu. Its also working fine in Google Chrome and in other browsers.
Its only happening versions below 100 or at-least in version 88.0 which I have in Ubuntu.
I have also researched and found out this thread https://github.com/vercel/next.js/issues/36986 which suggests me to replace the CSS with something like below which I did.
#import url(https://fonts.googleapis.com/css2?family=Nunito:ital,wght#0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,200;1,300;1,400;1,500;1,700;1,800;1,900&display=optimal);
But here I have noticed that this font name is not the same. I have Montserrat and here in the code it has Nunito. Additionally, when I refreshed the page, my web page menu also became bold. So I believe this is not working fine.
Can someone guide me how can I apply the same font which wont break my bold italic and other options like I already have.
Any help or guidance or support will be highly appreciated.
Thanks
I'm using Google's font Rubik on a website (still work in progress) and it stopped showing any text suddenly!
It seems that even on Google Font website the font isn't working:
https://fonts.google.com/?selection.family=Rubik:400,900&query=rubik
("All their equipment and instruments are alive." isn't showing below Rubik, but if you inspect it, it is in there)
Is anyone else having the same problem?
I'm having this issue using Windows and Chrome, Firefox or Edge.
UPDATE: without changing anything, the font started working again today. I guess whatever problem existed, Google fixed it.
Upon further investigation, it seems their font for "Rubik" is corrupt or otherwise problematic. Conversion to ttf gives the same results. The font can be previewed under Windows, but the behavior in-browser (FF56.0b2) is the same.
Browsers that appear to render it might be doing what mine was, using a system fallback that looks similar.
This is an issue on their end as the problem is with the font file and not their stylesheet as I had originally stated in this answer.
I converted the woff to ttf using Google's woff2 tool, then tried the ttf version locally, without unicode-range and the results are the same. Here is a preview of the truetype version of the font, converted from the woff2 version, in FontForge, if anyone wants to see if the glyph's are in the correct location (note that this version of the font also doesn't work in-browser):
Google Fonts pushed an update with hinting that had a bug for some rendering systems, and rolled back the update within 24 hours.
If you remove the "/" after ".com" and add a space it worked for me. This font was working for me yesterday, so now the only problem is if they fix the path it wont work again. Hope this helps
I know there are a lot of other questions regarding the "jagged" or "pixelated" fonts problem, but here's the weird thing, for me at least..
After building a site locally and testing in Firefox, the font loaded from Google Webfonts looked great. Almost Photoshop quality. It was only after I had tested the site in some other browsers, such as IE, Opera, Chrome and Safari, that when I returned to Firefox the font started to appear jagged.
I'm wondering if when I loaded up the other browser, it changed a setting somewhere on my PC. I have a AMD Advent Monza S150 with Windows 7.
I've also messed around with the ClearType option but still no luck. Can anyone shed any light on this?
More of a shot in the dark, than the real answer, but... one reason that could be that the font you are using on your website is installed on your PC. Google webfonts, and webfonts in general usually have the downside of looking good only with certain font sizes.
I am trying to use the CSS font face property. I've made it chance the font to the right one, however it looks very edgy on the Windows platform. Especially Chrome looks awful.
When using OSX all browsers are just perfect.
How can I avoid these awful looking fonts?
On OSX Chrome:
On Windows Chrome:
The Segoe font is already installed on most Windows PC's. This can cause problems when you are also trying to link it with CSS. Try renaming the font in your CSS so that it has a different name than the built-in Windows font.
Also, Chrome just doesn't render TTF/WOFF fonts very well. You can get around that by prioritizing the SVG font (by putting it higher up in the font list). This will make Chrome select the SVG font (but most other browsers will still use the WOFF font). See here for more information.
For a site we're developing we've been using Lato from Google's WebFonts API. It works perfectly in every browser (even IE), except for one very important case: Firefox 3.6 on Windows XP (haven't tested in Win 7 yet). The font loads and is displayed, but the characters look awful, like antialiasing completely malfunctioned.
My googling has found hits about problems with webfonts in FF4 due to a bug in the browser, but I can't find anything about 3.6. Is there something we can do to fix this?
The reason Google's font looks like that has to do with a setting in the font's GASP table. This table toggles 'grayscale' and 'gridfitting' for ranges of sizes. I looked at the font Google is sending to your site and for sizes 0-13 grayscale is turned on. 14-18 is set for gridfitting, which results in black and white rendering. Then 19+ is set for both grayscale and gridfitting. I bet if you changed the size of the text to 13px, it would suddenly turn antialiased.
As for Font Squirrel fonts, we set the GASP table to render grayscale+gridfitting for all sizes above 4px.
There seems to be a difference between Google webfonts and the same font downloaded from Font Squirrel, see this (unrelated...) question.
So I would try and use the version they have at Font Squirrel to see if that solves the problem.