Font Family2 users found helpful
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).
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.
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).
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.
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!