examples/index4SecondaryComposite.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Select the Google Fonts as secondary.</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<style>
#doubleGoogleFontsPicker{
	background-color : #f8f8f8;
	margin-top: 1vh;
	margin-left: 1vh;
	padding: 0vh 2vh 2vh 2vh;
	box-shadow: 0.5vh 0.5vh 0.5vh 0.5vh gray;
	border-radius: 0.5vh;
	display: none;
	position:absolute;
	width:auto;
	height:auto;
	z-index:1000;
}
#preview4DGFP{
	background-color : #ffffff;
	padding: 0vh 0.5vh 0vh 0.5vh;
	line-height: 0.8vh;
	border-width: 1px;
	border-style: solid;
	border-color: black;
}
.preview4DGFP{
	margin-top: -0.1vh;
}
</style>
<link class="linked4DGFP" href="https://fonts.googleapis.com/css?family=Lato|Noto+Sans+JP" rel="stylesheet">
</head>
<body>
  <div id="origin" style="font-family: Lato, 'Noto Sans JP';">
	<p>Google Fontsを利用して、Web上のフォントを変更します。</p>
	<p>日本語フォントに異なるフォントが指定できます。<p>
	<p>指定前のフォント設定が、単一フォントの場合、指定フォントに置き換わります。</p>
	<p>合成フォント（英文フォント⇒和文フォント）の二種類のフォントが指定されている場合は、和文フォントのみ変更します。</p>
	<p>Use Google Fonts to change the font on the web.</p>
	<p>You can specify a different font for the Japanese font.<p>
	<p>If the font setting before specification is a single font, it will be replaced with the specified font.</p>
	<p>If two types of fonts (composite font (English font => Japanese font)) are specified, only the Japanese font will be changed.</p>

	<button id="changeFonts">Change Font</button>
  </div>
  <div id="doubleGoogleFontsPicker">
	  <p><label>Font: </label>
		  <select id="secondaryFont4DGFP">
			<option value="none">Select Font Famil</option>
		  </select>
	  </p>
	  <label>Preview: </label>
	  <div id="preview4DGFP">
		<p>This is a test when google fonts is </p>
		<p>already set before the change. </p>
		<p>English font Lato is set in advance for</p>
		<p>the style attribute of div # orgin, but</p>
		<p>it is not affected by changes in Japanese font.</p>
	  </div>
	  <p><label>Category: </label><br/>
		  <input type="radio" name="category4DGFP" value="all" checked>All</input>
	  	  <input type="radio" name="category4DGFP" value="sans-serif">sans-serif</input>
	  	  <input type="radio" name="category4DGFP" value="serif">serif</input><br/>
	  	  <input type="radio" name="category4DGFP" value="handwriting">handwriting</input>
	  	  <input type="radio" name="category4DGFP" value="display">display</input>
	  	  <input type="radio" name="category4DGFP" value="monospace">monospace</input>
	  </p>
	  <button id="cancel4DGFP">cancel</button> 
	  <button id="submit4DGFP">set</button>
  </div>

<script src="../jquery.googleFontsPicker.js"></script>
<script>

   $(function(){
	let D=true;
	$(document).on('click','#changeFonts',function(event){
		let left = event.clientX;
		let top  = $(this).offset().top;
		let defaultFont = $("#origin").css('font-family');

		doubleGoogleFontsPicker(
			left,
			top,
			defaultFont,
			{
				sort: 'popularity',
				secondaryFont:{
					maxmum: 100,
					subsets: 'japanese'
				},
				selector:{
					dialog: '#doubleGoogleFontsPicker',
					secondaryFont: '#secondaryFont4DGFP',
					preview: '#preview4DGFP',
					category: 'input[name="category4DGFP"]:radio',
					cancel: '#cancel4DGFP',
					submit: '#submit4DGFP'
				}
			}
		).then(function(fontFamilyString){
			$("#origin").css('font-family',fontFamilyString);
			if(D) console.log($("#origin").css('font-family'));
		},function(msg){
			if(msg === 'api-key')	alert('You need your API-Key for Google Fonts API.');
			if(D) console.log("Cancel: " + msg);
		}).catch(function(error) {
			if(D) console.log(error);
		});
	});

   });
</script>
</body>
</html>