Font Family

Permalink 2 users found helpful
How do I add fonts like Vivaldi to the font family options in the text editor??

View Replies: View Best Answer
mesuva replied on at Permalink Reply
mesuva
Go into the Dashboard, then Sitewide Settings.

Scroll down to Rich Text Editor and choose Custom. You'll see the config for the TinyMCE editor displayed. In that, you can find a line that says theme_concrete_fonts.

Add to that line: Vivaldi=vivaldi; (take note on the pattern for how the fonts are specified).
JD46 replied on at Permalink Reply
Could you elaborate on that? as in the pattern of specification you spoke about. Thanks :D
JD46 replied on at Permalink Reply
Also, where Do I enable the font family option for 'custom' from, because I added Vivaldi and I can't choose it since there's not drop-down list.
mesuva replied on at Permalink Best Answer Reply
mesuva
You may need to have at look at the TinyMCE config if you want to modify this further, but try this:

theme : "concrete", 
plugins: "inlinepopups,spellchecker,safari,advlink",
editor_selector : "ccm-advanced-editor",
spellchecker_languages : "+English=en",   
theme_concrete_buttons1 : "bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,|,hr,|,styleselect,formatselect,fontsizeselect,fontselect",
theme_concrete_buttons2 : "bullist,numlist,|,outdent,indent,|,undo,redo,|,link,unlink,anchor,image,cleanup,help,code,forecolor",
theme_concrete_blockformats : "p,address,pre,h1,h2,h3,div,blockquote,cite",
theme_concrete_toolbar_align : "left",
theme_concrete_fonts : "Vivaldi=vivaldi;Andale Mono=andale mono,times;Arial=arial,helvetica,sans-serif;Arial Black=arial black,avant garde;Book Antiqua=book antiqua,palatino;Comic Sans MS=comic sans ms,sans-serif;Courier New=courier new,courier;Georgia=georgia,palatino;Helvetica=helvetica;Impact=impact,chicago;Symbol=symbol;Tahoma=tahoma,arial,helvetica,sans-serif;Terminal=terminal,monaco;Times New Roman=times new roman,times;Trebuchet MS=trebuchet ms,geneva;Verdana=verdana,geneva;Webdings=webdings;Wingdings=wingdings,zapf dingbats",
theme_concrete_font_sizes : "1,2,3,4,5,6,7",
theme_concrete_styles: "Note=ccm-note",
spellchecker_languages : "+English=en"


One thing though, and this may be a personal choice, but why are you giving the option of the font in the first place? I normally remove the font select, leaving the font to be specified via the stylesheets.
JD46 replied on at Permalink Reply
Well I could brush my CSS, but the reason i'm not using it is...I'm.. a ..noob.. I don't know how CSS works here! I'd be glad if you could guide me! :D Thanks for all the help so far!
mesuva replied on at Permalink Reply
mesuva
I'd suggest doing a bit of research into CSS, it will save you a lot of time down the track.
Perhaps start with a few basic tutorials on the web, then trying to apply some of that knowledge to editing a stylesheet for a theme in Concrete5.

As long as you keep a backup of the CSS, you should be able to quite easily experiment.

Just one further note about your font, keep in mind that you can't rely on someone having a font installed. If you format something with a font you have, you'll see it in that font, but others wont (I don't have the Vivaldi font for example) - others will see the text in a replacement font.

You either have to pick a 'common' web font that nearly everyone has (like Arial, Times, Verdana, etc), or do some extra work to make it available to the browser (by linking it in in a special way).
JD46 replied on at Permalink Reply
Linking it in a special way? just elaborate a bit I'll do the research from there on, thanks again!
mesuva replied on at Permalink Reply
mesuva
Sorry if I'm being a bit vague!

I said special way, because you can't just link up any font that you have, for a few reasons. For one, you might be violating their licence, but more technically, browsers need special font formats for the web and they differ between browsers.

The best way to do it (in my opinion) is to use something like Typekit or Google Web Fonts.

http://typekit.com/
http://www.google.com/webfonts

These guys provide fonts (both free and paid) that are allowed to be linked up. On top of that, they take care of the issues across different browsers, so with them you just add an extra line of code like:

<link href='http://fonts.googleapis.com/css?family=Swanky+and+Moo+Moo&v2' rel='stylesheet' type='text/css'>


You pick what font and styles and then they give you the code to link it in.
Hope that helps!
JD46 replied on at Permalink Reply
Just a short question, where in the CSS exactly would I have to place that line? Thanks soo much for all you're effort, you've really helped a lot! :D Thanks again
PatrickHeck replied on at Permalink Reply
PatrickHeck
You don't put that in the CSS file. The best place would be your mytheme/elements/header.php file.
JD46 replied on at Permalink Reply
Oh okay, Argh! I don't know how to handle PHP files, thanks! :)