Uploading Different Fonts

[Shaliza]

I'm not sure if this is the correct board for this question, so feel free to move it, if needed. 

How do I upload new fonts to a theme I'm making? For example, I used the font "Lucida Calligraphy" for board titles, and I can type it into the Advanced Styles and CSS but have to do this each time. How can I upload this font, and perhaps others so that they show up in the CSS ready for use?

Thanks for the help. I'm truly a novice when it comes to coding so my knowledge of all this is extremely limited.

[Nscalerr 🐺]

Hi Shaliza

Place this in your Global Header to start with. Note: if you have something like this in your Forum Wrapper template, move it to the Global Header and add the font Lucida Calligraphy to it. Add a + sign between Lucida and Calligraphy - like so > Lucida+Calligraphy. Also if you want to have more than one font listed you can add them to the first bit of coed with a | between each one.

<link href='https://fonts.googleapis.com/css?family=Lucida+Calligraphy' rel="stylesheet" type='text/css' />

Then add the following javascript to your Global Header.

<script type="text/javascript">
   /* Add Google Webfonts to Font Picker (GLOBAL HEADER) Nov 20, 2013 */
   (function(){
       var gwf = {"plugin": proboards.plugin._plugins["google_web_fonts"], "fonts":[], "p":$.ui.wysiwyg.prototype}
       if(gwf.plugin){
           $.each(gwf.plugin.settings.fonts, function(){
               gwf.fonts.push(this.name.replace(/\s/g,"+") + (this.weights.length?":"+this.weights:"") );
           })
       }
       $('link[href*="fonts.googleapis.com"]')
           .each(function(i,e){
           gwf.fonts = gwf.fonts.concat($(this).attr('href').split(/\?family=/)[1].split(/\|/));
       })
       if(gwf.fonts.length){
           var wcreate = gwf.p._create
           gwf.p._create = function(){
               if(proboards.dataHash.css_wysiwyg_style){
                   proboards.dataHash.css_wysiwyg_style += '<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=' + gwf.fonts.join('|').replace(/\s/g,"+") + '" />';
               }
               return wcreate.apply(this, arguments)
           }
           var menu = gwf.p._getFontNameMenu;
           gwf.p._getFontNameMenu = function(){
               var ret = menu.apply(this,arguments);
               $.each(gwf.fonts, function(j,f){
                   var fontName = f.split(/:/)[0];
                   ret.menu.append(
                       $('<li></li>').addClass(fontName.replace(/\+/g,"_"))
                       .append('<a style="font-family:' + fontName.replace(/\+/g," ") + '">'+fontName.replace(/\+/g," ")+'</a>')
                   )
               })
               return ret;
           }
       }
   })()
</script>

[Nscalerr 🐺]

This is the one from my forum, just as an example for adding multiple fonts.

<link href='https://fonts.googleapis.com/css?family=Architects+Daughter|Atomic+Age|Berkshire+Swash|Eater|Cedarville+Cursive|Cherry+Cream+Soda|Combo|Coming+Soon|Courgette|Gabriela|Great+Vibes|Homemade+Apple|Indie+Flower|Inknut+Antiqua|Limelight|Mountains+of+Christmas|Nova+Script|Permanent+Marker|Petit+Formal+Script|Pinyon+Script|Quicksand|Redressed|Ribeye+Marrow|Shadows+Into+Light|Tangerine|Vast+Shadow|Yellowtail|Yesteryear' rel="stylesheet" type='text/css' />

[Shaliza]

Thanks again Nscalerr 🐺. I really appreciate all this help.

Will try messing with all this tomorrow and let you know how it turns out.

[Shaliza]

Hello again Nscalerr 🐺

I added the coding you suggested to the Global Header and added a few fonts that I wanted, and it works great. I see that these start to show up in the dropdown menu in each of the replies so members can choose which ones they would like to have in their posts. Thanks again.

I have another question though. When I use the CSS/Visual Editor, I have to manually enter in the specialty font I want like Lucida Calligraphy since it does not show in the drop down menu. Is there a way to add more fonts to the CSS drop down menu or is this only an option for the replies on the board?

Thanks so much for taking the time to reply. I really appreciate it. 

xo Shaliza >^..^<

[Nscalerr 🐺]

I have a feeling it is not possible to add them to the actual drop down menus in the Visual Editor. But this may change when V6 comes out.

Note: I am only guessing that it might be added in V6, though you could do a Feature Request for it with the proviso that it might not happen.

[Shaliza]

Thanks again for the help. I really appreciate it.