So I am using the fonts this way
<link href='http://fonts.googleapis.com/css?family=Fira+Sans:700|Open+Sans&text=1234567890ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz%20' rel='stylesheet' type='text/css' />
<style>h1, h2, h3 {font-family: 'Fira Sans', sans-serif; line-height:1.125em} </style>
This is the result...
I am completely confused as how this can even happen? What am I doing wrong. The issue seems only on the home computer. Rest everywhere I checked its fine.
Home PC: Firefox, Windows 7 (In chrome the fonts are not displaying at all, its blank)
Try using Mozilla's CDN instead of Google's; the latter seems to be buggy with regards to the Fira Sans font.
Replace your googleapis.com link with this one and it should work:
<link href='https://code.cdn.mozilla.net/fonts/fira.css' rel='stylesheet' type='text/css' />
You might have to still use Google's CDN for Open Sans, in addition to Mozilla's for Fira Sans, but Open Sans doesn't seem to have this issue as far as I am aware of.
Do you have any custom settings in your GRAPHICS driver config? E.g. is Anisotropic Filtering, Antialiasing / etc. turned on? Firefox tends to pass some of those optimizations through, with bad results :-/
Try turning all of those settings to "Application-controlled" / auto / default whatever and see if that makes a difference.
I was having this issue. The cause was a misconfiguration of the time and date information in my computer. Once I adjusted that, google fonts started to work fine.
Related
I'm using Heebo Google fonts and commas and apostrophes appearing strangely in my HTML. As far as I know it only appears on desktop and not mobile.
Heebo is imported like this:
<link href="https://fonts.googleapis.com/css?family=Heebo:400,500,700,800|Fira+Sans:600" rel="stylesheet">
https://culturestride.com/
Fixed a few hours ago in the Google Fonts API. No changes need to be made.
I managed to fix this by using the github version. I converted them to the Webfont versions using https://transfonter.org/. I added a font cache (OMGF Wordpress Plugin), disabled Google Fonts (disable google fonts) on my Wordpress, then replaced these fonts (through cpanel). I know this is a temporary fix but it works. Working site: https://littlethiings.com. If someone, else finds a related fix please do update this forum. I created a css format for the font, you can call the included stylesheet and your font should work as intended (remove google font first). Link (scroll to bottom). Thanks!
UPDATE: The rollback has been completed. You can switch back to the google fonts again.
The cheapest solution to the problem
You can include all characters in Heebo font but not the ,
Use this link tag for your font. I have included all characters of keyboard in it but not including those chars who are not working properly. As a result of which , will work in normal way and it does not look ugly.
<link href="https://fonts.googleapis.com/css? family=Heebo:400,500,700,800|Fira+Sans:600&text=ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz?.1234567890[]';.()/\!##$%^&*-=+_{}:|\.ABCDEFGHIJKLMNOPQRSTUVWXYZ*~\>" rel="stylesheet">
I had the same error from today in my website and i guess is a Google Font error.
Basically, what you need to do is to download an old version of the font, for example https://www.fontsquirrel.com/fonts/heebo).
Then call again the font inside your local .css and not anymore through Google Api.
#font-face {
font-family: 'Heebo';
src: url('Heebo-Regular.eot');
src: url('Heebo-Regular.eot?#iefix') format('embedded-opentype'),
url('Heebo-Regular.woff') format('woff'),
url('Heebo-Regular.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
I am developing a landing page for a website at:
https://emotional-wellbeing.com/
The page renders fine in Chrome, but in Firefox the Open Sans Condensed fonts do not show at all. I have tried several changes from this forum, but none have helped.
Google fonts include:
<link rel="preload" href="https://fonts.googleapis.com/css?family=Open+Sans:400,700|Open+Sans+Condensed:700" as="style" onload="this.rel='stylesheet'"/>
The page is Open Sans font, except for:
<div class="sectionmainheadline"><h1 style="font-family: 'Open Sans Condensed', sans-serif; font-weight:700; font-stretch: condensed;">"Discover How You Can <span style='color: #3a9921;'>Melt Away</span> Away Your Stress & <span style='color: #3a9921;'>Overcome </span>Your Anxiety,<br/><span class='underline'>In As Little As 5 Minutes From Now</span>"</h1></div>
I am using Bootstrap 4.
You can see how it looks on Chrome here:
But on Firefox the red circled area does not look Open Sans Italic, and the blue circled area is god knows what font!:
How can I get these circled areas looking like Chrome versions? I am out of ideas.
Looks like this
<link rel="preload" […] as="style" onload="this.rel='stylesheet'"/>
does not work as intended in FF to begin with. As soon as I change the rel to stylesheet manually in inspector, the mentioned parts show up in the desired font fine.
Since I am not even seeing a request for the stylesheet URL before that, I would assume that it is not the onload part that is going wrong here, but that FF does not want to preload stylesheets this way in general yet(?).
I'm trying to use a Google font on my website in different weights. Here's the code I'm using:
<link href="//fonts.googleapis.com/css?family=Roboto:100,300,500" rel="stylesheet">
Everything works fine in Chrome and Safari. But in IE, everything looks bold, no matter what font-weight I set an element to have.
I have found one work around. If I load each font-weight individually (with the code below), everything works in IE.
<link href="//fonts.googleapis.com/css?family=Roboto:100" rel="stylesheet">
<link href="//fonts.googleapis.com/css?family=Roboto:300" rel="stylesheet">
<link href="//fonts.googleapis.com/css?family=Roboto:500" rel="stylesheet">
That works, but it's inefficient. Anyone have a better solution?
Thanks!
Try putting the proper google fonts suggested line:
<link href='https://fonts.googleapis.com/css?family=Roboto:100,300,500' rel='stylesheet' type='text/css'>
Or put the fonts into your css file:
#import url(https://fonts.googleapis.com/css?family=Roboto:100,300,500);
Don't know what else could help, sorry.
It turns out the issue was that IE was set to load intranet sites in compatibility mode. Since the dev environment is on the local network (and thus an intranet site), IE was switching into compatibility mode without my knowledge. Turning that setting off fixed the issue
Font looks different in different browsers. How to fix?
Font in FireFox,
Font in IE
I don't see any difference. I tried having a separate style sheet
<!--[if gt IE 6]>
<link rel="stylesheet" type="text/css" media="screen" href="css/fontsie.css">
<![endif]-->
.
I also linked <link rel="stylesheet" type="text/css" href="fonts.googleapis.com/css?family=sans-serif">;.
Here is my code http://jsfiddle.net/priyaa2002/FfFwe/5
Well, obviously they're not the same font. Most likely, you're using a font that's available in Firefox but not available in IE. Can you give us any hints, like what the HTML is like?
Also, check what the default font settings are in both browsers. The Firefox one looks like a special font (taller and lighter than, say, Times Roman) and the other font is a barely serifed font (sort of sans serif with some swashes) like Ultima.
Update
Okay, I've got it. Your font-family is
font-family:Verdana, Geneva, sans-serif;
Your IE doesn't have either Verdana or Geneva (I think your firefox is getting Geneva) and so defaulting to sans-serif. If you really want them to all look the same, consider going to link Google fonts so your page will load fonts for you from Google's network.
I just fiddled that to
font-family:Verdana, Geneva, Times, sans-serif;
and it looks better.
Fonts will always render slightly different in different browsers, there isn't any way of getting around that unless you use images or a javascript solution. One popular solution is typeface.js.
I'd recommend reading up on typeface and doing some research into other solutions and try one.
Link to typeface.js:
http://typeface.neocracy.org/
Good luck!
Matti
I'm trying to use this font on my web.
It's in Lithuanian language, but it's not the point, the point is, that on google fonts previewer I can see characters beautifully, but on my site some specific symbols gets some nasty look.
Maybe anyone knows how can I solve this, I say, issue?
P.S. Or recommend me some other standard very light font which I could use ...
I had the same problem with 'Open Sans' font, and spent 3 hours trying to fix this, until I discovered the solution.
Try specifying the subset that matches the glyphs for your language, like in my case:
from this
<link href='//fonts.googleapis.com/css?family=Open+Sans:300,400,700' rel='stylesheet' type='text/css'>
to
<link href='http://fonts.googleapis.com/css?family=Open+Sans:300,400,700&subset=latin,latin-ext' rel='stylesheet' type='text/css'>
See if that fixes your problem. Obviously make sure you check if the font used supports extra subsets. Don't forget they also support Cyrillic and Cyrillic Extended.
Cheers,
Michael.
Those glyphs are not in the font. The standard fallback font of serif should be making it obvious; here’s what I see (using a pangram from Wikipedia):
If you download the font and look inside (using Font Book on Mac, or something like FontForge), you can see which glyphs are present or absent. To fix this, I would enter the characters you need into the previewer.
A quick selection of sans-serif fonts which contain the glyphs you need:
Museo Sans whose 500 weight may be used freely online.
Aller, which may require a license.
DejaVu Sans and Droid Sans, which many users will have installed.
Helvetica, Geneva, and FreeSans.
Trebuchet MS, Verdana, Calibri, Candara, and Arial, which almost all users will have installed.
Calibri appears to be a decent match for Lato, so you might use font-family: Calibri, sans-serif; (without embedding anything at all).