Gracias a los dos, hasta aquí va funcionando, he pensado que seria más comodo cambiar click por focus, y como MENU>MENUITEM solo son compatibles con firefox, intentar hacerlo con SELECT>OPTION
He probado con
Código HTML:
onmouseover="gFont(this)"
pero parece que no funciona
Código completo:
Código HTML:
<!DOCTYPE html>
<html lang="en" contextmenu="gFont2">
<head>
<meta charset="UTF-8">
<title>Tabs</title>
<link href="https://fonts.googleapis.com/css?family=Roboto:400,700|Open+Sans:400,700|Lato:400,700|Oswald:400,700|Raleway:400,700|Noto+Sans:400,700|Titillium+Web:400,700|Poppins:400,700|Arimo:400,700|Nunito:400,700|Dosis:400,700|Oxygen:400,700|Cabin:400,700|Exo+2:400,700|Exo:400,700|Quicksand:400,700|Varela+Round:400,700|Asap:400,700|Signika:400,700|Maven+Pro:400,700|Isto+kWeb:400,700|Amaranth:400,700" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Lobster|Pauta+One|Poiret+One|Shrikhand|Boogaloo|Monoton|Bangers|Luckiest+Guy|Fugaz+One|Carter+One|Baloo|Londrina+Shadow" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Sedgwick+Ave+Display|Indie+Flower|Kaushan+Script|Kalam|Architects+Daughter|Neucha|Merienda|Aladin|Merienda+One" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Abel|Glegoo|Jongle|Poiret+One|Quicksand" rel="stylesheet">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Titillium+Web" rel="stylesheet">
<style>
body{font-family: 'Titillium Web', sans-serif;}
.tabs{display:flex; flex-wrap:wrap; margin:0;}
.tabs>:nth-child(odd){flex:1; line-height:3em; order:-1; text-align:center; cursor:pointer; font-weight:500;}
.tabs>:nth-child(even){margin-left:0; padding:1.5em; flex-basis:100%;}
.tabs>:nth-child(odd):not(.active)+:nth-child(even){display:none;}
</style>
</head>
<body>
<center><h1>Demostración</h1></center>
<dl class="tabs small-caps">
<dt class="active">Tab1</dt>
<dd>Lorem1</dd>
<dt>Tab2</dt>
<dd>Lorem2</dd>
<dt>Tab3</dt>
<dd>Lorem3</dd>
</dl>
<script src="jquery-3.2.1.min.js"></script>
<script>
$('.tabs>:nth-child(odd)').click(function(){
$(this).addClass('active').siblings().removeClass('active');
});
function gFont(object){
console.log($(object).attr('label'));
$('body').css('font-family',$(object).attr('label'));
}
</script>
<menu type="context" id="gFont">
<menu label="Google Fonts">
<menuitem label="Abel" icon="" onclick="gFont(this)"></menuitem>
<menuitem label="Glegoo" icon="" onclick="gFont(this)"></menuitem>
<menuitem label="Junge" icon="" onclick="gFont(this)"></menuitem>
<menuitem label="Poiret One" icon="" onclick="gFont(this)"></menuitem>
<menuitem label="Quicksand" icon="" onclick="gFont(this)"></menuitem>
</menu>
</menu>
<menu type="context" id="gFont2">
<menu label="Google Fonts">
<menu label="Sans Serif">
<menuitem label="Roboto" icon="" onclick="gFont(this)"></menuitem>
<menuitem label="Open Sans" icon="" onclick="gFont(this)"></menuitem>
<menuitem label="Lato" icon="" onclick="gFont(this)"></menuitem>
<menuitem label="Oswald" icon="" onclick="gFont(this)"></menuitem>
<menuitem label="Raleway" icon="" onclick="gFont(this)"></menuitem>
<menuitem label="Noto Sans" icon="" onclick="gFont(this)"></menuitem>
<menuitem label="Titillium Web" icon="" onclick="gFont(this)"></menuitem>
<menuitem label="Poppins" icon="" onclick="gFont(this)"></menuitem>
<menuitem label="Arimo" icon="" onclick="gFont(this)"></menuitem>
<menuitem label="Nunito" icon="" onclick="gFont(this)"></menuitem>
<menuitem label="Dosis" icon="" onclick="gFont(this)"></menuitem>
<menuitem label="Oxygen" icon="" onclick="gFont(this)"></menuitem>
<menuitem label="Cabin" icon="" onclick="gFont(this)"></menuitem>
<menuitem label="Exo 2" icon="" onclick="gFont(this)"></menuitem>
<menuitem label="Exo" icon="" onclick="gFont(this)"></menuitem>
<menuitem label="Quicksand" icon="" onclick="gFont(this)"></menuitem>
<menuitem label="Varela Round" icon="" onclick="gFont(this)"></menuitem>
<menuitem label="Asap" icon="" onclick="gFont(this)"></menuitem>
<menuitem label="Signika" icon="" onclick="gFont(this)"></menuitem>
<menuitem label="Maven Pro" icon="" onclick="gFont(this)"></menuitem>
<menuitem label="Istok Web" icon="" onclick="gFont(this)"></menuitem>
<menuitem label="Amaranth" icon="" onclick="gFont(this)"></menuitem>
</menu>
<menu label="Display">
<menuitem label="Lobster" icon="" onclick="gFont(this)"></menuitem>
<menuitem label="Pauta One" icon="" onclick="gFont(this)"></menuitem>
<menuitem label="Poiret One" icon="" onclick="gFont(this)"></menuitem>
<menuitem label="Shrikhand" icon="" onclick="gFont(this)"></menuitem>
<menuitem label="Boogaloo" icon="" onclick="gFont(this)"></menuitem>
<menuitem label="Monoton" icon="" onclick="gFont(this)"></menuitem>
<menuitem label="Bangers" icon="" onclick="gFont(this)"></menuitem>
<menuitem label="Luckiest Guy" icon="" onclick="gFont(this)"></menuitem>
<menuitem label="Fugaz One" icon="" onclick="gFont(this)"></menuitem>
<menuitem label="Carter One" icon="" onclick="gFont(this)"></menuitem>
<menuitem label="Baloo" icon="" onclick="gFont(this)"></menuitem>
<menuitem label="Londrina Shadow" icon="" onclick="gFont(this)"></menuitem>
</menu>
<menu label="Handwriting">
<menuitem label="Sedgwick Ave Display" icon="" onclick="gFont(this)"></menuitem>
<menuitem label="Indie Flower" icon="" onclick="gFont(this)"></menuitem>
<menuitem label="Kaushan Script" icon="" onclick="gFont(this)"></menuitem>
<menuitem label="Kalam" icon="" onclick="gFont(this)"></menuitem>
<menuitem label="Architects Daughter" icon="" onclick="gFont(this)"></menuitem>
<menuitem label="Neucha" icon="" onclick="gFont(this)"></menuitem>
<menuitem label="Merienda" icon="" onclick="gFont(this)"></menuitem>
<menuitem label="Aladin" icon="" onclick="gFont(this)"></menuitem>
<menuitem label="Merienda One" icon="" onclick="gFont(this)"></menuitem>
</menu>
</menu>
</menu>
</body>
</html>