Embedded Web Fonts? - GoFuckYourself.com

Tittytweaker · 05-09-2013, 10:39 AM

Hey guys. I'm trying to figure out how to get this font to appear in the footer on my website. I'm not really familiar with the @font-face thing - but I've been following the directions I've read as best as I can and can't seem to get it to work.

Code:

@font-face { font-family: bebas-neue; src: url('fonts/bebas-neue.eot'); /* For IE */ src: local('bebas-neue'), url('fonts/bebas-neue.ttf') format('truetype'); /* For non-IE */ }

^That's what I've got in my CSS file. When I visit my site the pink text in the footer looks like Arial or a similar font, and not the one I'm trying to use.

Advice would be appreciated.

Thanks!

~TT

Tent Pitcher · 05-09-2013, 10:11 PM

@font-face defines a new font family:

Code:

@font-face {
    font-family: "whatever";
    src: url('../fonts/whatever.ttf') format("truetype");
}

In the above case, we now have a font definition called "whatever" that points to the true-type font "whatever.ttf".

Once defined, it can be called through CSS like any other font:

Code:

p {
    font-family: "whatever";
    font-size: 14px;
}

Make sure that your font file paths are correct, that the font file exists, and that the pink footer text is using the correct font definition.

Tittytweaker · 05-10-2013, 08:22 AM

Gah, I'm an idiot. That's what I get for working on my site when I'm dead tired. I think the font paths were incorrect.

Thanks!

Tittytweaker · 05-15-2013, 07:41 PM

Any idea why it's not working in IE? I know IE is terrible but I'd like it to still work in there too since it does in all the other browsers.

Tent Pitcher · 05-19-2013, 09:25 PM

What version of IE?

Tittytweaker · 05-20-2013, 03:14 PM

Versions 8 and 9.

Tent Pitcher · 05-20-2013, 10:26 PM

Ok, just to recap, if you already have an EOT file along with your TTF, your CSS should look like this:

Code:

@font-face {
    font-family: "whatever";
    src: url('../fonts/whatever.ttf') format("truetype");
    src: url('../fonts/whatever.eot') format("truetype");
}

The EOT definition should be last, or you could use a specific directive like this:

Code:

<!--[if IE]>@font-face {
    font-family: "whatever";
    src: url('../fonts/whatever.eot') format("truetype");
}
<![endif]-->

Anyway, I hate to plug anything MS related, but if you need to convert a TrueType font to EOT for use with IE you can use WEFT to convert them:

http://www.microsoft.com/typography/WEFT.mspx

So make sure that you have the EOT and that it is in the right place and see if IE works properly then.

Tittytweaker · 06-03-2013, 11:28 PM

When I try the format you just posted, it still doesn't display in IE, and it breaks it in firefox.

When it works in FF, this is how I have it -

Code:

@font-face
{
font-family: bebas-neue;
src: url('/fonts/bebas-neue.ttf'),
     url('/fonts/bebas-neue.eot'); /* IE9 */
}

I've seen so many different ways to format it on so many different sites and none of them have worked except that exact way. And even then, it only works in FF and Chrome. I'm not sure what I could be screwing up.

nixem · 06-14-2013, 12:34 PM

If you don't exactly "get" @font-face property you can use little helpers

Google: "font squirrel" - Useful in cases where you have a random font that you have a version of on the desktop and are able to upload it. Font Squirrel converts your font into all 4 versions you need for different browsers.

If you do not have a font in mind just goto "Google Fonts" its a webfont site where you can choose form thousands of fonts and it outputs the proper code for you to use the fonts on your site, you can choose to let google host it as well. Also they show Page Speed (Load Time) Impacts based on each font

Tittytweaker · 06-16-2013, 12:22 PM

Cool. Took a little messing around but I managed to get it. Thanks a million!

05-09-2013, 10:39 AM	#1
Tittytweaker Confirmed User Industry Role: Join Date: Dec 2012 Posts: 184	Embedded Web Fonts? Hey guys. I'm trying to figure out how to get this font to appear in the footer on my website. I'm not really familiar with the @font-face thing - but I've been following the directions I've read as best as I can and can't seem to get it to work. Code: @font-face { font-family: bebas-neue; src: url('fonts/bebas-neue.eot'); /* For IE / src: local('bebas-neue'), url('fonts/bebas-neue.ttf') format('truetype'); / For non-IE */ } ^That's what I've got in my CSS file. When I visit my site the pink text in the footer looks like Arial or a similar font, and not the one I'm trying to use. Advice would be appreciated. Thanks! ~TT __________________ www.tittytweaker.com

