I'm having an issue with a script font called Thirsty Script Bold that I'm using on my site. The letter spacing appears to be correct for some letters, but not for others. I haven't even touched the letter spacing though. You can see an example of it here:
http://oi40.tinypic.com/2wpikgw.jpg. As you can see, the end of the "e" doesnt fully merge with the "b" and the "b" is too far right to merge with the "s".
I have tried messing with letter spacing, but it just seems to worsen the problem.
Here's my css for the page-
p.websites{
font-family: ThirstyScriptBold;
font-size: 80px;
text-align: center;
margin:0 auto;
}
Here's my HTML for the page-
<p class="websites">Websites</p>
Here's my css for fontface-
#font-face {font-family: 'ThirstyScriptBold';src: url('ThirstyScriptBold.eot');src: url('ThirstyScriptBold.eot?#iefix') format('embedded-opentype'),url('ThirstyScriptBold.woff') format('woff'),url('ThirstyScriptBold.ttf') format('truetype');}
This looks like a design flaw in the font, but it may actually depend on lack of kerning. Most browsers do not apply kerning by default, though Firefox does. So you could first try whether adding the following helps:
p.websites {
-webkit-font-feature-settings: "kern";
-moz-font-feature-settings: "kern";
font-feature-settings: "kern";
}
It is also possible that the software used to generate the web font versions destroyed the kerning table; this often happens. I would expect however that the Webfont package sold by fonts.com contains the WOFF, EOT, TTF, and SVG versions with kerning and other OpenType features properly included.
Unfortunately. I believe that is how the font is displayed. I recommend using another font that is similar, but works. You can find one for free at: http://www.google.com/fonts/
I ran into the same problem using the Thirsty Script web font. The foundry (Yellow Design Studio) stripped of all the OpenType features from the web fonts. This seems to have removed the kerning data.
"All OpenType features and all extended glyphs have been removed."
I solved the issue by using the Font Squirrel web font generator to make a new set of web fonts.
If you define an incorrect behavior, what you really need to do is notify the author (or vendor) of the font about the problem. On first, after fixing, you'll have a correct version of the font. On second, this will help other users of this font avoid the same problem in a future.
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/
My IDE inspects my CSS files, and complains if I put a font-family rule which does not have a generic fallback. In general, I have to agree with my IDE, and I will happily add the font callback.
Example:
.selector {
font-family: Arial; /* IDE complains. */
font-family: Arial, sans-serif; /* IDE is happy. */
}
However, sometime the font-family is an icon font (I think fontawesome is one of those), and a fallback does not really make sense. Or does it?
.my-icon {
font-family: 'my-icon-font'; /* IDE complains. */
font-family: 'my-icon-font', serif; /* IDE is happy, but it does not make sense. */
}
Question
Could there be any sensible fallback that would make sense to append to a font-family rule with an icon font?
Additional motivation
In my case, it is mainly my IDE that is nudging me to add a generic font callback. As a last resort I could disable, suppress or ignore this inspection.
However, in other teams there might be strict rules about code conventions, perhaps even a mechanism that blocks commits if they do not comply.
Or what if I am the author of a code inspection tool, or in the process of defining the coding conventions to be used in a project? Then I definitely want to know what would be the "correct" or smartest way to do this :)
As discussed in the comments, this is a bogus warning.
As you point out yourself, there is no generic font family that is suitable as a fallback for an icon font - nor can there be, as icon fonts are not standardized.
The relevant spec (CSS Fonts Module Level 3) only lists the following generic families:
serif
sans-serif
cursive
fantasy
monospace
None of these is suitable - as they are all explicitly not intended for icon/picture fonts.
So you should probably find a way to suppress the warning. Ideally, the system would allow you to add a list of fonts that the warning should be suppressed for (such as icon fonts). Otherwise, you'll just have to suppress the warning entirely.
Side note: Fallback fonts are only really necessary if you want to use a font that is installed on the user's computer - such as standard Windows fonts like Arial. In that case you need a fallback, because you cannot be sure what the user has installed.
If you use a web font that the browser can download, there should never be a need for a fallback font. It is still nice to include in case the font download fails, but IMHO not as important.
You can add "fantasy":
.my-icon {
font-family: 'my-icon-font', fantasy;
}
#mtonev
emoji - Fonts that are specifically designed to render emoji.
https://developer.mozilla.org/en-US/docs/Web/CSS/font-family
The 'other option' is also not suitable. And as similar as emojis and icons may seem:
emojis have a unicode representation and iconfonts are just a collection of images
learn more: https://www.sitepoint.com/icon-fonts-vs-svg-debate/
Does it matter if it is "Arial" or "arial" ?
With cloudflare's css minify enabled -
font: 16px 'Roboto', sans-serif;
turn to
font:16px roboto,sans-serif;
Will this be an issue ?
It should not matter if you capitalize font names or not in style sheets in 2021, unless you are using XHTML, an XML parser, or on a case-sensitive platform like UNIX. Most browsers going all the way back to the 1990's had parsers designed to ignore font-family case and didn't require capitalized font names to locate the right fonts. CSS2/CSS3 require browsers to be case-insensitive with font names.
Many purists still say its required to use properly cased font names, but its not. It likely will not hurt you, if you do. I try and capitalize font-names for the open source crowd that might be viewing one of my websites or need to revert to using XHTML5.
SUPPORT OLDER BROWSERS
If you want to support some much older browsers, make sure you use double-quotes around font names with spaces, like "Times New Roman", as some older browsers (pre-2001) would fail on single quotes (IE3) or no quotes (Netscape 4). Also do try and use lowercase for font family names like sans-serif, again to support a few minor bugs in very old browsers which had issues with upper case family names (early Mozilla / Gecko browsers).
i am converting psd to html and font used in psd is moolboran, my tag font-family: MoolBoran;, which is not supported by browsers, how can i overcome this problem? is there any possible solution to as alternative?
Your options are to either save an image with your non-standard font, or use the CSS property font-face, and allow the site visitors to download the font file. For more details of this approach, see CSS 3: Custom Fonts Using #font-face.
Web safe fonts have been a bane to designers for a while, but you can check out Google Web Fonts to see if there's a font that's close (it doesn't look like they support MoolBoran unfortunately)
The only solutions are to
A) use an image rather than live text (which is generally a poor method)
B) See if a web font version of "MoolBoran" is available somewhere. And use the #font-family selector. I looked but can't find anything for it.
C) Change your design.
There is nothing wrong with that tag, it's certainly supported by all browsers.
The font does of course have to be installed on the visitors computer, which is probably where you have your problem.
If you want that exact font, you can make an image out of the text. That is the only sure way to get exactly the look that you want across all browsers.
You should supply fallback fonts in your tag, for example:
font-family: MoolBoran, Geneva, Arial, sans-serif;