I’m loading a font using #font-face on my Website. Everything is working well on Windows but apparently not so on Macs. On Macs the font renders super blurry.
I don’t have access to a Mac myself, but I’ve got several colleagues to check for me and send me a screenshot. I’m attaching screenshots from both operating systems below.
This is the code I’m using to load the font:
#font-face {
font-family: HelveticaNeue;
src: url('//wasawards.com/wp-content/themes/wasawards/fonts/HelveticaNeue-BlackCond.ttf'),
}
Any ideas what might be happening or what I'm doing wrong?
The articles below tell why and how to resolve the issue:
https://discussions.apple.com/thread/1347149?start=0&tstart=0
http://www.creativebloq.com/computer-arts/helvetica-wrong-choice-mac-os-81412755
You may need to adjust your font-smoothing settings for certain fonts, or it could be your font is not terribly well constructed and Macs aren't handling that as you would like.
https://developer.mozilla.org/en-US/docs/Web/CSS/font-smooth
Related
Recently had a customer send in a ticket complaining that their font has changed (within the week or so). The font on the site has not changed in probably a decade. What I suspect is that perhaps a recent windows up that times in line with the change is effecting the font he sees, or, more likely, a setting changed on his end.
the font we use
font-family: "Helvetica Neue",Helvetica,Arial,sans-serif
It is my understanding that Helvetica Neue will likely get replaced by something else on windows since, just from googling, I find that font is not included in windows.
My question is, is there any way I can help debug this on his end to figure out exactly what is going on? It does make the site difficult to read for this user and I would like to fix it, and also know for sure what I am talking about. I usually try very hard not to just reply with, "looks good on my machine". Inspecting it shows the same font family as what I posted above.
None of the font options in that css appear to be what is showing.
The one distinguishing trait I can see in the font is the letters de overlap or touch.
This is for web content, the browsers mentioned where most recent Chrome, which I also tested on (verified exact same version numbers) and did not have the issue, and Edge which I do not have.
If you can't access their computer, it's going to be hard to pinpoint the exact cause. Windows font substitution is the normal culprit in this situation:
As stated here:
https://office-watch.com/2021/windows-substituting-arial-font-for-helvetica/
"Windows is setup to use Arial whenever it sees a reference to ‘Helvetica’. This happens at the Windows level and doesn’t just apply to Microsoft Office. Most web browsers get the same thing – web pages that ask for ‘Helvetica’ to display in web page will get the Arial font instead. It drives web designers crazy, especially since CSS has a way to choose from a family of preferred fonts.
Way down in the bowels of the Windows Registry is HCLM\SOFTWARE\Microsoft\Windows\NTCurrentVersion\FontSubstitutes which lists the substitutions."
Additionally, if you run a comparison of arial vs helvetica neue...using the word video you mentioned, you get this:
Notice the difference in kerning (separation between letters/characters) between characters 'd' and 'e'. Arial appears 'clumped' when compared to Helvetica Neue.
I have no reputable source to provide, but this exact situation has happened to me before. It was caused by me installing a faulty font of a similar name.
It was hell to read most websites and I had to get a chrome extension to change everything to Arial to be readable. Ask them if they're having this problem on other websites as well then tell them to delete the "Helvetica Neue" font file on their computer (Mine was named Helvatica Neue56878 if it helps). This solved the problem for me.
How to debug: Check whether the specific computer have the Helvetica font installed. You can do this by going to the Fonts settings of windows. To open Font Settings just open windows search and type Font:
Font Settings will show you Available Fonts that are installed in your computer. Type Helvetica in the search bar and see if Helvetica font is installed:
If it's not, you can go and download and install the font on that computer and the problem would be solved.
CSS solution: To avoid this problem from happening in the future, you can include the font's .ttf file in your project and use #font-face to set it as a font on your project.
#font-face {
font-family: "digital-7";
font-style: normal;
src: url("~/assets/fonts/digital-7.ttf");
}
You can use it like so:
.container{
font-family: "digital-7";
font-size: 4em;
color: black;
}
3 days ago out of nowhere, I noticed that some sites I've built before using "Open sans" font from Google fonts as the main font are looking strange, choppy and pixelated on Chrome.
I've tried several fixes, going from adjusting the ClearType on Windows to disabling flags (accelerated 2d canvas) and disabling hardware acceleration on Chrome, pretty much tried everything I could find on the internet, and nothing works.
I also tried removing "Open sans" from my Windows font folder, but the font still looks pixelated on my sites. It was fine in Photoshop before I removed it.
This is a screenshot of what I am currently seeing.
open sans strange behavior
The p tag is using a simple CSS for testing
font-family: 'Open sans';
font-size: 12px; / 20px (on the bellow paragraph)
font-weight: 700; / 400 (on the bellow paragraph)
-webkit-font-smoothing: antialiased;
On the style, I have the default #import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght#0,300;0,400;0,500;0,600;0,700;0,800;1,300;1,400;1,500;1,600;1,700;1,800&display=swap'); from Gooogle fonts.
Can anyone shed a light? Any help is appreciated. I don't really want to format my computer just because of this damn buggy font. Also tested on Edge and Opera GX, and it happens on them as well.
You should be sure if it's open sans. You can check it with whatfont plugin
I've also run into the same issue using Google Fonts' Open Sans, both via the #import method and the <link> method. Tested this against Brave (Version 1.30.89 Chromium: 94.0.4606.81), Chrome (94.0.4606.71), and Firefox (93.0). It exhibits this graininess on the fonts.google.com demo site at sizes like 18-20px, but at 16px or 21px the issue isn't present.
Interestingly, Adobe Fonts' version of Open Sans doesn't exhibit this issue, and is clear and antialiased at all sizes. I swapped my Google implementation with Adobe's <link> implementation instead and encountered the same issue.
However, inspecting Adobe's demo revealed they've also added a CSS property: font-feature-settings: 'calt', 'clig', 'kern', 'liga', 'locl', 'rlig';. These are OpenType features, and adding this to my styles seems to resolve the issue, but only for the Adobe implementation; it did not resolve the issue with Google's version. Perhaps Google's version of Open Sans lacks these additional features.
I had a similar problem, viz. Open Sans were looking jittery on our website (exactly as shown in the screenshot)
The problem was (kind of) solved when I used Adobe's Open-Sans version, as suggested in the comments.
Finally, I discovered that in our CSS we were using a font-weight (300) that we weren't importing from google fonts.
When added, everything worked smoothly, so we're back to Google Fonts.
My website has the following base font:
body {
font:300 16px/1.5 Ubuntu,sans-serif;
...
}
The font is loaded via Google Fonts:
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Ubuntu:300,300i,700,700i&subset=greek,greek-ext">
All is expected font-wise in most browsers. However, on Chrome on Linux, I'm seeing the base font displayed with what appears to be font weight 500 instead of 300. The screenshot shows what I'm talking about. The normal text is too heavy. The italic text is displayed at the correct weight (and created using unstyled <em> tags). It also shows that Chrome understands that it's supposed to be using 300 weight.
This issue doesn't appear in Chrome on Windows or MacOS--only Linux. In addition, I've seen it in an old version of Chrome (48.0.2564.116) as well as a current Chromium (70.0.3538.67). I have no issues with Firefox, Edge, or Opera on any OS I've tested. My Linux machine is running Ubuntu 16.04. In addition, Chrome renders the Ubuntu font correctly at all weights on fonts.google.com.
Any ideas what may be going on?
This is due to a bug in Linux (possibly just Ubuntu).
How I solved it: The Googlefonts url fetches a plain text of css font-face rules (you can see that if you just call it from the browser). They contain the srcs where to look for the fonts in prioritized order. Googlefonts looks for local fonts first and then if they don't exist fetches them from their remote locations:
#font-face {
font-family: 'Ubuntu';
font-style: normal;
font-weight: 300;
src: local('Ubuntu Light'), local('Ubuntu-Light'), url(https://fonts.gstatic.com/s/ubuntu/v13/4iCv6KVjbNBYlgoC1CzjsGyN.woff2) format('woff2');
unicode-range: U+0000-00FF, ...
}
This is generally a good idea because fetching fonts that are already installed on the system is unnecessary and slows down page loading. However, there is a known bug in Ubuntu that causes the wrong installed fonts to be loaded: https://bugs.launchpad.net/ubuntu/+source/fonts-ubuntu/+bug/1512111 The font names on Googlefonts are actually correct, but for some reason the OS does not process them correctly. So, there is no way for Google to fix that on their side.
My solution is to just remove the local srcs in order to immediately fetch the fonts from remote. (I actually wonder why Google doesn't offer a "skip local fonts" option by default, maybe they don't want to waste their resources.) In that case it probably doesn't even matter performance wise because all other systems besides Ubuntu don't have this as a local font anyways.
Here's how I skip local fonts using Javascript:
fetch('https://fonts.googleapis.com/css?family=Ubuntu:300,400,500,700')
// get browser/OS specific googlefont font-face file and convert to string to make adjustments
.then(res => res.text())
.then(googleFonts => {
// remove "local" src locations to force using remote (or browser-cached) fonts (no locally installed system fonts)
googleFonts = googleFonts.replace(/local(.*),\s/g, '')
Note: It's important to not just copy the css from when you look at it in the browser because it varies depending on browser/OS - which is the whole point of Googlefonts.
Note: I'm not sure how to use this in HTML, but considering the JS generates plain text it should be easy to figure it out with css's #import from file.
I have created a website based on Grails web framework that uses Groovy.
For some reason I'm not able to get the fonts to load properly.
I'm using: font-family: "Avenir Next Ultra Light","Avenir Next";
On my Mac, the font loads perfectly using Safari and Chrome but not on Firefox. On other systems I've noticed that the font doesn't load at all.
I understand that it's a paid font but just not sure what to do to get the font incorporated into the site properly.
Any advice would be appreciated!
Store the font file somewhere on the server.
#font-face {
font-family: NAME;
src: url('/FILEPATH/FILENAME.ttf');
}
p {
font-family: NAME;
}
Browser Support: http://www.w3schools.com/cssref/css3_pr_font-face_rule.asp
EDIT: And, as Alex K. said, make sure you have a license if it's a commercial font.
Can't speak for FireFox but a more important fact is that the font must exist in an appropriate format on all machines viewing the page. If the font does not exist as an installed font it must be embedded in the page, something you need a license for if its a commercial font.
I would suggest browsing for something similar and using the boilerplate from https://www.google.com/fonts.
I´ve finally continued work on a hobby-project of mine, after months. I had some computer problems at the beginning of the year, had to do a new Windows install, lost the DB, but could retrieve the scripts. As far as I know, everything is exactly the same as before, except for the absolute urls. I´m working purely on localhost. I´m sure everything was working fine in all major browsers before I stopped working on it, unless my memory fails me. Trying to get it to work, I simplified the code / filename:
#font-face
{
font-family: "cabin" ;
src: url("http://localhost/hrhr/fonts/cabin.ttf");
}
*
{
margin: 0px;
padding: 0px;
border: 0px;
font-family: "cabin";
}
Some remarks:
As said, it does not work in Chrome (33), nor does it work in Opera (20).
It does work in Internet Explorer (11). It already worked without simplifying the code and file name.
As said, I´m pretty sure everything was working fine a few months ago, and nothing has changed apart from absolute urls, and the browser versions.
As suggested by an anwser from a similar question, I´ve tried adding the format, this didn´t help.
I´ve tried variations on quotes.
It generally doesn´t show up in Chrome developer tools under resources. Strangely sometimes it does (after trying variations on the code), and when that happens, it displays the name right, but the example font is wrong (presumably Times New Roman).
I´ve tried copying the font file in other folders and using relative urls.
It displays fine if I remove the #font-face rule, install the font, and just use the local reference, and it also works if I use a Google webfont reference.
I think I´m grossly overlooking something, but Googling didn´t help me yet, and I find it strange IE has no problems whatsoever with my code. Thanks in advance.
Edit:
The font can be found here:
http://www.impallari.com/cabin
Edit 2:
Thanks to Dima´s anwser, I´ve solved the problem, but I´m no closer to understanding it.
I used the fonts and script the site provided me, like I said, that worked, then step by step, I removed elements so it resembled the original situation more and more, until it stopped working again. So basically, I can get it to work with my script and the "converted" ttf file, so the problem seems to be inherent to the original ttf file itself. The script, file paths or cross browser compatibility aren´t the problem. Once converted, Chrome had no issues with it. But I have no idea what the technical difference is.
Tomorrow I´ll see if I can find a font viewer to see if I can find the difference. I also may mail the creator of the font (asking if he´s aware of problems with it), and I´d like to know if other people have issues with the font "as is", so without converting it. Unless someone gives me a technical explanation, I´ll accept Dima´s anwser and will just learn to "convert" the font.
try using it like this:
#font-face {
font-family: 'Cabin';
src: url("/fonts/cabin.eot");
src: url("/fonts/cabin.eot?#iefix") format("embedded-opentype"), url("/portals/0/fonts/cabin.woff") format("woff"), url("/fonts/cabin.ttf") format("truetype"), url("/fonts/cabin.svg#cabin") format("svg");
font-weight: normal;
font-style: normal;
}
this will make sure that all browsers are covered... your best bet is to upload .ttf font to web font generator like this one or this one, it will then generate the web font in different formats and you'll be able to download it... it will also include the CSS for it which will be similar to the one I showed above
EDIT: to answer your question about why that is, there is no right or wrong answer, that's just the way it is. Different browsers support different font formats. You can read about some of it here
You can even use #import url('fonts/cabin.ttf');
And to use it, open your TTF File, and see the name of the font, if it says Cabin, then, font-family: 'Cabin';