Font Champagne & Limousine not displaying properly on my site

Feb 27, 2013 at 11:05

Hello all. I really love the Champagne & Limousines font by Lauren Thomas but somehow it won´t display correctly on my titles.

(I've checked the site on IE, Firefox and Chrome and it's the same "bad" result.)

Please take a look at my page for an example:
http://soutinephotography.se/information/nyfodd

and compare the header letters with the font on how it´s supposed to look.
Notice the "M" and the "N" for example. On my site it looks like the sides of the letters are thick and then thin in the middle. But the original font has the same thin line all the way through.

Im using Wordpress - ProPhoto 4. And I installed the font by first generating a webfriendly version with FontSquirrel.

Hope someone has any ideas!

Kind Regards,
/Gabriella

frd

Feb 27, 2013 at 11:19

God morgon Gabriella,

You have to keep in mind that @font-face isn't a 100% perfect solution, and that not all fonts are meant to be displayed like this. There are a few CSS tricks you can try to make things better, but like I said, it will never be absolutely perfect.

Feb 27, 2013 at 11:25

God morgon drf,

Sorry, but not sure I know what you mean. What do mean with @font-face and that not all font are meant to be displayed like this?

frd

Feb 27, 2013 at 11:43

What I mean is that all fonts are not "optimized" to be displayed via the @font-face method. So, rendering might not be perfect, just like in your case. That doesn't mean that the font is bad, not at all.

You should try to google some keywords, like "@font face rendering" or something similar, you'll see that many people are asking similar questions. And you might also find a few tricks to deal with the issue.

Feb 27, 2013 at 12:52

Oh my okay - yes I googled it and it seems to be a common issue. Have no idea on how to fix it though cause the explanations are so complicated... Thanks anyway for your thoughts.

metaphasebrothel

Feb 27, 2013 at 15:07

Hi, Gabriella77, you could send a private message to Lauren Thompson, the designer of Champagne & Limosines: http://www.dafont.com/profile.php?user=195029. She visits dafont often, and posts in the forums using the nickname PseudoNympho. If you have purchased a commercial license to use Champagne & Limosines, she would probably be able to help you with the problem you're experiencing. If you haven't purchased a license, you should probably have done that first, before providing a link to where you're using it commercially.

Feb 27, 2013 at 16:26

Hi and thanks for your tip. I actually did write Lauren more than a week ago and again yesterday but she hasnt replied...
And yes, the first thing I did was to purchase a license.

Appreciate your help though!

Feb 27, 2013 at 17:46

If the desktop font looks OK and the webfont does not, it *could* be a hinting issue.

Go back to Font Squirrel and generate the webfont again. This time, choose the "Expert" option and do not use the Font Squirrel hinting. It is the option at the left and you need to select the one on the right. You need to use the same hinting currently used by the desktop font or not use hinting at all. Then test the newly generated webfont on a webpage in your computer. If the result is what you are looking for, then replace the webfont in your server.

Give it a try and see what happens.

I hope you have a license to use all the webfonts listed on your CSS.

Feb 27, 2013 at 19:24

Hey Toto,

Thanks - I tried your advice but it didn't work... seems I have to find another font after all.
As I wrote earlier - Yes, I have purchased licenses for the ones which require it, but most of them are free for commercial use, so no need to worry about it.

#10

Feb 27, 2013 at 22:17

I was hoping that would fix it.

Anyway try this again. Open the font you downloaded from Dafont and note the font's family name, then create this html page

<html><head><style type="text/css">
@font-face {
font-family:xxxx;
src('zzzz.yyy');
)
body {
FONT-WEIGHT: 400;
FONT-SIZE: 28px;
TEXT-TRANSFORM: uppercase;
COLOR: #c997c6;
FONT-STYLE: normal;
FONT-FAMILY:xxxx;
}
</style></head><body>

place your test text here.

</body></html>

Now, replace all instances of xxxx with the font's family name. If the filename of the font has spaces, rename the font and remove the spaces in the font's filename or shorten it. Replace zzzz with the filename of the font. If the font is a TTF then replace yyy with ttf and if it is an open type font, replace it with otf. Now place the font on the same location as the html page. Open the html page in Firefox. This won't work in IE and I am not sure about Chrome, I guess it will work there also. BTW I lifted the style for the body from your CSS (H2.page-title)

Do you still see the issues you have with the font?

You are now using the desktop font as a webfont so if the problem is still there, it is not with the conversion of the desktop font to webfont but with how the browser render the font. As you mentioned, the desktop font worked fine for you.