05-09-2013, 10:11 PM	#2
Tent Pitcher Confirmed User Industry Role: Join Date: Nov 2012 Location: New Orleans Posts: 213	@font-face defines a new font family: Code: @font-face { font-family: "whatever"; src: url('../fonts/whatever.ttf') format("truetype"); } In the above case, we now have a font definition called "whatever" that points to the true-type font "whatever.ttf". Once defined, it can be called through CSS like any other font: Code: p { font-family: "whatever"; font-size: 14px; } Make sure that your font file paths are correct, that the font file exists, and that the pink footer text is using the correct font definition. __________________ Tent Pitcher - Adult Search Engine

05-10-2013, 08:22 AM	#3
Tittytweaker Confirmed User Industry Role: Join Date: Dec 2012 Posts: 184	Gah, I'm an idiot. That's what I get for working on my site when I'm dead tired. I think the font paths were incorrect. Thanks! __________________ www.tittytweaker.com

05-15-2013, 07:41 PM	#4
Tittytweaker Confirmed User Industry Role: Join Date: Dec 2012 Posts: 184	Any idea why it's not working in IE? I know IE is terrible but I'd like it to still work in there too since it does in all the other browsers. __________________ www.tittytweaker.com

05-19-2013, 09:25 PM	#5
Tent Pitcher Confirmed User Industry Role: Join Date: Nov 2012 Location: New Orleans Posts: 213	What version of IE? __________________ Tent Pitcher - Adult Search Engine

05-20-2013, 03:14 PM	#6
Tittytweaker Confirmed User Industry Role: Join Date: Dec 2012 Posts: 184	Versions 8 and 9. __________________ www.tittytweaker.com

05-20-2013, 10:26 PM	#7
Tent Pitcher Confirmed User Industry Role: Join Date: Nov 2012 Location: New Orleans Posts: 213	Ok, just to recap, if you already have an EOT file along with your TTF, your CSS should look like this: Code: @font-face { font-family: "whatever"; src: url('../fonts/whatever.ttf') format("truetype"); src: url('../fonts/whatever.eot') format("truetype"); } The EOT definition should be last, or you could use a specific directive like this: Code: <!--[if IE]>@font-face { font-family: "whatever"; src: url('../fonts/whatever.eot') format("truetype"); } <![endif]--> Anyway, I hate to plug anything MS related, but if you need to convert a TrueType font to EOT for use with IE you can use WEFT to convert them: http://www.microsoft.com/typography/WEFT.mspx So make sure that you have the EOT and that it is in the right place and see if IE works properly then. __________________ Tent Pitcher - Adult Search Engine

06-03-2013, 11:28 PM	#8
Tittytweaker Confirmed User Industry Role: Join Date: Dec 2012 Posts: 184	When I try the format you just posted, it still doesn't display in IE, and it breaks it in firefox. When it works in FF, this is how I have it - Code: @font-face { font-family: bebas-neue; src: url('/fonts/bebas-neue.ttf'), url('/fonts/bebas-neue.eot'); /* IE9 / } I've seen so many different ways to format it on so many different sites and none of them have worked except that exact way. And even then, it only works in FF and Chrome. I'm not sure what I could be screwing up. __________________ www.tittytweaker.com Last edited by Tittytweaker; 06-03-2013 at 11:29 PM..*

06-14-2013, 12:34 PM	#9
nixem Registered User Industry Role: Join Date: Feb 2013 Posts: 38	If you don't exactly "get" @font-face property you can use little helpers Google: "font squirrel" - Useful in cases where you have a random font that you have a version of on the desktop and are able to upload it. Font Squirrel converts your font into all 4 versions you need for different browsers. If you do not have a font in mind just goto "Google Fonts" its a webfont site where you can choose form thousands of fonts and it outputs the proper code for you to use the fonts on your site, you can choose to let google host it as well. Also they show Page Speed (Load Time) Impacts based on each font

06-16-2013, 12:22 PM	#10
Tittytweaker Confirmed User Industry Role: Join Date: Dec 2012 Posts: 184	Cool. Took a little messing around but I managed to get it. Thanks a million! __________________ www.tittytweaker.com