GoFuckYourself.com - Adult Webmaster Forum

GoFuckYourself.com - Adult Webmaster Forum (https://gfy.com/index.php)

- Webmaster Q & Fuckin' A (https://gfy.com/forumdisplay.php?f=27)

- - Embedded Web Fonts? (https://gfy.com/showthread.php?t=1109012)

Tittytweaker

05-09-2013 10:39 AM

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

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!

All times are GMT -7. The time now is 12:51 AM.