Adding Google Fonts to a Forum questions

[Lady Squid]

Forum URL: armitagearmy.proboards.com

I'm interested in adding a couple of Google Fonts to the dropdown & have followed instructions for template mod/script.


support.proboards.com/thread/459420/

I'm stuck in the Prerequisite part of the instructions post & it states to ask over in Help if there are questions.

Prerequisite:
To accomplish this first make sure you have the Google fonts installed and working correctly. Basically after you choose the fonts you like on the Google website copy the standard HTML code they generated for you

I don't understand how the HTML code is generated?! Please advise or steer me in another direction if I'm way off base! Thanks!

I'm not much of a coder so feel free to explain it in very simple terms!!

[Scott]

Lady Squid did you start here?

[Lady Squid]

Scott I sure did. I started there, then needed to follow your link under "these instructions"

If you're adding this font for use when posting (e.g. adding it to the dropdown list of fonts on the WYSIWYG page), you're not done and will need to follow these instructions regarding the template mod necessary.

support.proboards.com/thread/459420/

which took me to my question about the HTML code.  I would like to add the new fonts to the dropdown list but don't know how the HTML code is generated. Who generates it & how & where?

Prerequisite:
To accomplish this first make sure you have the Google fonts installed and working correctly. Basically after you choose the fonts you like on the Google website copy the standard HTML code they generated for you and place it in your Forum Wrapper template directly above the line that says $[head].

I'm probably missing something obvious. Thanks!

[Scott]

Lady Squid the HTML code is generated at the Google Webfonts page. If you follow the directions in the link I provided (for Quick Use) or on the Google site for building a collection and following the steps to choose, review, and use... on the Use page it lists the HTML code you need.

[Lady Squid]

Apr 23, 2016 9:56:49 GMT -8 Scott said:

Lady Squid the HTML code is generated at the Google Webfonts page. If you follow the directions in the link I provided (for Quick Use) or on the Google site for building a collection and following the steps to choose, review, and use... on the Use page it lists the HTML code you need.

Thank you. So I was missing something obvious. I'll give that a try & will only post back here if I'm still confused. Thank you!

[Lady Squid]

Well, apparently I only needed to add code to the Posting Page template, and use the Google Fonts plugin. The fonts now display in my Reply text dropdown. ;D

When I did this & also had the extra code in the Forum Wrapper, the fonts displayed twice. Taking the code out of the Wrapper fixed it.

Last question - is there a way to get these new fonts into the Quick Reply text dropdown?


MTA - saw in the thread that someone had already asked about Quick Reply:

support.proboards.com/post/5295214

but I didn't know if this code was supposed to replace the code in the first post (in that thread) or if all of it should be there. And if so, does it go at the bottom of the posting page template, under the first code?

[Scott]

Apr 23, 2016 10:37:50 GMT -8 Lady Squid said:

Last question - is there a way to get these new fonts into the Quick Reply text dropdown?

There may be.  That is added by the Quick Reply BBCode Buttons plugin.  You can check out the support thread for that plugin here.  There may be a fix listed.

[Lady Squid]

Thanks - will check out that thread & see if anyone has asked & solved this.

[Scott]

Lady Squid
Good luck, if you find a solution, feel free to post or link it back here. It will help others that see this thread. (And me, LOL )

[Lady Squid]

Apr 23, 2016 12:03:32 GMT -8 Scott said:

Lady Squid
Good luck, if you find a solution, feel free to post or link it back here. It will help others that see this thread. (And me, LOL )

Just searching for "font" in that thread brought up a lot of responses. Might take me a while. ;D

[Lady Squid]

Ok, here's what I've discovered so far. (Sorry if this was obvious, it wasn't to me!)

At least on our forum, either putting the HTML code in the Forum Wrapper, OR using the plugin, results in the google fonts being listed in the REPLY Font Face dropdown. I've got it in there both ways, some fonts for each.

Neither of these result in the google fonts displaying in the QUICK REPLY Font Face dropdown.

I'm kind of back to where I was a few posts up. I didn't see anything in the Quick Reply plugin thread which addressed this (I only looked through the 4 pages which had the word "font" in a post).

But there is this post in the Add Google Webfonts to Picker thread

support.proboards.com/post/5295214/thread

which makes me ask if the code there replaces the code already added to the template mod, or if it should be added, and if so, where? Is this code supposed to accomplish what I'm asking or am I (again) missing something?

Would you rather me ask this in the Add Google Webfonts thread?

Thanks again!!

[Scott]

Chris any thoughts on this ^ thanks in advance.

[xx1]

I received help on this (adding fonts to your default font list) from another forum owner. It works perfectly for me.

Post this in your Global Header
--------------------------------------------------------------------------------------------------------------

<!-- Add Google Webfonts to Font Picker (GLOBAL HEADER) Nov 20, 2013 -->
<script type="text/javascript">
(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>

<!-- Quick Reply Box -->
<style type="text/css">
.button-fontName .select_menu_list{
max-height: 500px;
overflow-y: auto;
overflow-x: hidden;
padding-right: 20px;
}
.quick-reply .button-fontName .select_menu_list { max-height: 300px; }

</style>

----------------------------------------------------------------------------------------------------

...and then put your Google font list in your Forum Wrapper, between your Line 5  and Line 6  (important):

Line 5 <title>$[title] | $[forum.name]</title>


<link href='http://fonts.googleapis.com/css?family=Rock+Salt|Architects+Daughter|Courgette|Coming+Soon|Quicksand|Michroma|Finger+Paint|Trade+Winds|Permanent+Marker|Stardos+Stencil|Homemade+Apple|Limelight|Eagle+Lake|Petit+Formal+Script|Gabriela|Maconda+Swash+Caps|The+Girl+Next+Door|Crafty+Girls|Meddon|Playfair+Display|Calligraffitti|Syncopate|Montserrat Alternates|Metamorphous|Berkshire+Swash|Merienda+One|Julius+Sans+One|Inknut+Antiqua|Ribeye+Marrow' rel='stylesheet' type='text/css'>

 
Line 6 $[head]



You can add more fonts as you go along, or delete some you don't like. If there are two words to the font, put + between the words, like Finger+Paint etc.

The Forum Wrapper for each theme has to be amended.

[Lady Squid]

Questions for you - does your font list, as coded above, also appear in the QUICK REPLY Font Dropdown menu? It looks like it does, because I see "quick reply" in your code there.

Where in the Global Header does the first batch go?

(In case someone doesn't know, after you change one theme, you can export that theme to the others, you don't have to put the codes in for each one).

Thank you for posting!

[Lynx]

Lady Squid,

The Global Header (Admin > Structure > Headers & Footers > Global Header) code is not theme specific, as it would apply to all themes that had the Forum Wrapper code added to its Forum Wrapper. So, it should not matter where the Global Header code is placed - as long as it's in the Global Header, it'll still get executed. Only the Forum Wrapper code would be theme-specific, so that code would have to get copied into every theme's Forum Wrapper template that would utilize it.