Font Family
Permalink 2 users found helpful
How do I add fonts like Vivaldi to the font family options in the text editor??
Could you elaborate on that? as in the pattern of specification you spoke about. Thanks :D
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.
You may need to have at look at the TinyMCE config if you want to modify this further, but try this:
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.
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.
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!
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).
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).
Linking it in a special way? just elaborate a bit I'll do the research from there on, thanks again!
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:
You pick what font and styles and then they give you the code to link it in.
Hope that helps!
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!
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
You don't put that in the CSS file. The best place would be your mytheme/elements/header.php file.
Oh okay, Argh! I don't know how to handle PHP files, thanks! :)
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).