About font licensing, I was indirectly referring to the font with 'trial' on its name. I suggest that you have another look at its terms of use especially if it is a commercial font. Its use might have a limitation. Since you've already taken care of the licensing part and the rest of the fonts are free for commercial use, then it does not matter anymore.

Edit: Fixed the CSS code

Edited on Mar 02, 2013 at 18:26 by toto@k22

#11

herostime

Mar 01, 2013 at 08:04

This site is really very professional,I am a newer on CSS, very thanks for help

#12

Mar 02, 2013 at 14:48

Hey Toto,

Hmm, yeah , your code could work, but right now it doesn´t. I think theres two mistakes. Isnt the first one that there has to be one more "}" somewhere since there are 3 right now?

And also, isnt there supposed to be ";" after FONT-FAMILY:xxxx . I´m not sure cause Im no skilled programmer, but right now it does not work. If you could just give me a hint as to where these should fit in I´ll give it a go! Appreciate it!

#13

Mar 02, 2013 at 18:17

Gabriella77 said

Hmm, yeah , your code could work, but right now it doesn´t. I think theres two mistakes. Isnt the first one that there has to be one more "}" somewhere since there are 3 right now?

True. What happened is that Dafont converted the ; and } to a smiley

Noticed that I only used the "font-family" and "src", do not worry about the other properties. The @font-face will work with just those two. It is advisable to use all defined properties that are in the CSS file that was provided by Font Squirrel.

Gabriella77 said

And also, isnt there supposed to be ";" after FONT-FAMILY:xxxx . I´m not sure cause Im no skilled programmer, but right now it does not work. If you could just give me a hint as to where these should fit in I´ll give it a go! Appreciate it!

True, also. A bad habit on my part. Since "font-family" is the last property of body that is being declared, you can can leave out the ";" but it is good practice to end all properties with a ";".

What made it not work is the missing : and } at the end of @font-face

I'd like to know how the desktop font comes out for you -- whether it resolved the font issue or not.

Edited on Mar 02, 2013 at 18:19 by toto@k22

#14

Mar 03, 2013 at 14:36

Okay, I have now tried it but it still doesn't work. I think there's something I'm still doing wrong. Do you mind checking this code. I'm not sure but I think Im not sure where to put in the ":".

<html><head><style type="text/css">
@font-face { font-family: champagne_limousines;
src ('champagne_limousines.ttf') }

body {
FONT-WEIGHT: 400;
FONT-SIZE: 28px;
TEXT-TRANSFORM: uppercase;
COLOR: #c997c6;
FONT-STYLE: normal;
FONT-FAMILY: champagne_limousines;
}

</style></head>

<body>

NEWBORN WEDDING PHOTOGRAPHER

</body></html>

#15

Mar 03, 2013 at 17:48

My bad.

The line

src('champagne_limousines.ttf')

should be

src:url('champagne_limousines.ttf')

There shouldn't be a space between "url" and "("

Sorry

#16

Mar 04, 2013 at 08:55

Yes, it now works! I see the font perfectly as its supposed to look like. (It does not look the same on my wbsite where it looks strange.)
So what does this mean? That its a conversion problem? Can this information help me so that the font displays correctly on my site?

#17

Mar 04, 2013 at 18:11

I am guessing but something might had been modified during the conversion from desktop to webfont.

If only IE will render a TTF, you could have used the desktop TTF in your site. I checked up to the version of IE that was bundled with Vista (IE9?) amd it doesn't work.

If you have access to a Mac, a time limited public beta of TransType 4 is available for download at Fontlab. I have not checked if it is still available this month but it was last month. I don't have it because I am using Windows and why I am using Font Squirrel.

Why don't you try other sites that do conversions to webfont. I think there are others there that also provide that service for free.

#18

Mar 05, 2013 at 12:06

Hey again,

Okay cool. Well, the thing is that I cant try other site that do webconversion cause the wordpress theme that Im using only accept Font Squirrel files. But I think I might have come up with a solution. Although Im not sure. Im writing to my theme support to see if they can help me. Apparently the font shows badly if I put it in the custom css which is what Ive done. But if I can put it in through the theme settings it might work. I´ll keep you updated! Thanks so much for your help anyway!

#19

Mar 06, 2013 at 10:00

I´ve found the solution!

Apparently Wordpress automatically sets all the H1 headlines to Bold by default so all I had to do was to write custom CSS with font-weight:normal and then the font displayes beautifully on my site! What a simple solution that I should have thought of in the beginning - but thats what we all say, right?

Thanks for all your ideas on the matter though!

Have a nice week!

Kind Regards,

/Gabriella

#20

marty666