How to add different fonts and integrate them

Worker Joined: Feb 09, 2011 Posts: 188 Location: US

I am working on a ravenuke 2.40.01 website for a friend, and he wanted to add a font to the website so it could be used in the News section of the home page. Right now the drop down menu only list Arial, Comic sans MS, Courier New, Tahoma, Times New Roman, and Verdana.
I have been doing some reading in these and other forums, but nothing addresses adding different fonts to the overall website modules for example: news, content, stories, etc. If there is a way, what files do I need to mod to point to the new fonts?
I appreciate everyone's help. I am sorry if I am being a noob about everything. I did look for other post, and I am sure I have overlooked it somewhere.

registered · Posted: Wed Mar 09, 2011 3:34 pm

The fonts are part of the integrated FCK editor. If you add other fonts, the end user probably would not be able to see them unless their browser supports them.

Posted: Wed Mar 09, 2011 3:48 pm

The font is Army Expanded. I am with you on it. I like Verdana best for font because it stands out and is easy on the eyes. I don't know anything about the FCK editor, but where is it located and is it editable in Notepad++ ?

Posted: Wed Mar 09, 2011 6:30 pm

The technology of embedding fonts on the web has improved in recent years, although the selection of "open source" fonts that can be used legally is still somewhat limited. Coding a cross-browser solution on your own is not for the faint of heart, but luckily there is a great site, http://www.fontsquirrel.com/

They have many prepackaged @font-face kits which include multiple font formats, CSS and HTML code.

http://www.fontsquirrel.com/fontface

They also have a font-face generator, but make sure you can legally use the fonts on the web (licensing).

http://www.fontsquirrel.com/fontface/generator

Once you have one of their font-face kits, upload all of the fonts they provide (there will be several versions of the font in different formats) to YOUR_THEME/style and add the example css to the top of your style.css file. The add your new font family wherever you need it in your style.css file

This is an example of how I changed the default font in one of my themes to "JunctionRegular"

Code:

/* Generated by Font Squirrel (http://www.fontsquirrel.com) */


@font-face {


   font-family: 'JunctionRegular';


   src: url('junction_02-webfont.eot');


   src: local('?'), url('junction_02-webfont.woff') format('woff'), url('junction_02-webfont.ttf') format('truetype'), url('junction_02-webfont.svg#webfont8GGgnQl0') format('svg');


   font-weight: normal;


   font-style: normal;


}


/* Font Squirrel */


body {


  margin: 0;


  padding: 0;


  font-size: 12px;


  font-family: 'JunctionRegular',Georgia,Verdana,Helvetica,sans-serif;


  color: #7E7F71;


}

Of course this does not add it to the WYSIWYG editor, but you could add a class to your style.css

Code:

.cooltext{


  font-size: 12px;


  font-family: 'JunctionRegular',Georgia,Verdana,Helvetica,sans-serif;


  color: #7E7F71;


}

then use a span tag in your news story.

Code:

<span class="cooltext">some cool text</span>

(it will not display in the editor preview, but will once the story is posted)

Posted: Wed Mar 09, 2011 8:05 pm

I will try that, it might be a little while till I can get back to you on how it panned out.

Posted: Wed Mar 09, 2011 8:20 pm

cool

google also has a web font beta that may be slightly easier to implement, and they pay for the bandwidth... Smile

http://www.google.com/webfonts

Although the approach would be very similar, adding the font family where needed in your style.css, or creating a css class to use the font. For me personally I already rely on several external sites to enhance my own, so I prefer to handle things locally when i can, and host my own fonts.. But that's up to you.

Posted: Thu Mar 10, 2011 6:27 am

Having a clear fonts with good sizes and clear themes push your visitor to stay on your site for a long time. I love the fonts from google. Thanks for posting that spasticdonkey.