How to get @font-face embedding to work over https?

[christianbright]

Well, I've got font embedding working brilliantly using @font-face in my stylsheet. I have used a legal freebie licensed font, before anyone asks. Now my question is when the site switches to https it cannot display the font. I would assume this is because it has to download the font to use it first and the SSL cert doesn't allow for this? Is there a way to get it working?

[♥mdtaylorlrim]

Well, I've got font embedding working brilliantly using @font-face in my stylsheet. I have used a legal freebie licensed font, before anyone asks. Now my question is when the site switches to https it cannot display the font. I would assume this is because it has to download the font to use it first and the SSL cert doesn't allow for this? Is there a way to get it working?

Have you tried using the FQDN https style to identify the source of the font?

[christianbright]

I'm not sure if I entirely understand, but I think so. You mean when defining the font did I put the entire url in? In that case, no. This is how I did it. The font is in the catalog folder.

 

In stylesheet.css:

 

@font-face {

font-family: 'FontinRegular';

src: url('Fontin-Regular.eot');

src: local('Fontin'), local('Fontin-Regular'), url('Fontin-Regular.woff') format('woff'), url('Fontin-Regular.ttf') format('truetype');

}

 

Then specified the item to change:

 

.infoBoxHeading_td {

font-family: FontinRegular, Arial, Helvetica, sans-serif;

}

[♥mdtaylorlrim]

I'm not sure if I entirely understand, but I think so. You mean when defining the font did I put the entire url in? In that case, no. This is how I did it. The font is in the catalog folder.

 

In stylesheet.css:

 

@font-face {

font-family: 'FontinRegular';

src: url('Fontin-Regular.eot');

src: local('Fontin'), local('Fontin-Regular'), url('Fontin-Regular.woff') format('woff'), url('Fontin-Regular.ttf') format('truetype');

}

 

Then specified the item to change:

 

.infoBoxHeading_td {

font-family: FontinRegular, Arial, Helvetica, sans-serif;

}

the font is downloaded the first time the user runs across code that requires it. Probably when browsing the catalog pages. Therefore, the font is a non-ssl 'image.'

 

I have no clue if it would work, but you could try this...

 

@font-face {

font-family: 'FontinRegular';

src: url('https://your_site/Fontin-Regular.eot');

src: local('Fontin'), local('Fontin-Regular'), url('Fontin-Regular.woff') format('woff'), url('Fontin-Regular.ttf') format('truetype');

}

 

But I would fist simply use a browser and browse to https://your_site/Fontin-Regular.eot and see if you get a download prompt or a 404. If you do not get a 404 then it is worth a try.

 

Or you may have to jack around with the syntax some or do some googling to find the correct syntax, or if it will even work.

[MrPhil]

http://hacks.mozilla.org/2009/06/beautiful-fonts-with-font-face/ gives the following example. Note that the actual typeface extension (.ttf in this case), not .eot, is used.

 

/* Gentium by SIL International */

/* http://scripts.sil.org/gentium */

 

@font-face {

font-family: Gentium;

src: url(Gentium.ttf);

/* font-weight, font-style ==> default to normal */

}

 

@font-face {

font-family: Gentium;

src: url(GentiumItalic.ttf);

font-style: italic;

}

 

body { font-family: Gentium, Times New Roman, serif; }

My understanding is that @font-face is a proposed W3C standard, but is not yet widely adopted. Firefox 3.5 supports it, but many other browsers may not, so take care using it that your page still works with the fallback fonts (serif, sans-serif, etc.).

 

I haven't tried this feature, but the url() presumably points to some place on your server in the example. I would guess that it could point to a different site (with http://....).

[christianbright]

Thanks Mark, what you suggested works brilliantly.

 

@Phil

 

Actually it appears @font-face is supported by all browsers now. It works in Firefox, IE, Safari, Chrome from what I know first hand. The problem then I guess would be if the customer has updated or not..

[♥mdtaylorlrim]

Thanks Mark, what you suggested works brilliantly.

Sometimes even I can stumble on a correct answer.. :blink:

[EPStore]

Guess I'll have to reopen this topic as I'm having the exact same problem... and I can't solve it for the life of me.

Here's the "original" code:

@font-face {
   font-family: 'BlazeITCItalic';
   src: url('http://www.mysite.com/webfont/blazeitc.eot');
   src: url('http://www.mysite.com/blazeitc.eot?iefix') format('eot'),
        url('http://www.mysite.com/webfont/blazeitc.woff') format('woff'),
        url('http://www.mysite.com/webfont/blazeitc.ttf') format('truetype'),
        url('http://www.mysite.com/webfont/blazeitc.svg#webfontygQQizPM') format('svg');
   font-weight: normal;
   font-style: normal;
}

 

Now I've tried everything (and I do mean EVERYTHING), changing the URLs to httpS and so on... but nothing seems to work. As soon as the site goes to https, I lose the web font (and I get the damn "However, this page includes other resources which are not secure" message for my SSL certif)

 

Help? :)

[germ]

Have you tried it this way:

 

