Images and text question

[Bluie]

Hello

I use the Jenna Sue font on a Website:



but as most people don't have that font installed in their Windows folder and therefore can't see it (most browsers will default to displaying Times Roman), I thought it best to use a gif image instead. This is 60pt Smooth Jenna Sue on a transparent background:



The difference in quality is alarming, and I wonder what would be the best way to replicate, as far as possible, the original, please.

Thank you.

Blueie

 

[MrToM]

You can embed fonts into web pages for this very reason.

Google around for 'Embedding Fonts Into Web Pages'....there are lots of examples.

If that fails then do as you've done so far but save the [rasterised] text as a 24bit PNG file.....using File > Save For Web...then place into your document.

Gifs do not support any degree of transparent gradients, its either all or nothing, hence the white outline....gradients are replaced with white.

24bit PNG's are more commonly used now anyway as most modern browsers support them.

Any problems just shout.

Regards.
MrTom.

 

[Bluie]

Many thanks, Mr Tom

So, if I have the following in my external CSS style sheet:

@font-face {
font-family: "Jenna Sue";
src: url("JennaSue.eot")
}

@font-face {
font-family: "Jenna Sue";
src: url(JennaSue.ttf")

}

visitors should see the fonts?

Thanks again.

 

[MrToM]

Yeah, its something like that, been a while since I did any web stuff.

Just make sure that:
1. The URL points to the right font file on your web server.
(In your example the font file would need to be in the same folder as the .css file calling it)

2. The font-family 'name' IS the name of the font, NOT the name of the file. Its also cAsE sEnSiTiVe !!
(This caught me out many a time...it has to be exact.)

You should be good to go if all that is ok....are you testing this locally or on a web host?
I'm more than willing to test it for you if you PM me the page url.

Hope that helps.

Regards.
MrTom.

PS...just had a thought:
I don't know if ALL browsers support font embedding so you may want to just check that out.
Most modern PC browsers do but I couldn't say for tablets or mobile devices.
(To be honest, tablets didn't exist the last time I wrote a web site..LOL)

At least you have an alternative (24bit PNG) if it fails.....png's should now work everywhere.

 

[Bluie]

(In your example the font file would need to be in the same folder as the .css file calling it)

Oh, yes. Thanks for pointing that out! Are you able to see the font here: http://www.bayingwolf.com/New1/index1.html

Thanks again.

 

[MrToM]

Hmmm...not in Firefox (32.0.3) no.

I get this:



You can see from the image that no font is loaded....and I know for a fact ttf fonts work in FF.

I'll scour through some of my old web stuff and see if my .css code was any different.

Regards.
MrTom.

 

[Bluie]

That's disappointing. Many thanks for digging through your old files!

 

[MrToM]

Ah....right...I see what you've done! (I think)

The ref to "jenna sue" is in the HTML file......this won't work.

At the very TOP of your styles.css file put the code for the embedded fonts...so:

@font-face {
    font-family: jenna_sue;
    src: url("jenna_sue.ttf")
}

Just make sure that the URL for the font points to the exact location of the font file.....this may have to be absolute but I'm not sure.
If in doubt just put the font file in the same directory as the styles.css file and then the url will be as above. (Or whatever the fonts filename is)

From here, you then simply use:

    H1{
        font-family:jenna_sue;
    }

The @font-face bit sets up the name of the font and denotes where the font file can be found.
The font-family bit then assigns that font to whatever tag you want.

I was wrong earlier, the name doesn't have to be exact....in my example above "jenna_sue" could be "duck_and_a_hosepipe".
As long as you reference "duck_and_a_hosepipe" in the following css then it will find it and use whatever font you assign to it...in this example, jenna_sue.ttf

If the name you use contains spaces then it needs quotes around it.....but you knew that.

Don't forget to remove the code from the HTML file as well......it will take priority if you don't.

View attachment FontTest.zip is some example code to help understand the structure and code.
Just unzip it somewhere, open the 'Font test' folder, right click the HTML file and open it in your browser...which is hopefully FireFox.
You should get 'Marlboro Font' center of the page @ 200px high.

Regards.
MrTom.

 

[Bluie]

Many thanks for all the trouble you have taken, Mr Tom!

I will use this format:

<style>

@font-face {
    font-family: "Jenna Sue";
    src: url('../css/"Jenna Sue".ttf'); 
}


h1{


font-family: "Jenna Sue", Arial, Serif;
color: #E93AE7;
}

and then:

<h1>Tomorrow's Women Wirral</h1>

because when I look at the page locally with Jenna Sue in my Windows fonts folder, it works in quotation marks (I have not tried it with the underscore). This: src: url('../css/"Jenna Sue".ttf'); shows that the fonts are in my CSS folder on the server:



I have uploaded the amended file!

Thank you for the download! I will take a look!

 

[MrToM]

I will use this format:

@font-face {
    font-family: [COLOR=#ff0000]"Jenna Sue"[/COLOR];
    [COLOR=#ff0000]src: url('../css/"Jenna Sue".ttf'); [/COLOR]
}

This code is wrong on 3 accounts...
1. You cannot put quotes around the font name only, you have to quote the URL as a WHOLE.
2. The filename is actually just wrong....where did the space come from?
3. The URL is wrong too. the font is in the SAME folder as the .css file so you don't need the '../css/' part..its just a direct link to the file.

@font-face {
    font-family: [COLOR=#00ff00]JennaSue[/COLOR];
    [COLOR=#00ff00]src: url('JennaSue.ttf'); [/COLOR]
}

IF you wanted to put the fonts in that 'fonts' folder you have then the URL would change thus:

@font-face {
    font-family: [COLOR=#00ff00]JennaSue[/COLOR];
    [COLOR=#00ff00]src: url('../fonts/JennaSue.ttf'); [/COLOR]
}

The '../' means "come out of this, [the css], folder", then find a folder called "fonts", and get the file "JennaSue.ttf" from it.

The URL's have to be relative to the file that calls them, in this case the .css file.

Try that and see what happens....make sure the path to the font file is correct!

Regards.
MrTom.

 

[Bluie]

With this:

@font-face {    font-family: JennaSue;
    src: url('JennaSue.ttf'); 
}


h1{


font-family: JennaSue, Arial, Serif;
}

I can't see it in my own browser (IE11) now.

I will play around with it in a couple of browsers - I also have Safari on Windows and Chrome - and see what happens!

 

[MrToM]

Here is that example file I posted in FireFox, Chrome and IE11. (40px high text)



As you can see, IE11 is the bad apple in the cart again but, it does work.

Regards.
MrTom.