I'm working on an MVC project which uses localisation via resource files, all other foreign characters seem to render no problem in Internet Explorer 7 & 8, except for hyphens.
It just displays a space where the hyphen should be. I've tried putting the ascii code - but this doesn't work.
Any help would be great, thanks
I've figured out this was down to the font being used on the site, "Lucida Grande", even though this was being imported with #font-face it didn't like the hyphens!
Changing the font to Trebuchet MS in my conditional stylesheet fixed the problem. Hopefully this is helpful to anybody else having a similar problem
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'm developing an ASP.NET MVC app and using the Kendo Window control for popups in an iFrame. For some reason, I am getting a tiny cross in the leftmost part of the title bar. This is only happening on IE 11 and Chrome. The cross does not appear on Firefox. (I'm not worried about Chrome, as this app is intended to run only on IE 11.)
It appears to be something unique to my computer, as I have tried it on other computers with IE 11 and the cross does not appear.
I believe the Kendo controls show this character when it doesn't have data of some sort (I've seen Kendo dropdowns briefly show this same symbol while debugging), but I have no idea what data it's missing.
This may be a related problem, so I'll throw this out there: certain Unicode HTML characters like & #raquo; ( » ) show up as weird boxes with characters. Again, this is on IE -- and only on my computer. I dug down a bit in the MVC code and it seemed to be related to Bootstrap (I can get & #raquo; to properly show up if I'm not using the Bootstrap theme).
I tried replacing all my Windows fonts with the fonts from a known 'working' computer, but it didn't change anything.
Any advice or suggestions would be greatly appreciated. Thanks!
Figured it out. bootstrap.css was using Helvetica as one of its fonts:
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
My computer doesn't have Helvetica Neue, so it fell through to Helvetica. Something about that font doesn't want to render Unicode characters in IE 11. Once I removed the Helvetica option and IE fell through to Arial, the weird character was gone.
I'm working on a website where the users will be printing pages from the site fairly frequently, in order to give them to people without internet access. Some of the text comes out garbled when printed on our users' office printers:
That's supposed to say Reduced Fare and Free Ride Programs, Chicago Transit Authority.
My first thought was that this has something to do with the font we're using, so I changed that text to have font-family: 'Times New Roman', serif. Some google research made me think those font settings were widely supported and shouldn't cause problems, but our users are still having the issue.
Even if you don't know exactly how to fix this problem, I would appreciate suggestions about
What other than the font selection could be causing it?
If you do think it has something to do with the font, what is a good font to use? Or how could I figure that out, is it printer-specific?
Update
The page is being printed from the browser, which for this particular group of users is IE8. I'm not sure what version of Windows they're on. I've tested this on a Windows machine with IE8 in our office, and was not able to reproduce the issue. So while the browser might be a factor, I don't believe it's the only factor.
Second Update
The font we're using is Libre Baskerville, which we're loading through the Google Fonts API. It renders fine on screen, and actually prints with no issue from some of the printers at our client's office. The text only comes out garbled when printed on a Lexmark MS410dn.
I saw these same types of printing errors. I created a PDF in Indesign on Windows 10 using the Libre Baskerville font. When I tried to print the PDF on OSX using Preview I got the same garbled glyphs seen above. I fixed it by uninstalling the Libre Baskerville fonts which were Truetype format and installing Libre Baskerville fonts in Opentype format and resetting the fonts in the document. It seemed to work.
In the end the simplest solution was to use a different font for printing. The issue only happened with the Libre Baskerville font on a few specific printers, so in our print.css stylesheet we just use a basic serif font instead. Not ideal, but at least the printouts are legible.
In the original post I said that I had tried switching the font in the printouts and users were still having problems. This turned out to be due to caching of the print.css stylesheet, so that fix actually did solve the problem.
In the long term we'll probably find a font that works consistently on all their printers and switch the website over to that as well.
For the record (and anyone reading this with a similar issue), I had exactly the same issue trying to print a document written in Libre Baskerville on my laptop, in LibreOffice. The font is embedded in both RTF and PDF formats and the text is garbled in the same way. I also worked around the issue by changing to a different font. It's a pity as LibreBaskerville is a nice font.
Try replacing the True Type version of the font with the Open Type version - I am now able to print Libre Baskerville with no issues. The Open Type version is not easy to find as most downloads (including Google Fonts) only give you the option of a .ttf file. Search for a .otf file version - I found one here: https://www.broble.com/download-free-font/libre-baskerville
It might be that the imported font files have some errors in them. Sometimes, if you use a online font to webfont converter it makes some mistakes with the conversion. You could try Google Fonts. Find a serif font that you like and use their files and import scripts.
For example, if you want to use the font Bitter:
Just put #import url(http://fonts.googleapis.com/css?family=Bitter); at the top of your CSS file
Use font-family: 'Bitter', serif; in your style declarations.
NB: The serif part is a fallback in case something goes wrong, then the clients browser chooses the default serif font instead.
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';
I downloaded a custom font (Gotham-Light.eot), but it doesn't work on Internet Explorer 9.
#font-face {
font-family: Gotham-Light;
src: url('Gotham-Light.eot');
}
This doesn't work. I'm using ASP MVC3 rebuilt, used custom tool, still nothing.
First, the goods:
#font-face {
font-family: 'ludger_duvernayregular';
src: url('http://jfcoder.com/css/fonts/ludgerduvernay-fontsquirrel/ludgerduvernay.eot');
src: url('http://jfcoder.com/css/fonts/ludgerduvernay-fontsquirrel/ludgerduvernay.eot?#iefix') format('embedded-opentype'),
url('http://jfcoder.com/css/fonts/ludgerduvernay-fontsquirrel/ludgerduvernay.woff') format('woff'),
url('http://jfcoder.com/css/fonts/ludgerduvernay-fontsquirrel/ludgerduvernay.ttf') format('truetype'),
url('http://jfcoder.com/css/fonts/ludgerduvernay-fontsquirrel/ludgerduvernay.svg#ludger_duvernayregular') format('svg');
font-weight: normal;
font-style: normal;
}
p.test {
font-family: 'ludger_duvernayregular', Arial, serif;
font-weight: 400;
color: blue;
}
Note, I used a font face that was purposefully easy to see as working. (And I don't have access to Gotham in a web font, so... I'm not even sure Gotham is licensed to use in web font form. If you do not have a license or the license does not allow for it, please respect that.) So you will have to do a little thinking about the paths to your font files.
What I've done is consult the blog post AlienWebGuy linked to, which is good. It's not long, so I'd read it. It boils down to:
Possibly a misconfigured MIME type for the font file. See below for more info. There's also a note that Apache may have this problem, it seems to be more of an IIS issue (according to the article).
You can trick (?) IE9 to use the EOT file instead of the WOFF, which apparently fixes the issue (according to the article).
Additionally, and as an aside, IE9 had a problem displaying the font with a jsFiddle demo using the same exact CSS. Very weird. IE7 and 8 worked fine, so I know it was working in some ways. I did not figure out what that was about, but I saved the same markup and CSS to a file on my site and it works fine.
Breakdown...
Let me explain what's going on in the above CSS. I'll go through each line. However, keep in mind I have the web font in the following file formats:
eot
woff
ttf
svg
You really probably only need eot, ttf and woff if you don't care to support legacy iOS. SVG translations are hard to obtain, though.
Now, first name your font so you can reference it:
font-family: 'ludger_duvernayregular';
IE9 Compat Modes:
src: url('http://jfcoder.com/css/fonts/ludgerduvernay-fontsquirrel/ludgerduvernay.eot');
Remember to verify the URLs you're using here actually lead to a real file. Put it in the address bar and see what happens (does it download? 404?).
On the following, though, I'm going to remove the full URL so you can see the entire statement, including the end.
IE6, 7 and 8:
src: url('http://../ludgerduvernay.eot?#iefix') format('embedded-opentype'),
Note this part:
.eot?#iefix <<< See below for an explanation.
Further IE CSS Fix
In some rare cases, IE will fail because the #font-face declaration
has too many characters. This can be solved in most instances by
adding a ‘#’ hash mark after the ‘?’ question mark. This buys you a
bit of extra room.
- From the Font Spring article
I have no idea why this works, so I'm taking their word for it.
Modern Browsers:
url('http://../ludgerduvernay.woff') format('woff'),
Safari, Android, iOS:
url('http://../ludgerduvernay.ttf') format('truetype'),
Legacy iOS:
url('http://../ludgerduvernay.svg#ludger_duvernayregular') format('svg');
Then use it:
p {
font-family: 'ludger_duvernayregular', Arial, serif;
}
I was actually surprised this works back to IE6. Anyways, notice that I use a full path to the file, not a relative one. That's usually a good place to start; check to make sure the link downloads. I'm making a big deal of this because it's basic and easy to screw up.
So if the file is downloading with the url and you've got it working in other browsers, and in IE6, 7 and/or 8, you can look at another possibility:
Fix IE9 on the Server Side (IIS)
Microsoft’s IIS server will refuse to send resources that it does not
have a MIME type for. The syntax we developed forces IE9 to take the
WOFF over the EOT, but if it is served on IIS, it will fail. This is
because IE9 requests the WOFF file, but since WOFF is not a defined
MIME type in IIS, a 404 Not Found error is returned. To solve this,
you must add ‘.woff’ with MIME type ‘application/x-font-woff’ to your
IIS installation.
- From the Font Spring article
So you may have to check your server isn't borking it. You can also use Chrome Console or Firebug NET tab to view the headers sent with the file.
Now I had a little help here, and I think you should think about the following options:
Google Web Fonts. Don't be a hero. They host the font, give you the include stylesheet markup, and presto whammo, you're in business. They also have some pretty cool fonts. There are other web font services, such as Typekit, Webtype, Fontdeck, and Fonts Live.
Font Squirrel has a #Font-Face Generator, which can give you all of the files you need (Warning: Only submit fonts you know to be licensed for web use.). Use the Expert mode, and it will give you a ZIP file with lots of great stuff, including a demo. The one I received you can download here. The interesting thing is, the generated CSS is identical to the Font Spring one, minus the comments. That's probably not a coincidence.
I found that awesome tool on this Opera Dev page. That is also worth reading.
And of course, that blog post AlienWebGuy linked to at Font Spring.
This stuff isn't hard, but you need to know how to troubleshoot. Always check that the file is downloading; you can use Chrome Console Resources tab or Firefox's Firebug add-on and watch the NET tab to see if it downloads. It if just literally won't work, post the page or code somewhere where we can get to it and we can review it.
Happy coding. :)
The super awesomely cool font used in the demo is Ludger Duvernay Regular. For more information, see Steve Cloutier/Cloutierfontes site. Thank you for making it free for personal use. :)
If you're following the instructions layed out here -- http://www.fontspring.com/blog/fixing-ie9-font-face-problems -- then it's most likely how your calling the fonts.
Make sure you are pointing to the right location from your stylesheet - the code you have above will only work if the font file is in the same directory as the stylesheet.
Hope this helps.
Gotham is a commercial product, and if you have just downloaded it from somewhere, it’s probably an illegal copy or a fake, and may well be technically broken too.
Consider using a free font of similar design, such as Cicle.
For googlers: I had a problem with either long font name or conflict with already installed font. Anyway IE were the only browser having problems.
I changed
font-family: 'HelveticaLTUltraCompressedRegular';
to
font-family: 'HelveticaLTUCR';
which solved my issue.