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
Related
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
I am putting together an email template which includes the Montserrat font; however, it seems to render just about everywhere without issue except for gmail via a browser (Firefox/Chrome)!
The font renders as it should in my previews, iPad (mail), and Android (gmail). Has anyone come across this issue or is able to confirm that this font is disallowed via the web client to Gmail?
I have tried both the font-family (as per the Google Font's site instructions) and import methods of including the font with similar results as mentioned above.
Thank you in advance!
Gmail does not work with web fonts like Google fonts. Lack of web font support is an issue with desktop Outlook 2007-2019 as well.
You will need to choose a web safe font as a backup. I created a list of supported fonts:
https://jsfiddle.net/wallyglenn/s94weLqj/
Good luck.
Stackoverflow wants posted code before I could post the link
of fonts that work in Gmail I maintain on JSFiddle.
I felt a list of fonts might be useful in choosing a fallback font.
font-face property will not work in web gmail.. use font-family instead. you can visit below link to check which css property works in mail for email template. hope this helps . thanks
https://www.campaignmonitor.com/css
I've applied Open Sans Font to most of a site I am working on. Specifically to the labels. However I am facing a conundrum here. The site is live and rendering the font as it should, but the section I am working on locally (which uses the exact same files as the one live and the code implemented is the same as well) does not render the Open Sans font in the labels. Instead, the System Default font is being rendered which I believe is Helvetica. The interesting thing here is that Helvetica is not even the System Default (browser)! It's the Bootstrap Default font. So, someone is lying.
Here is a screenshot of an Xray of my label font
And here is a screenshot of my Firebug telling me Open Sans is the active font, and Helvetica (inactive) coming from bootstrap.min.css. Yet, this is the one being rendered.
I'd add code to a JFiddler is you need me to, but I don't think it would be of too much help. But ask, and you shall receive :)
Is there a technique I am not using or I should use? It works in the live version, so I know the code has to work.
Thanks
[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 have a website, which is a internet forum, and in my forum posts, I have the following font:
font-family: 'Segoe UI',Tahoma,Arial,Helvetica,sans-serif;
Now, here's how it looks like in different browsers: (from left: chrome, firefox, IE)
As you can see, chrome is displaying whole different font than the other two. Why? How do I fix that (I want this font to look like the other two)? Also, this is the link to the page I made screenshot of: https://scyk.pl/Forums/Thread/Na%20luzie/8 (look at the post contents)
What is happening is that Google Chrome most likely does not have that font, and is using the fall back fonts instead. To make sure this doesn't happen, you can explicitly load the font using
#font-face
in CSS3, which allows you to explicitly load the fonts by referencing it. You can learn more about using #font-face HERE, where you use src: and get the url of whatever font you are using.
If the font is not that important, however, I recommend not worrying about it and just letting Chrome use the fallback fonts instead.
To do #font-face, the code would be:
#font-face {
font-family:Segoe UI;
src:url(https://github.com/shawnphoffman/shawnphoffman.com/blob/master/Content/fonts/segoe-ui-semilight.woff);
}
You may have to go to the github link and download the raw version of the font, then reference it there.
You have several options but I think you'll find all of them unsatisfactory:
Render the page into an image on the server and send that to the client.
Get the source code for Chrome and replace the font rendering engine with the one used by Firefox.
Oh, btw, it will also look different on Safari (probably a lot different to the other three; Safari is a very sophisticated browser and it will try it's utmost to make a page look good; driving web designers insane in the process is a small price to pay for beauty ;-)).
Rendering text is something that you only have limited control over. Maybe Chrome doesn't find Segoe UI, maybe the font rendering engine can't use the hinting of your font. While not ideal, I suggest not to spend too much time on it.