Using custom fonts

[Foster660]

I don't know if this is a well known technique, but I couldn't find much info about it on these forums when I was first playing with the idea... I thought I'd give my findings out there so if anyone else is looking for the same idea, this might help...

What I was trying to do is have specific fonts in my store for specific functions. It seems that any font I want on my store must be on the end-users computer to see it (or else it reverts to the default font-family). The option I came up with is to store fonts locally on the server, and when a customer views the page, the font is automatically shown on their web browser, no matter if they have it in their font list or not.
Here's what I did -

1: Upload your font to includes/templates/YOUR-TEMPLATE/css folder
(in my test case, I downloaded a font called 'bromello.ttf' from one of the many font sites and uploaded it as 'bromello.ttf')

2: Edit your stylesheet.css
I added this code at line 154, but it's probably not critical where it goes.

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

3: I added a new 'h9' to the stylesheet, so I could easily call up the new font.
... at line 159

h9 {
	font-family: MytestFont;
	color: black;
	font-size: 5em;
	}

Wherever you want your special font (product description?), do something like this -

<h9>This is my special Font!</h9>

...and it will be shown in your special font on your customer's screen

I hope this has helped someone else
(and, as a post note: I'm not using this for now - it didn't quite do what I was looking for so I'm back to the drawing board)

John

[carlwhat]

rather than creating a new tag, which browsers may or may not interpret correctly, i would make it as a class...

.customFont {
	font-family: MytestFont;
	color: black;
	font-size: 5em;
	}

<span class="customFont">This is my special Font!</span>

best.

[Foster660]

rather than creating a new tag, which browsers may or may not interpret correctly, i would make it as a class...

Thanks for the tip, that makes sense and it's something I hadn't thought of...
I've done as you suggested and learned a lot about classes in the process

As a post note on what I'm trying to do, I've managed to have a 'canvas' element beside the text attributes, with the idea that when a customer enters the text they want engraved on a name tag, it will show as a preview in the actual font (and it will show if they have entered too many characters for the size of the name tag). Here's what I'm aiming for...



Now I just need to figure out how to get the text attribute to show up on the canvas element... Jscript I think - something else to learn!

John