So recently I posted a a question about how my fonts in my website cannot go lighter than font weight 600. Here is the question Open Sans font weight cannot go lighter
So I was able to solve it by just importing the google font along with the desired font-weight. I have now thinner fonts(font-weight:300).
The problem is, I found out that when I deployed to app to a live server, the font weights that I set doesn't work when I view the site in my own computer. On some computers it works fine, the thinner font weights are working but there are other computers too that have the same issue.
I'm not sure what is happening here. I'm thinking of the fonts installed in my local machine has something to do with this, but when I test the site in localhost the font-weights are correct and displays correctly.
as far as I know most browsers don’t fully support the numerical values for font-weight . also Google font isn't calibrated to carry all of the weights you want with it. Some font problems can be fixed by deleting and reinstalling the font you are using on your local machine.
Checkout the codepen at the end of this package Readme, it has an Open Sans example with many weights. What do you see?
It has a lot of examples and explanation there, maybe you see something you missed.
https://github.com/adriano-tirloni/google-fonts-css2
Related
I'm having this annoying problem, when I visit certain sites, are displayed wrong fonts, it's like something is overwriting my fonts. Checking in the console, I see that in the displayed fonts section, there is a font that i have locally installed on my pc, but i'm sure that isn't the right font to display.
Screenshot of the problem
I've checked all default font options on chrome settings and also if is a plugin doing this... but I can't find a solution. I also tried to temporary disable local fonts with the dev-console and it solves the problem, I don't really know why uses this fonts instead the correct ones. Any ideas ?
For all of my chromium based browsers, I'm getting a very bad font within Oryx for ErgoDox. If you're not familiar with the tool, you can see my keyboard layout here.
Update: I'm seeing in "Rendered Fonts" a strange font I don't recognize. Now I'm trying to work out how this is even happening, and why it's all my chromium browsers. See bottom photo below.
Update 2: The current theory is that my system is using the first "sans-serif" font it finds because of a syntax error in ErgoDox's CSS for the font-family; "Lato" should be enclosed in single quotes ' and it is not. This is causing my system to fall back to the first sans-serif font it finds, which is normally something more useful like "Arial", but is pix PixelFJVerdana12pt in my case. I've installed both "Lato" and "LatoLatin" and it is still rendering this awful font.
Update 3: Uninstalling "pix PixelFJVerdana12pt" fixed the issue ?? Now I'm looking into that font to figure out what the heck that even is? Now it renders Lato from the web? I'm putting an updated screenshot at the bottom with it fixed.
Here's what I've discovered and tried:
The site uses "Lato,sans-serif;" for all its fonts - loaded from woff2/woff files hosted on their site.
This problem exists for all of my chromium browsers: Chrome, Brave, Vivaldi, Edge.
The site loads just fine in chromium (Chrome) for a friend of mine.
The site loads just fine for me on my mobile phone.
Extensive searching online yields no reports of anyone else having this issue.
The site displays fine in Firefox.
I've installed Lato to my machine directly from Google Fonts.
I've downloaded the woff2/woff files from ErgoDox and opened them using a woff viewer online; they display correctly there.
Reloading the site with cache disabled does not work.
There are no console, or network errors (in developer tools).
The only extensions I have installed in this instance of chromium are: 1Password, Adobe Acrobat and Application Launcher for Drive (Google).
I run Windows Defender and Malwarebytes Enterprise.
I highly suspect this issue is local to me, and not a more global issue.
Anyone else with this issue? Any suggestions?
Problem demonstration:
Weird rendered font:
After uninstalling "pix PixelFJVerdana12pt":
The solution to the problem was to uninstall the "pix PixelFJVerdana12pt" font. I have no idea what is wrong with it, but it's now working as expected.
Those of you who get your kicks out of IT troubleshooting and mysteries, this is a good one for you to try to figure out! I'd still love to understand why this was happening - so strange.
I think I've figured it out and fixed it on my system - the font pix PixelFJVerdana12pt/PixelFJVerdana12pt by Flashjunior.ch has a TTF UniqueID of 0, which must cause Windows's font handling to treat it differently. I changed this to the font's name in FontForge, and replaced it on my system - after a restart of Chrome, the fonts in Oryx and gameatlas.com seem to be how they were intended to look.
I am using this great font from Fontsquirrel, Munro. (http://www.fontsquirrel.com/fonts/munro)
I wanted to use this font in a webpage of mine. I've put the .ttf file in a map named 'fonts' and referred to it in CSS.
nav a{
background:#9cf2e6;
display:inline-block;
color:#0;
text-decoration:none;
font-size:15px;
font-family:'Munro';
margin:13px 3%;
padding:7px 2%;
}
Then I noticed something. The O's in my webpage are filled. As you can see it shouldn't do this, because it did not do so in Photoshop or the webpage from Fontsquirrel. Also I tried to modify the font in Glyphs but there seems to be nothing wrong with it there.
My question: how will I undo the filled letters in this font? Is this a problem because it ain't a webfont from Typekit or Google fonts?
Thank you so much for all the help I can get.
I'm unable to reproduce this on Windows 7 (Chrome, Firefox, IE) with Munro installed locally. The letters display just fine (see image below). And I think that's the bigger issue: fonts not made for the web are likely to be rendered very differently across browsers and platforms (if at all). If you want to make sure these buttons look the same for all your users, stick to the images you created with Photoshop (and perhaps save them as PNG-8 with transparency rather than PNG-24 to shave off some kilobytes).
Technically, you can turn any TTF file into a web font, using FontSquirrel's Webfont Generator, for example. The font's license has to allow this, of course, because you'd essentially be redistributing the font. Just placing the TTF file in a /fonts/ folder and using font-family: Munro;, however, is not going to cut it, and only works for you because you have previously installed the font on your computer.
If I have, say, the Ubuntu font installed on my computer and I visit a webpage that references it in its stylesheet, my browser will not bother downloading it from the webserver, but instead loads it from my hard drive (or memory), which saves bandwidth and is much faster. I've also found that having a font installed locally can actually make it render differently than when it's loaded as a web font (e.g. WOFF).
So yes, it probably is a problem because this particular font is not very web-friendly, but even with web-friendly fonts, like those available through TypeKit or Google Fonts, you can still run into rendering differences (most noticeably between Windows and Mac). While it may be a fun exercise to try and recreate the images using just CSS, you're probably better off saving these buttons as images, or using a font that is web-friendly. Something from the Monospace category in Google Fonts, perhaps?
http://i.stack.imgur.com/9SuMr.png (Windows 7, Chrome)
[Problem] -- I am having a problem with web fonts rendering on a specific computer, other computers in my house render the text fine (same OS and browser versions). They look really bad and pix-elated I know all about differences between how browsers render things differently but its not supposed to look this bad.
[What I've Tried] -- I tried prioritizing the .svg in my CSS first on my site to fix it on Google Chrome but it did not help. I installed Firefox and discovered it too does not render the Open Sans font correctly either. I also have tried clearing my cache (I have a cache clearing plugin) and opening in a incognito window thinking a chrome extension was causing a problem but no difference. From the screen shot it appears Chrome at least renders the larger "Open Sans Condensed" but the smaller text is pixelated. Its weird a fresh install of FF also has the same problem as Chrome. Also tried downloading the font files from Google Fonts and installing them locally, no difference.
IE 11 renders the text correctly. I need trouble shooting ideas..
The screen shot below is from the official Google Fonts website located here http://www.google.com/fonts/specimen/Open+Sans#pairings so it should rule out any bad coding on my own page. The open sans font on fontsquirrel loads correctly and its not pix-elated.
Here is what I see and I don't think the fonts should look that pixelated... http://imgur.com/hwvupBq sorry too low rep to post images :(
Each browser loads the fonts using different formats. Usually you would use font-face with the four different types, EOT, WOFF, SVG AND TTF. You can use the Font Squirrel site to load your font and spit out the four different versions. Also, take a look at Google font embedding which takes care of the the work (although they will look slightly different in different browsers)
The problem ended up being that my Windows 7 machine did not have cleartype enabled. See this post to see how to enable it http://www.howtogeek.com/howto/28790/tweak-cleartype-in-windows-7/
I am not sure what happened to my css font-family that I was using on my website. Until yesterday it was working on. Then this morning it stopped working on Chrome and then later on FireFox & Safari (Mac).
Weird thing is that it looks fine on one of my teammates computer (Linux) but also looks bad on a friend's Mac computer. No idea what happened. When I inspect the element I can see the CSS font-family attribute but it is crossed out, as if the font did not load.
This is how I have my fonts added on my CSS:
#import url(http://fonts.googleapis.com/css?family=Rokkitt:400,700|Open+Sans:600italic,400,600,700|Helvetica+Neue:400,500,700);
This is how it looks now and how it should look.
Completely stuck, no idea what happened.
Remove the part |Helvetica+Neue:400,500,700.
Google Web Fonts do not contain Helvetica Neue. It is a commercial font, not available for free, and probably not available as a web font for a fee either.
When you have a font that does not exist at Google Web Fonts in your requests, the Google server responds with 403 Forbidden and does not send any font. You can see this if you use the developer tools (F12) and look at the Network section when loading your page.
When you split your request to three requests, one for each font family, the other requests are successful. But it is more efficient to do have the two font families in one request and drop Helvetica Neue (or replace it with some font that Google actually has).
Ok, got it to work. Not sure what happened. All I did is change the line:
#import url(http://fonts.googleapis.com/css?family=Rokkitt:400,700|Open+Sans:600italic,400,600,700|Helvetica+Neue:400,500,700);
to:
#import url(http://fonts.googleapis.com/css?family=Rokkitt:400,700);
#import url(http://fonts.googleapis.com/css?family=Open+Sans:600italic,400,600,700);
#import url(http://fonts.googleapis.com/css?family=Helvetica+Neue:400,500,700);
Helvetica Neue is in fact available at Google Fonts:
http://fonts.googleapis.com/css?family=Helvetica+Neue