I'm using the free web fonts service via webfonts.fonts.com which are being served by their server and i'm getting the following warning in my Chrome/Safari browser console: "Resource interpreted as Font but transferred with MIME type application/octet-stream."
This is the JS link fonts.com specify to place in the header:
<script type="text/javascript" src="http://fast.fonts.com/jsapi/f3d92ff3-2575-4cb8-a4b8-9b4c5d0376fb.js"></script>
This is the CSS i'm using:
h1 { margin-bottom: 10px;font: 35px/35px 'Helvetica W01 Blk', Arial, Helvetica, sans-serif; font-weight: bold; color: #00AEEF; }
I don't know what the warning means and wondered since it's only a warning and not an error, whether it's that critical.
I've tested the site on various browsers, Mac and PC and on the face of it everything worked and looked as it should.
Can anyone shed any light as to whether i'm doing something wrong or even if this is an issue or not?
Gladly post any more information in necessary.
Thanks in advance.
This warning is perfectly safe to ignore. Our service uses the "application/octet-stream" as a generic MIME type for our font data because there do not seem to be any officially standardized/recognized MIME types for the various web font formats. There are indeed some suggestions by various entities for some of the formats, however, using this generic MIME type helps us maximize compatibility with our supported browsers.
If you do have any trouble with the service functioning correctly, please don't hesitate to contact us by sending a ticket from our support form:
http://webfonts.fonts.com/en-US/ContactUs/TechnicalSupport
Related
My brand uses a particular typeface, which I have bought and self host. I want to use the font on my email newsletter (with fall back fonts). Using #font-face I have linked to the self hosted fonts on my server. I've put the html newsletter file on my server and can see that the correct font is displayed. I've also sent myself a test email and again the correct font is displayed.
However, I'm writing the HTML file on my Mac and when I come to view the file (on my computer) in Firefox or Chrome the fall back font is displayed not the #font-face linked font. Why is this and what can I do about it? The link to fonts is absolute, so I presume it should work when testing locally. It is going to make development difficult if I can't test on my computer locally. Update: strangely when I open the html file on my computer in Safari the linked to fonts are displayed.
Update: is this something to do with .htaccess file? See http://ijotted.blogspot.co.uk/2012/05/self-hosting-web-fonts-for-use-on-your.html "IE and Firefox require that fonts be served from the same domain as the website" Browsers are not able to access the files because the files are stored on my server (not on my computer)?
Code here:
#media screen {
#font-face {
font-family: 'ElenaWebBasic';
src: url('http://www.xyz.co.uk/webfonts/ElenaWebBasicRegular/ElenaWebBasicRegular.eot');
src: url('http://www.xyz.co.uk/webfonts/ElenaWebBasicRegular/ElenaWebBasicRegular.eot?#iefix') format('embedded-opentype'),
url('http://www.xyz.co.uk/webfonts/ElenaWebBasicRegular/ElenaWebBasicRegular.woff2') format('woff2'),
url('http://www.xyz.co.uk/webfonts/ElenaWebBasicRegular/ElenaWebBasicRegular.woff') format('woff');
font-weight: 400;
font-style: normal;
}
}
First and foremost, it's difficult to test custom fonts if you have them installed on your system. When a browser or email client sees a font in the font stack, it can display the locally installed version if the remotely referenced one fails. So even though it's broken, it will seem like it works. For email, using a remote service like Litmus or Email on Acid is a good way to test emails and web font display.
Depending on what where you purchased the font, they might have a way to reference it on a CDN. Referencing a service (like Google fonts) is currently the easiest way to display web fonts in html email.
<!-- Desktop Outlook chokes on web font references and defaults to Times New Roman, so we force a safe fallback font. -->
<!--[if mso]>
<style>
* {
font-family: sans-serif !important;
}
</style>
<![endif]-->
<!-- All other clients get the webfont reference; some will render the font and others will silently fail to the fallbacks. -->
<!--[if !mso]><!-->
<link href='https://place-you-bought-the-font.com/css?family=Roboto:400,700' rel='stylesheet' type='text/css'>
<!--<![endif]-->
I'd recommend looking in the font seller's site to see if they have an option like this.
Here are a few more options to try:
<style type="text/css">
#media screen {
#font-face{
font-family:'Open Sans';
font-style:normal;
font-weight:400;
src:local('Open Sans'), local('OpenSans'), url('http://fonts.gstatic.com/s/opensans/v10/cJZKeOuBrn4kERxqtaUH3bO3LdcAZYWl9Si6vvxL-qU.woff') format('woff');
}
}
</style>
Email has trouble with #import, so you might try using <link> instead:
<link href="http://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet" type="text/css">
I am working on a web project that is used by security minded people. Some of them have turned off webfonts and due to this the icons such as undo, redo, bulleted list ext.ext. are not showing up.
That being said, the first thing i did was attempted to load the fonts required in my main css file before the TinyMCE code was loaded.
#font-face
{
font-family: 'tinymce';
src: url('fonts/tinymce.eot');
src: url('fonts/tinymce.eot?#iefix') format('embedded-opentype'),
url('fonts/tinymce.woff') format('woff'),
url('fonts/tinymce.ttf') format('truetype'),
url('fonts/tinymce.svg') format('svg');
}
However this has still not resolved my issues. Is there any guidance anyone can give me as to a way to get these icons to show?
Since webfonts are blocked I ended up having to change to a different editor ckeditor. here is there site http://ckeditor.com/demo.
I work in a government network where the security settings are managed by IT. We are also restricted to using IE9 on all our machines. I develop web applications used in lesson content (we are a school) for students, so I try to make the pages look as modern as possible so as not to bore the heck out of the students. Our machines don't even have Helvetica and we teach graphic design.
Until recently, I've abbandoned hope with trying to get #font-face working on pages I make for my school. That is ... until I discovered Prezi. If you go to http://prezi.com with IE9 and Internet site security settings set to "medium high," you'll se that the site still magically loads its "PT Sans" font on the page straight from the fonts.googleapis site. When I discovered this, I literally spent an entire 24-hour period trying to reverse engineer their method, couldn't replicate it with my off-site server, then spent the next 24 hours tracking down the front end developers of Prezi to see if they could let me in on their secret (hey, it's the government, we have free time), all to no avail of course.
The glimmer of hope from seeing Prezi figure it out has caused me to become doglike obsessed with this issue. I've tried all the tricks and fixes all around the Internet over the course of a year. I still can't get it to work.
Prezi uses:
<link href='//fonts.googleapis.com/css?family=PT+Sans:400,700&subset=latin-ext,cyrillic-ext' rel='stylesheet' type='text/css'>
to call the font from their index page, which returns this:
#font-face {
font-family: 'PT Sans';
font-style: normal;
font-weight: 400;
src: url(http://themes.googleusercontent.com/static/fonts/ptsans/v5/mqvGe0REcQNb_tfYSePALA.eot);
src: local('PT Sans'), local('PTSans-Regular'), url(http://themes.googleusercontent.com/static/fonts/ptsans/v5/mqvGe0REcQNb_tfYSePALA.eot) format('embedded-opentype'), url(http://themes.googleusercontent.com/static/fonts/ptsans/v5/jduSEW07_j4sIG_ERxiq4Q.woff) format('woff');
}
#font-face {
font-family: 'PT Sans';
font-style: normal;
font-weight: 700;
src: url(http://themes.googleusercontent.com/static/fonts/ptsans/v5/1FvfuwkSjtdD3II7O-pVp_esZW2xOQ-xsNqO47m55DA.eot);
src: local('PT Sans Bold'), local('PTSans-Bold'), url(http://themes.googleusercontent.com/static/fonts/ptsans/v5/1FvfuwkSjtdD3II7O-pVp_esZW2xOQ-xsNqO47m55DA.eot) format('embedded-opentype'), url(http://themes.googleusercontent.com/static/fonts/ptsans/v5/HXiERDIZdwFzjXlbcMq7XPesZW2xOQ-xsNqO47m55DA.woff) format('woff');
}
And then they just use it like a regular web font using font-family: 'PT Sans'; !!!
I can replicate the whole thing on a local html file because the security settings for intranet pages are lower than regular Internet pages. But I'm not authorized to use the intranet for my applications.
How did Prezi do it! What could they have done to get it to work on their site? Prezi front-end developers have not responded to my Facebook, Twitter, e-mail or voicemail messages. Prezi software is obviously proprietary, but this is a web page on their site, not their software product.
My IT guys are not helpful either, telling me things I already know, like "medium-high" security settings block #font-face, duh (but obviously they don't, because Prezi did it). They certainly have bigger fish to fry. As a pacifier, they pushed Chrome and FF to my cubicle. Most of what they deal with is "my screen is black" or "what's my desktop" type questions.
Because my question is so specific to my environment, architecture and situation, this is really a shot in the dark. I really did spent more than 24 hours reverse engineering Prezi's home page to figure this out to no avail. It was a waste of time.
How could they possibly get around my network's security settings when no other website, not even http://www.google.com/fonts displays fonts on our machines?
Note: I apologize for the chattyness. It's been 1 a.m. and it's been 37 hours.
I think the basic problem is that IE won't let you download from another domain. To get around it you can host the font on your own server. Here's the basic setup:
Download your ttf font file (in google fonts you can download by adding the font to your collection and then clicking on the down arrow at the top right of the collection 'Use' sceen)
Nip on over to Font Squirrel and use their 'webfont generator' to create the various permutations needed
copy the #font-face code from the top of the handy example page that font squirrel creates and put it into your css file. It will look something like this:
#font-face {
font-family: 'PTSans';
src: url('PTSans-regular-webfont.eot');
src: url('PTSans-regular-webfont.eot?#iefix') format('embedded-opentype'),
url('PTSans-regular-webfont.woff') format('woff'),
url('PTSans-regular-webfont.ttf') format('truetype'),
url('PTSans-regular-webfont.svg#PTSansregular') format('svg');
font-weight: normal;
font-style: normal;
}
Upload the lot and you should be set to go.
Note: this will only work for the 'Medium-high' security setting (and lower). If you're stuck with 'High' you're stuck with the windows default fonts.
I would like to choose fonts in a web page using logic along the lines of "if you have this system font A, use it, otherwise download and use font B".
I can do this in CSS like so:
#font-face {
font-family: B;
src: url('B.ttf');
}
p {
font-family: A, B;
}
My question is: If the system has font A installed (i.e. font B is never actually required to render the document), is B.ttf downloaded or not - and does it vary between browsers?
The file B.ttf may be requested, even if font A is available on the system and the browser doesn't need to fall back to font B.
Paraphrased from the CSS3 Fonts module spec, §4.7 Font loading guidelines, with a relevant code snippet:
In cases where a font might be downloaded in character fallback cases, user agents may download a font if it's listed in a font list but is not actually used for a given text run.
#font-face {
font-family: GeometricModern;
src: url(font.ttf);
}
h2 {
/* font may be downloaded for pages with h2 elements,
even if Futura is available locally */
font-family: Futura, GeometricModern, sans-serif;
}
Since it's not a requirement (i.e. "may", not "must"), it's the vendor's choice whether their browser downloads a web font for fallback use even if it's not required. As far as I know, Firefox will download B.ttf, and it appears that Safari and Google Chrome won't (I haven't even tested in Opera and IE yet).
So, it looks like this behavior varies between browsers — but there's no right or wrong in such a scenario.
I have some text in Photoshop & it's set to "crisp". When I put it on my site it doesn't quite look the same.
Does anything exist in CSS yet that I can use to make it crisp? Or not?
Or do you have any suggestions to achieve a similar effect?
Not only is it not possible, but different browsers on the market enforce different antialiasing settings, meaning that you can't get consistent results, even if they are not what you want.
For a good article on how the various browsers deal with font rendering, I'd suggest reading this: http://blog.typekit.com/2010/10/21/type-rendering-web-browsers/
this is what I found on a big company's web site:
body, table, form {
font: 12px/18px "Lucida Grande", "Lucida Sans Unicode", Helvetica, Arial, Verdana, sans-serif;
background-color: transparent;
color: #333;
-webkit-font-smoothing: antialiased;}
What you're really asking is:
"Is it possible to control anti-aliasing from the web development perspective?"
The answer, for now, and for at least some time into the future (until OS/browser vendors start giving that kind of developmental control [don't hold your breath]) is undeniably: NO.
Forcing AA is a myth
No way to smooth text
Use images to simulate AA
Forcing anti-aliasing using css: Is this a myth?
Try This code snippet
body {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}