@font-face {
   font-family: 'BlazeITCItalic';
   src: url('webfont/blazeitc.eot');
   src: url('blazeitc.eot?iefix') format('eot'),
        url('webfont/blazeitc.woff') format('woff'),
        url('webfont/blazeitc.ttf') format('truetype'),
        url('webfont/blazeitc.svg#webfontygQQizPM') format('svg');
   font-weight: normal;
   font-style: normal;
}

If you were to PM me the URL of your site I'd probably be a lot more help.

[EPStore]

Have you tried it this way:

 

@font-face {
   font-family: 'BlazeITCItalic';
   src: url('webfont/blazeitc.eot');
   src: url('blazeitc.eot?iefix') format('eot'),
        url('webfont/blazeitc.woff') format('woff'),
        url('webfont/blazeitc.ttf') format('truetype'),
        url('webfont/blazeitc.svg#webfontygQQizPM') format('svg');
   font-weight: normal;
   font-style: normal;
}

If you were to PM me the URL of your site I'd probably be a lot more help.

 

Hey germ, sorry to ask the exact same question on different topics... but this thing is really bugging me :)

Thanks for the help, I PM you right now.

Really appreciate it.

[germ]

I guess I won't be any help after all.

 

I can't get the fonts to show on my pc using IE7 and Firefox 3.0 at all.

 

The fonts don't show on my Wife's pc using IE8.

 

On my Wife's pc the fonts show using the latest version of Firefox, even if I make the changes to the stylesheet suggested in my last post.

[EPStore]

I guess I won't be any help after all.

 

I can't get the fonts to show on my pc using IE7 and Firefox 3.0 at all.

 

The fonts don't show on my Wife's pc using IE8.

 

On my Wife's pc the fonts show using the latest version of Firefox, even if I make the changes to the stylesheet suggested in my last post.

 

If "YOU" can't get it to work with your extensive knowledge, then I guess "I"'m pretty screwed :)

Thanks anyway for the help. I'll keep searching the Net for someone who might have gotten the same problem... One never knows...

[EPStore]

OK, I'm back... sorry but I'm not the type of guy to let go easily :)

So, I've noticed that when I open the web inspector console on Chrome, I get the following statement for my @font-face:

"Resource interpreted as Font but transferred with MIME type application/octet-stream."

I googled the sentence and I think that I might have found the start of an answer... but the thing is that I don't quite understand what I should do. That's why I'm back here :)

 

In short, they say that I need to add

an .htaccess to the location of the fonts adding the following types:

 

AddType application/vnd.ms-fontobject .eot

AddType font/ttf .ttf

AddType font/otf .otf

 

How do I do that? Just create an .htaccess in my webfont file?

That's when I ask such questions that I realize how limited I am on all this :)

[germ]

If I was the code monkey I'd do this.

 

First copy/move the blazeitc.eot file into the webfont folder (if it isn't already).

 

Then edit the CSS file to be like this:

 

@font-face {
   font-family: 'BlazeITCItalic';
   src: url('webfont/blazeitc.eot');
   src: url('webfont/blazeitc.eot?iefix') format('eot'),
        url('webfont/blazeitc.woff') format('woff'),
        url('webfont/blazeitc.ttf') format('truetype'),
        url('webfont/blazeitc.svg#webfontygQQizPM') format('svg');
   font-weight: normal;
   font-style: normal;
}

Then create a .htaccess with the text you mentioned and put it in the webfont folder.

 

Normally could make a test page and help figure this out, but the only place I have to test SSL is, shall we say, "under the weather" due to circumstances beyond my control.

:(

Out of curiosity what browser do you use?

:unsure:

[EPStore]

Hmm, that's quite strange... With this code, my web font now shows when on HTTPS but not on HTTP anymore. It kind of reversed the problem :)

The thing is I'm still getting the "Resource interpreted as Font..." + "unsecure resources" messages.

 

For the browsers, I'm using Chrome 10.0.648.205 & FF 3.6.17

 

 

I'll try messing around with this tomorrow.

 

Thanks,germ.

[Codeninjas]

Hi Frnds,

 

 

@font-face {
   font-family: 'xxxx';
   src: url('https://domain.com/xxxx.eot');
   src: url('https://domain.com/xxxx.eot?iefix') format('eot'),
	 url('https://domain.com/xxxx.woff') format('woff'),
	 url('https://domain.com/xxxx.ttf') format('truetype'),
	 url('https://domain.com/xxxx.svg#webfontygQQizPM') format('svg');
   font-weight: normal;
   font-style: normal;
}
@font-face {
   font-family: 'xxxy';
   src: url('http://domain.com/xxxx.eot');
   src: url('http://domain.com/xxxx.eot?iefix') format('eot'),
	 url('http://domain.com/xxxx.woff') format('woff'),
	 url('http://domain.com/xxxx.ttf') format('truetype'),
	 url('http://domain.com/xxxx.svg#webfontygQQizPM') format('svg');
   font-weight: normal;
   font-style: normal;
}

font-family: 'xxxx','xxxy';

 

 

In the above code we are loading same font-family with different names, this will work for both "http" and "https"

 

Thanks