[Template/Script]Add Google Webfonts to Font Picker

[xx1]

Anyone? 

[Lady Squid]

Apr 20, 2016 8:44:48 GMT -8 xx1 said:

Anyone? 

Hi - it says in the original post that if you need help with this, to ask in the help boards - so asking here in this thread probably isn't the way to go.

I also need help (I don't understand the "copy the standard HTML they generated for you" - I don't know how to generate that!) so I've posted in Support. Hope this helps both of us.

support.proboards.com/thread/580387/explain-generate-html-google-fonts

[xx1]

Thanks Lady Squid. I followed the link and posted a solution there.

[gtv22]

Jan 20, 2015 22:12:06 GMT -8 Chris said:

<snipped..
Google hosts thousands of fonts for everyone to use and this script is for those who choose to use Google to host their webfonts. If you use another website to host your fonts or even host them yourself then this script would not be for you (although a small tweak could make it work for other hosts as well).
...

Hi Chris ,

I use my own fonts as well as Google fonts. I have used your code successfully for the google fonts for quite some time. Thank You so much for sharing it. What small tweak would I have to make in order to get both Google's fonts and my own fonts to be available in the font picker?

gtv22

[Chris]

Dec 6, 2017 15:55:19 GMT -8 gtv22 said:

Jan 20, 2015 22:12:06 GMT -8 Chris said:

<snipped..
Google hosts thousands of fonts for everyone to use and this script is for those who choose to use Google to host their webfonts. If you use another website to host your fonts or even host them yourself then this script would not be for you (although a small tweak could make it work for other hosts as well).
...

Hi Chris ,

I use my own fonts as well as Google fonts. I have used your code successfully for the google fonts for quite some time. Thank You so much for sharing it. What small tweak would I have to make in order to get both Google's fonts and my own fonts to be available in the font picker?

gtv22

By your "own fonts" I'll take that to mean fonts you host yourself on your own domain instead of having Google do the hosting and choosing which fonts they want to actually host? It's been a few years (so no guarantee things have not changed once again) but the mentioned tweak involves setting up CORS on the domain that hosts the font so javascript can then have access to the contents of the css files hosted on the alien server. Due to same-origin protection rules a browser won't allow access to the contents of resources from another domain so an exception such as CORS needs to be made by the server to let the browser know it is safe to allow access. A change to the script could then be made to also check inside the CSS for the names in addition to relying just on the names appearing in the URL
[I should add that access via javascript to the contents of cross-domain loaded css files is granted not only via CORS but also in conjunction with the presence of the crossorigin="anonymous" attribute on the <link> tag and is not supported by all browsers the last time I checked]

Googlefonts allows CORS by default but it isn't even necessary since it includes the font names in the URL itself

---

Edit:The other option which would not require a change in the script or the server would be to fake the link so it appears to be coming from googlefonts and add the name of the font or fonts into the url just like google does:

<link href="//fonts.myOwnServer.com/css/mycustomfonts.css?fakeout=fonts.googleapis.com&?family=My+Custom+Font1|My+Custom+Font2" rel="stylesheet" type="text/css">

disclaimer: haven't really tested this but theoretically it should work since it supplies the same info on the loaded fonts as google does. The inclusion of both "&?" is unconventional but I've seen it work across multiple platforms before without browser complaint. The script makes no attempt to discern if the domain match is from the actual domain part of the URL and technically those periods should be encoded (%2E) when appearing in the query part of the URI but we are relying on the browser to do that for us so the script can then capture those periods in all its glory (in other words  it should hopefully work... let me know your results)

[gtv22]

Dec 6, 2017 16:18:00 GMT -8 Chris said:

Dec 6, 2017 15:55:19 GMT -8 gtv22 said:

Hi Chris ,

I use my own fonts as well as Google fonts. I have used your code successfully for the google fonts for quite some time. Thank You so much for sharing it. What small tweak would I have to make in order to get both Google's fonts and my own fonts to be available in the font picker?

gtv22

