One of my websites is having an issue with text disappearing and reappearing. Here is the url. If anyone knows a fix for it please let me know!
When using Chrome and you refresh there is a header at the top under Conway that should say Trucking Application and then in the blue area there should be text that says 'Fill out your application below to get in touch with a representative from Con-way Truckload!'
Then Each Yellow Section should also have text in them!
https://www.gettruckerjobs.com/conway/form
UPDATE
I included
#font-face {
font-family: 'Oswald2';
font-style: normal;
font-weight: 400;
src: url(https://themes.googleusercontent.com/static/fonts/oswald/v8/-g5pDUSRgvxvOl5u-a_WHw.woff) format('woff');
}
The headers stated are still not showing working as expected. This is happening both on mac and windows but on a windows computer next to me I can't get the error to happen, Although if the headers show up when I load the page if I refresh then they disappear.
Google fonts do not provide all required font types and they cause many errors in various browsers. Use other service and download your fonts, such as: http://www.fontsquirrel.com/fonts/oswald
Related
We're using icomoon for our icon fonts, and they work fine in Chrome and Firefox, but won't display in IE11... Sometimes. It seems to work on the first page load, but not on subsequent page loads. Clearing the cache doesn't seem to reset it. This issue may be present in other IE versions, right now we're just focusing on IE11.
Here's our #font-face:
#font-face {
font-family: 'icon';
src:url('fonts/icon.eot?-3q3vo5');
src:url('fonts/icon.eot?#iefix-3q3vo5') format('embedded-opentype'),
url('fonts/icon.woff?-3q3vo5') format('woff'),
url('fonts/icon.ttf?-3q3vo5') format('truetype'),
url('fonts/icon.svg?-3q3vo5#rezku') format('svg');
font-weight: normal;
font-style: normal;
}
[class^="icon-"], [class*=" icon-"] {
font-family: 'icon';
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
/* Better Font Rendering =========== */
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.icon-alphabet:before {
content: "\e600";
}
/* etc etc etc */
But here's where it gets weird. Looking at the developer tools, an HTTP request for the fonts is being sent, but only a few hundred bytes are being received (probably just the headers).
But the HTTP response lists the content length correctly as several kilobytes.
The "Response body" tab just says "No data to view."
You can see in the Network Panel screenshot that the Google Fonts aren't behaving like this.
Pasting the URL in the location bar results in the full file being downloaded.
Ran into a similar problem, and from your screenshot above, the response has a Cache-Control header of 'no-store'. IE seems to have issues with caching and fonts.
Removing both the 'Cache-Control: no-store' and the "Pragma: no-cache" headers worked for us to get icon fonts to show up again.
https://github.com/FortAwesome/Font-Awesome/issues/6454
After investigating the very same issue, and going through various solutions posted online, I've created the following troubleshooting list, which covers most potential causes:
Font downloads are disabled in IE, under Internet Options / Security / Custom Level / Font Downloads enable /disable. They might be disabled by your network admin, in which case you would not be able to see nor change this setting.
Your HTTP headers prevent IE from storing the font file locally. To fix, remove any Cache-Control: no-store, no-cache or Pragma: no-cache headers, or any Expires header with a date in the past. Also the Vary header has its tricks in IE, if set to anything other than Accept-Encoding, User-Agent, Host or Accept-Language then IE will not cache anything, unless an ETAG header is also present (see this MSDN blog post).
You don't set the correct MIME types for the font download. For example Jetty 9 will set by default Content-Type: text/plain for the usual font types (eot, woff, woff2). See this answer for the proper content types to use.
Make sure to use display: block or display: inline-block for your icon element.
Finally, make sure to go through the troubleshooting guide over at FontAwesome.
I faced similar problem but with Bootstrap font icons (Glyphicons). You can try if this works:
(Generally on Windows 10) the IE-11 settings have been changed to not download any external fonts and use only the fonts available in windows. This is the default behavior.
However we can change this setting in IE to enable it to download external fonts. Following are the steps to be taken in IE-
Go to: Settings >> Internet Options >> Security
Click on “Internet” (or any zone that you may be using) >> “Custom level…”
Next in the ‘security settings’ – Enable ‘Font Download’. By default it would be disabled.
Refresh the Page
I had a similar problem and it seems to be caused by IE having difficulty with certain display and position settings in combination with iconfonts.
It should usually work using:
element:before {
display:block;
position: absolute;
... your styles ...
}
The syntax is correct, however there may be an issue with the way whatever converter you used to converted from .tff to .eof. See this the article for more details on this matter in general http://www.iandevlin.com/blog/2009/12/webdev/adventures-with-font-face
In the mean time you could try testing the problem by using a font hosted by Google fonts. I say this because Google handles cross browser compatibility seamlessly. If it turns out that the Google font works then you know its a problem with the way that your font was converted and you need to try another one. From what I understand Font Squirrel is really good at generating cross browser compatible fonts. I hope this helps good luck
This is the problem:
https://learn.microsoft.com/en-us/windows/security/threat-protection/block-untrusted-fonts-in-enterprise#Turn_on_and_use_the_Blocking_untrusted_fonts_feature
Basically Microsoft is making us have to go back to using sprite sheets.
In my case, it was corrupted .eot font file. I had generated new one ( + new .css styles) and it fixed the problem. Try it.
PS. Make sure you support EOT for IE at #font-face, for example:
#font-face {
font-family: "fontName";
src:url("../../src/theme/fonts/fontName.eot");
src:url("../../src/theme/fonts/fontName.eot?#iefix") format("embedded-opentype"),
url("../../src/theme/fonts/fontName.woff") format("woff"),
url("../../src/theme/fonts/fontName.ttf") format("truetype"),
url("../../src/theme/fonts/fontName.svg#fontName") format("svg");
font-weight: normal;
font-style: normal;
}
Good morning!
My Team and I spent most of yesterday trying to figure out why that when I started the server yesterday morning, the website I was working on came up with every font on it displaying Times New Roman. The site is written in JSF utilizing an Eclipse Workspace, so we at first thought it was an issue with the Workspace, since the site was showing up correctly for one of my coworkers.
After hours spent rebuilding and debugging the Workspace, we came to the conclusion that it was either the code or the browser. I spent about an hour looking through the code, but could not find any issue that would cause our problem, so we concluded it was the browser. That was when one of my coworkers suggested that the person for whom the site was displaying fine on, update to the latest version of Chrome - which caused the fonts to break.
That latest version is: 38.0.2125.104 .
The code that is embedding the fonts looks like the below (the JSF resource tag just renders an HREF from the library):
#font-face {
font-family: 'aleoregular';
src: url(#{resource['lib:library/ui/fonts/aleo/aleo_regular_macroman/Aleo-Regular-webfont.eot']});
src: url(#{resource['lib:library/ui/fonts/aleo/aleo_regular_macroman/Aleo-Regular-webfont.woff']}) format('woff'),
url(#{resource['lib:library/ui/fonts/aleo/aleo_regular_macroman/Aleo-Regular-webfont.ttf']}) format('truetype'),
url(#{resource['lib:library/ui/fonts/aleo/aleo_regular_macroman/Aleo-Regular-webfont.svg']}) format('svg');
font-weight: normal;
font-style: normal;
}
Or, it would look like this in CSS without the JSF:
#font-face {
font-family: 'sinkin_sans600_semibold';
src: url('../fonts/sinkin-sans/sinkinsans_600semibold_macroman/SinkinSans-600SemiBold-webfont.eot');
src: url('../fonts/sinkin-sans/sinkinsans_600semibold_macroman/SinkinSans-600SemiBold-webfont.eot?#iefix') format('embedded-opentype'),
url('../fonts/sinkin-sans/sinkinsans_600semibold_macroman/SinkinSans-600SemiBold-webfont.woff') format('woff'),
url('../fonts/sinkin-sans/sinkinsans_600semibold_macroman/SinkinSans-600SemiBold-webfont.ttf') format('truetype'),
url('../fonts/sinkin-sans/sinkinsans_600semibold_macroman/SinkinSans-600SemiBold-webfont.svg#sinkin_sans600_semibold') format('svg');
font-weight: normal;
font-style: normal;
}
On Firefox's console, I am getting this error:
"downloadable font: FTTM: misaligned table (font-family:....)"
Any advice would be much appreciated.
No definitive answer, but some things to try/check...
There is no problem that I have found with the new Chrome version and fonts.
You will be getting times fonts (actually 'serif') because that is the browser default if no font is set.
I take it your web fonts are being loaded from a local server and not the internet, and that therefore you can check that those font files exist and haven't become corrupted. Even if they are coming from the web somewhere, the next step is the same...
In Chrome, open the dev tools, and you should be able to see in the Network panel if the font file(s) are being requested and served up.
For a good call, Chrome will show the served font in the Preview tab when you click on the network call. If you see nothing there, check the response headers. You will need a Content-Type of something like font/woff2 or application/x-font-woff or similar.
You can also see from the network panel whether the files are being served from cache or not. It could be that the problem is not a Chrome version change as such, but that upgrading cleared the cache or the assets just naturally became cache expired and now are trying to fetch the problematic versions.
Could you be gzipping the font files, for example now, where you were not before (or vice versa)?
One of our guys figured it out! There was a server configuration filter that was corrupting the font files, they were able to modify the pom.xml file to get it all working again.
I am using a google web font on a site and am getting some users reporting very squished unreadable text throughout the entire site. I am unable to see this any browser or computer I use, so I am not sure what could be causing this.
Here is a screenshot of the issue:
Any suggestions to fix this would be great. Thanks!
Here is the url to site: http://odditymall.com
i would guess your website is not responsive and u have done some html/css changes to your website so its causing it like that. y dont u try accessing the source through chrome element inspector and then play with the code maybe u'll find ur answer there. else send the site link so we could check it up, if thats possible though..
If anyone is having the same issue... From google fonts, I was getting the 'Droid Serif' font, but in my css I was using:
font-family: 'Droid', arial, verdana;
So, since droid did not exist anywhere, the text on the site would look like the screenshot above for a very small amount of people (for whatever reason). To fix it for those people, I just had to change it to:
font-family: 'Droid Serif', arial, verdana;
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.
I'm running into a small issue with a site I'm working on. I'm using the font services from Fonts.com to serve up the CSS and web fonts I use on the site, and everything works well except in Internet. The page appears to render with the fonts correctly in place, but when the loading is complete, IE reverts back to the default font.
Here's a sample of the CSS:
#font-face{
font-family:"HelveticaNeueW02-55Roma";
src:url("/d/0b3a3fca-0fad-402b-bd38-fdcbad1ef776.eot?d44f19a684109620e484167aa390e81872e11b421ef14b20f5dda8683b7716e34431bd7031a61bffb8b38558710357d5ed49d8a7dcd4f490bf2bc9922040a50d670eaafb6e334fcf61c48a10483015d48bd9b9cb074a09c71c211940cb0c60886a2d42510bad7eced9195baae7bedb11ccbdb0d618032faccca0c925a83db7aac01d0bae4b090b6680179034630a36491101451eadad15f77b41f406d48f0f3592bf2731964d594bed634b405df69863674a8be20883212f56ec396a14e1cc983ae5cf8a554298e7314350fa96b78a363d2b4ccfc8ff090d5c8ce49e47d02bc317e0334f5b6efa484026&projectId=215db553-2cf6-4cbb-a5fd-6a4b7d7b8bac") format("eot");
}
#font-face{
font-family:"HelveticaNeueW02-55Roma";
src:url("/d/0b3a3fca-0fad-402b-bd38-fdcbad1ef776.eot?d44f19a684109620e484167aa390e81872e11b421ef14b20f5dda8683b7716e34431bd7031a61bffb8b38558710357d5ed49d8a7dcd4f490bf2bc9922040a50d670eaafb6e334fcf61c48a10483015d48bd9b9cb074a09c71c211940cb0c60886a2d42510bad7eced9195baae7bedb11ccbdb0d618032faccca0c925a83db7aac01d0bae4b090b6680179034630a36491101451eadad15f77b41f406d48f0f3592bf2731964d594bed634b405df69863674a8be20883212f56ec396a14e1cc983ae5cf8a554298e7314350fa96b78a363d2b4ccfc8ff090d5c8ce49e47d02bc317e0334f5b6efa484026&projectId=215db553-2cf6-4cbb-a5fd-6a4b7d7b8bac");
src:url("/d/d5af76d8-a90b-4527-b3a3-182207cc3250.woff?d44f19a684109620e484167aa390e81872e11b421ef14b20f5dda8683b7716e34431bd7031a61bffb8b38558710357d5ed49d8a7dcd4f490bf2bc9922040a50d670eaafb6e334fcf61c48a10483015d48bd9b9cb074a09c71c211940cb0c60886a2d42510bad7eced9195baae7bedb11ccbdb0d618032faccca0c925a83db7aac01d0bae4b090b6680179034630a36491101451eadad15f77b41f406d48f0f3592bf2731964d594bed634b405df69863674a8be20883212f56ec396a14e1cc983ae5cf8a554298e7314350fa96b78a363d2b4ccfc8ff090d5c8ce49e47d02bc317e0334f5b6efa484026&projectId=215db553-2cf6-4cbb-a5fd-6a4b7d7b8bac") format("woff"),url("/d/1d238354-d156-4dde-89ea-4770ef04b9f9.ttf?d44f19a684109620e484167aa390e81872e11b421ef14b20f5dda8683b7716e34431bd7031a61bffb8b38558710357d5ed49d8a7dcd4f490bf2bc9922040a50d670eaafb6e334fcf61c48a10483015d48bd9b9cb074a09c71c211940cb0c60886a2d42510bad7eced9195baae7bedb11ccbdb0d618032faccca0c925a83db7aac01d0bae4b090b6680179034630a36491101451eadad15f77b41f406d48f0f3592bf2731964d594bed634b405df69863674a8be20883212f56ec396a14e1cc983ae5cf8a554298e7314350fa96b78a363d2b4ccfc8ff090d5c8ce49e47d02bc317e0334f5b6efa484026&projectId=215db553-2cf6-4cbb-a5fd-6a4b7d7b8bac") format("truetype"),url("/d/b68875cb-14a9-472e-8177-0247605124d7.svg?d44f19a684109620e484167aa390e81872e11b421ef14b20f5dda8683b7716e34431bd7031a61bffb8b38558710357d5ed49d8a7dcd4f490bf2bc9922040a50d670eaafb6e334fcf61c48a10483015d48bd9b9cb074a09c71c211940cb0c60886a2d42510bad7eced9195baae7bedb11ccbdb0d618032faccca0c925a83db7aac01d0bae4b090b6680179034630a36491101451eadad15f77b41f406d48f0f3592bf2731964d594bed634b405df69863674a8be20883212f56ec396a14e1cc983ae5cf8a554298e7314350fa96b78a363d2b4ccfc8ff090d5c8ce49e47d02bc317e0334f5b6efa484026&projectId=215db553-2cf6-4cbb-a5fd-6a4b7d7b8bac#b68875cb-14a9-472e-8177-0247605124d7") format("svg");
}
and typical use cases:
body {
font-family: "DIN Next W02 Cond";
font-weight: normal;
font-size: 14px;
font-weight: normal;
}
p {
font-family: "HelveticaNeueW02-55Roma";
font-weight: normal;
font-size: 14px;
line-height: 1.5;
}
The wide font is what displays after the page finishes loading, while the narrow font (the correct font) is displayed during page load.
Is there an easy fix? Fonts.com provides a web portal to specify the fonts in the CSS, which they serve from their servers - so I can't easily edit that. I can edit the font-family property for elements using the web fonts, though. If any more information is needed, I'll provide it where possible.
Edit: this is not a flash of unstyled content, it renders properly from what is presumably the cache, then (upon re-downloading the file) discards the custom font and replaces it with a default font when the page is done loading. It's the reverse of what I and others are expecting, hence posting here for a fix.
the flicker you see is fouc or fout, im assuming your using IE9, it'll will display text in a default font while the web font loads — even in compatibility mode.
#font-face {
font-family: 'OpenSansLight';
src: url('OpenSans-Light-webfont.eot');
src: url('OpenSans-Light-webfont.eot?#iefix') format('embedded-opentype'),
url('OpenSans-Light-webfont.woff') format('woff'),
url('OpenSans-Light-webfont.ttf') format('truetype'),
url('OpenSans-Light-webfont.svg#OpenSansLight') format('svg');
font-weight: normal;
font-style: normal;
}
that's the best way to get #font-face cross-browser. if you need those files created, head over to fontsquirrel.com
font loader is used by typekit and google fonts to fix the flash; i'm not sure if you'll have to tweak it for your code, but you can snag it on github https://github.com/typekit/webfontloader
So for me, it was a local issue.
When we deployed to our staging server, the fonts displayed correctly in IE 7 and 8 .
Still don't know why they're not showing up locally, but at least it works in production.
My fonts display properly in IE8 locally. Also works in chrome and FF.
The fonts fail in production. I'm using fontawesome for bootstrap twitter.
I find that once the page is loaded, If I select the entire page then all the loaded fonts appear. So they are there, but IE8 disregards once the page is loaded.
I've checked quirks mode and all other combinations.
It's definitely a "when loaded" to "speed of load" in "relation to other CSS" issue.
Re-positioning the CSS link higher or lower in the code has effects - though no clear fix.
It would be nice if I could "re-instate" the loaded fonts once the page was complete.
On our project we identified that web fonts would revert after page load in Internet Explorer when we had the developer tools open. We still have to remind ourselves of this from time to time, but this is why you might see this odd behavior occur locally but not in production.
It definitely does not happen on every page load, but is more frequent when we manually refresh pages. We have not found documentation for this behavior but have experienced it on multiple computers when running IE 10 and especially IE 11.
I had the same problem of flash of styled content and for me, the cause was two-fold:
I had the font installed locally
I was using the wrong URL for the web-font
So before the webfont loaded, Explorer served up the local version. It then tried to load the font with an incorrect URL, which didn't work, which caused it to fall back to a standard sans-serif font.