Adding custom font through CSS-option


Author Message
Seppe

Posted: 10/10/2012
Quote message 

In Artisteer V3, I've putted some extra code (= @font-face code) in the CSS options to use a specified font.
I've copied this font (with all its extensions) to the template map and it worked.

Now I try the same with Artisteer V4, and it doesn't work anymore.
Can someone advise please ?

thnx
 
Paul

Posted: 10/12/2012
Quote message 

I want to do a similar thing, add a web font and found your post so I too will be interested in how.
 
Seppe

Posted: 10/12/2012
Quote message 

Paul
the @Font-face code is working
Just put it as an extra to your CSS-options.
in your text, use the <SPAN> code to use the special font


 
Keith

Posted: 10/16/2012
Quote message 

Does anyone have step by step instructions for adding additional fonts to an Artisteer 4 designed website?

I am using Joomla 2.5 and pretty much have the creation of the 4 types of font files needed and how to get them. I understand that all 4 need to be uploaded to a folder. Plus, after much confusion and consternation, I now get that a CSS file needs to be created specifically for each font and put there as well. I want to clarify exactly what should be in that file, code wise and also how to get the URL address correct.

I am just stuck as to where to put the files on the server and how/where to put the additional coding. I am seeing so many different methods and tutorials that I'm confused as to which is the cleanest & easiest way. I would like to get the new Fonts not only added to the site, but also make them a choice in JCE Editor for example. There are also lame extensions that don't work, etc that I am pretty frustrated at this point. I need to figure out exactly what files need to be modified, where they are located, what the EXACT names are that need to be changed and where I can find them in Joomla administration.

Are there some complete and accurate, step-by-step instructions somewhere? Thanks all for your Help! I'm sure I am not the only one with this question.


 
Seppe

Posted: 10/16/2012
Quote message 

@Keith

first you put your @font-face code in the CSS-options of your template.
Then you make your text-layout in the CSS options

For example:


@font-face {
font-family: 'ShoestringSSiRegular';
src: url('shoestringssi-webfont.eot');
src: url('shoestringssi-webfont.eot?#iefix') format('embedded-opentype'),
url('shoestringssi-webfont.woff') format('woff'),
url('shoestringssi-webfont.ttf') format('truetype'),
url('shoestringssi-webfont.svg#ShoestringSSiRegular') format('svg');
font-weight: normal;
font-style: normal;

}

.BLUE {
font-family: 'ShoestringSSiRegular';
color: #0000FF;
font-weight: bold;
}


then you put your files for the font on your server.
you export from Artisteer, and load your template on the server

when everything is ok, you start layouting in your text.
Al the wors you want with this specified fond and/or text-layout you put in

<span class="BLUE">......</span>
 
Dennis

Posted: 1/28/2013
Quote message 

Seppe's method above is pretty much what I wound up doing except I omitted the .BLUE material altogether since I had used the Artisteer 3.1 software to assign all the fonts already. It was not needed for me.

Also note that you need to upload your fonts to the css folder inside your template folder for the url reference to work without any further changes.

Wish I found this post while I was working through all this. Hope it helps someone else.:-)
 
Gianluca

Posted: 2/4/2013
Quote message 

Just a quick question Seppe

How do i just apply font face to the headline font and not the rest of the website. do i just add the code thats above change it to my requirements?

Thanks