By your "own fonts" I'll take that to mean fonts you host yourself on your own domain instead of having Google do the hosting and choosing which fonts they want to actually host? It's been a few years (so no guarantee things have not changed once again) but the mentioned tweak involves setting up CORS on the domain that hosts the font so javascript can then have access to the contents of the css files hosted on the alien server. Due to same-origin protection rules a browser won't allow access to the contents of resources from another domain so an exception such as CORS needs to be made by the server to let the browser know it is safe to allow access. A change to the script could then be made to also check inside the CSS for the names in addition to relying just on the names appearing in the URL

Googlefonts allows CORS by default but it isn't even necessary since it includes the font names in the URL itself

---

Edit:The other option which would not require a change in the script or the server would be to fake the link so it appears to be coming from googlefonts and add the name of the font or fonts into the url just like google does:

<link href="//fonts.myOwnServer.com/css/mycustomfonts.css?family=My+Custom+Font1|My+Custom+Font2&fakeout=fonts.googleapis.com" rel="stylesheet" type="text/css">

disclaimer: haven't really tested this but theoretically it should work since it supplies the same info on the loaded fonts as google does. The script makes no attempt to discern if the domain match is from the actual domain part of the URL and technically those periods should be encoded (%2E) when appearing in the query part of the URI but we are relying on the browser to do that for us so the script can then capture those periods in all its glory (in other words  it should hopefully work... let me know your results)

Thanks for your quick reply.

Yes, I have hosted my fonts on my own server and have 

Header set Access-Control-Allow-Origin: URL
I added them in the CSS using @font-face

They do work on the forum in general, but I would like to add them to the drop down. I tried your second option and I couldn't get it to work. I don't know if I botched the attempt or not. A lot of this is still very new to me.

[Chris]

I would need to see the attempt in action to determine what is going wrong, feel free to PM me a forum url where you have tried this

---

Update:

If you use a font host other than Google then the modified script below appears to be working for the user above and may also work for you

1. Replace your current code with the following:
   
   

   <script>
   (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({name: this.name.replace(/\s/g,"+") + (this.weights.length?":"+this.weights:"")} );
   			gwf.fonts[gwf.fonts.length-1].url= '//fonts.googleapis.com/css?family=' + gwf.fonts[gwf.fonts.length-1].name;
   		})
   	}
   	$('link[href*="fonts.googleapis.com"][href*="?family="], link[as="font"][href*="?family="]')
   	.each(function(i,e){
   		for(var a = 0, b = proboards.escape_html(e.href).split(/\?family=/)[1].split(/&/)[0].split(/\|/); a < b.length; a++){
   			//gwf.fonts = gwf.fonts.concat($(this).attr('href').split(/\?family=/)[1].split(/\|/));
   			gwf.fonts.push({name:b[a], url:e.href })
   		}
   	})
   	if(gwf.fonts.length){
   		var wcreate = gwf.p._create
   		gwf.p._create = function(){
   			if(proboards.dataHash.css_wysiwyg_style){
   				var file={};
   				gwf.fonts.forEach(function(e,i,u){
   					if( !(e.url in file) ){
   						file[e.url]= !0;
   						proboards.dataHash.css_wysiwyg_style += '<link rel="stylesheet" type="text/css" href="' + e.url + '" />';
   					}
   				})
   			}
   			
   			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.name.split(/:/)[0].replace(/\+/g," ");
   					ret.menu.append(
   						$('<li></li>').addClass(fontName.replace(/\s/g,"_"))
   						.append('<a style="font-family:' + fontName + '">'+fontName+'</a>')
   					)
   			})
   			return ret;
   		}
   	}
   })()
   </script>

   
   
   
2. Edit your <link> tag or tags to denote which one is handling fonts as opposed to just CSS by one or even both of the following methods (in red) as well as adding a listing of the font names (in blue) making sure to escape special characters such as spaces, puctuations, etc in those font names and separating each name with the pipe symbol ( "|" ) the way Google does it.
   
   <link href="//fonts.myOwnServer.com/css/mycustomfonts.css?fakeout=fonts.googleapis.com&?family=My+Custom+Font1|My+Custom+Font2" rel="stylesheet" type="text/css" as="font">