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.
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;
}
I know this is an extremely basic and stupid question, but I seem to be having a genuinely curious problem.
When using what are supposed to be web-safe fonts like Didot, and using
header h1{
font-family: Didot, serif;
font-size: 36px;
}
my browser just displays the standard serif font.
In fact I can't seem to get it to display any web safe font, it will only display either the standard serif or sans-serif font. I know my selector is correct because I CAN change between serif and sans-serif, but I know its not displaying other web-safe fonts because I tried both Arial and Helvetica (which are both definitely web safe) and when I refreshed from one to another there was absolutely no difference in the font displayed.
I'm a complete beginner and I'm using the simplest possible beginner environment, just an html page linking to a css file which I'm opening with my browser (the url shows up as file:///C:/Users/Agent%201/Desktop/Web%20Projects/ResumeSite/index.html if that is at all relevant). I've tried opening it with both chrome and edge, same results on both
Is there something wrong with my css? Or are there limitations when just opening a local html file with my browser?
Sorry if I'm this is a really dumb question, but I really can't find an answer as to why my fonts aren't working, I've tried !important and some other weird solution I found which involves changing the selector to "header h1, header h1 *" and that did nothing.
Thank-you for any help you can provide me!
When using what are supposed to be web-safe fonts like Didot, and using...
Didot is not a "web-safe" font.
Didot is included with macOS, which may lead some web-designers to assume that it's also available on other platforms (like Windows, Linux and Android) or that those platforms have automatically-mapped equivalents (like how many browsers will map Helvetica to Arial), however that is not guaranteed.
Also, just because a typeface is included with an OS does not mean it is licensed to you to use commercially or in a website - you can be sued for publishing an OS-licensed font onto the public web without having your own font-license.
A "web-safe" font is a typeface that is broadly installed and supported by most contemporary browsers without the need for additional downloads or font installations.
Many typefaces are broadly installed, such as Microsoft's Core fonts for the web which are preinstalled on all Windows computers - and many other operating systems such as macOS either come with the same fonts or have very similar equivalents (e.g. Helvetica instead of Arial) which are automatically mapped by the browser.
The only way to determine if a font is "web-safe" is by doing your own leg-work and manually checking to see if all-or-most of your target users' devices have that typeface available. You can check font availability on Wikipedia and other sites:
macOS: https://en.wikipedia.org/wiki/List_of_typefaces_included_with_macOS
Windows: https://en.wikipedia.org/wiki/List_of_typefaces_included_with_Microsoft_Windows
iOS: http://iosfonts.com/
Android: Consult Android's fonts.xml for the minimum set of stock fonts and default fallback mappings (e.g. "Helvetica" goes to "sans-serif").
You might notice that Android's font list is very... short. That's because the base Android OS isn't what ships on most peoples' phones: Google's layer on top of Android, and OEMs (like Samsung, etc) will add their own fonts on top, but I don't know where to get that list from at-present, sorry.
A "web-safe font stack" means that at least one of the fonts listed in a font-family property value can be safely assumed to be available for use, not that all of them are - nor that the first-preferred-font will be available.
And any font-family list can be made "safe" by adding a CSS fallback generic-family name to the end (i.e. specifying the least-preferred font). Those names are specified in the CSS Fonts Module and are:
serif
sans-serif
cursive
fantasy
monospace
In your case, the property font: Didot, serif is "web-safe" because it has the serif generic-family name at the end. Your visitors will only see the Didot font being used if they already have it installed on their computer, phone, tablet, etc.
If you do want to use Didot, then you need to publish it as a WOFF file and add it to your stylesheet with a #font-face rule: https://css-tricks.com/snippets/css/using-font-face/
I recently installed a new arch linux system, using deepin and gnome shell as desktop environment.
Updated entire system on September 17 2019
Using chromium Version 77.0.3865.75 (Official Build) Arch Linux (64-bit) I came upon the following issue:
I have a web app that uses material-design-icons pulled from npm and built with webpack. In the end, this is the final CSS that is rendered (with regards to #font-face):
#font-face {
font-family: Material Icons;
font-style: normal;
font-weight: 400;
src: url(fonts/MaterialIcons-Regular.eot);
src: local("Material Icons"), local("MaterialIcons-Regular"), url(fonts/MaterialIcons-Regular.woff2) format("woff2"), url(fonts/MaterialIcons-Regular.woff) format("woff"), url(fonts/MaterialIcons-Regular.ttf) format("truetype")
}
The result is that the browser does not render the Icons and instead renders another font in its place.
If I remove the line src: local("Material Design Icons") or place it above the other URLs, everything works.
Also, if I install Material Design Icons locally on the machine (i.e. ttf-material-icons-git from aur), it also works and I can see that chromium is rendering from local version.
But, to my understanding, even if the src:local is the last entry, if the font is not installed locally, shouldn't the browser just download from the other URLs?
I have tried refreshing local font cache and even uninstalled
Also, note that the page works perfectly on the system when accessed with firefox (Mozilla Firefox 69.0)
Generally, subsequent valid CSS property re-declaration in same rule set overrides preceding instances of same property.
* {
color: red;
color: blue; /* "wins" */
color: blargh;
}
In your case the last valid src property declaration is src: local("Material Design Icons");, but presumably you (as well as most other folks) do not have locally installed font with this identifier [1]. Since previous src declarations were trashed already, there is no fallback to remote version in effect.
#font-face is a bit special case where -- for historic reasons -- is common to have two src declarations: first without format() for ancient browser that do not understand the latter verbose, what is invalid and thus ignored in their perspective.
You probably want to put the local part in the beginning of that second rule, so that it will be first try in the fallback chain: src: local(..), url(..eot) format("embedded-opentype") /*and so on*/;.
[1] looking at the guide the identifier should be either "Material Icons" or "MaterialIcons-Regular".
So after racking my brain for well over a week with this issue, I finally found the cause and fixed it. I thought I'd post the root problem and solution I encountered here, as it was a very peculiar case.
So to be clear on the problem, it only happens on CHROMIUM in CERTAIN installations running on Linux. It did not happen on Firefox in any of my installations. I was able to reproduce the problem by installing a fresh copy of Arch Linux and the Deepin desktop environment. I did this various times and found that if I chose a different Desktop (i.e. Gnome, Plasma, etc.) the problem did not occur. If however, I installed Gnome or Plasma AFTER having installed Deepin, the problem would persist, even if I removed all Deepin packages.
After much tinkering, I finally found that the problem could be traced to a specific FontConfig configuration. In the installations where the problem occurred, there was a file located at etc/fonts/local.conf with various "match" and "edit" elements. I managed to isolate the exact element that caused the problem. here is a striped down version of the file containing only the element in question. If I place this file in any of my installations, chromium presents the problem.
<?xml version="1.0"?>
<!DOCTYPE fontconfig SYSTEM "fonts.dtd">
<fontconfig>
<match>
<edit mode="prepend" name="family"><string>Noto Sans</string></edit>
</match>
</fontconfig>
Anyway, either removing this file or simply removing the "prepend" element from the file solved the problem for me, but I still don't know if this is a "buggy" configuration or a bug in chromium or a bug in FontConfig.
I am attempting to use the map-icons package which uses the following css to fetch and load a few font files. As far as I can tell, the path (including the ..) is fine.
#font-face {
font-family: 'map-icons';
src:url('../fonts/map-icons.eot');
src:url('../fonts/map-icons.eot#iefix') format('embedded-opentype'),
url('../fonts/map-icons.ttf') format('truetype'),
url('../fonts/map-icons.woff') format('woff'),
url('../fonts/map-icons.svg#map-icons') format('svg');
font-weight: normal;
font-style: normal;
}
https://github.com/scottdejonge/map-icons/blob/master/dist/css/map-icons.css
I'm testing this locally with Django's dev server. I include the css in my html with a standard <link>. Based on the Network tab in the Chrome inspector, the css file is being fetched successfully. However, I do not observe any network requests for any of the fonts (successful or unsuccessful). Likewise, the fonts don't work.
The fact I'm not seeing any attempt to request the fonts makes me think there is something wrong with the css? Also to clarify, the fonts are in the corresponding directory relative to the location of the css file. Though regardless, I would expect requests to be made for the fonts even if it were to incorrect URLs.
EDIT: I'm noticing that if I use the font in some css block i.e. by adding font-family: map-icons; to some css block, both Chrome and Firefox will successfully request map-icons.ttf. Unfortunately, the font still does not work in the context of what the map-icons package is meant to do. But that could be for entirely different reasons. Does this observation make sense and, if so, can someone explain why these two browsers choose to work that way?
I believe the fonts were not being fetched because the font was not being used in any way that would cause the font to be rendered. Thus, my assumption that not seeing any of the fonts fetched in the Chrome network inspector implied that the code responsible for fetching those fonts was buggy, was incorrect. Chrome merely decides not to fetch the font(s) when they are not to be rendered.
One thing to note is that, based on this experience, Chrome will load only one of the fonts specified in the #font-face block. In this particular case, Chrome chose to load the .ttf font.
For more information on how I fixed the actual problem I encountered with this package, see the following GitHub issue:
https://github.com/scottdejonge/map-icons/issues/33
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.