cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - ActiveLovehtmlicon-new-collectionicon-personicon-teamlog-outoctocatpop-outspinnerstartv

Pen Settings

CSS Base

Vendor Prefixing

Add External CSS

These stylesheets will be added in this order and before the code you write in the CSS editor. You can also add another Pen here, and it will pull the CSS from it. Try typing "font" or "ribbon" below.

Quick-add: + add another resource

Add External JavaScript

These scripts will run in this order and before the code in the JavaScript editor. You can also link to another Pen here, and it will run the JavaScript from it. Also try typing the name of any popular library.

Quick-add: + add another resource

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

            
              <html>
  <head>
    <link href="https://fonts.googleapis.com/css?family=Open+Sans|Lato|Source+Sans+Pro|Raleway|Open+Sans+Condensed:300|Droid+Sans|Ubuntu|Noto+Sans|Dosis|Oxygen|Catamaran|Ubuntu+Condensed|Crimson+Text|Karla|Fira+Sans|Varela+Round|Asap|Signika|Quicksand|Questrial|Exo|Vollkorn|Work+Sans|Rubik|Ropa+Sans|Pathway+Gothic+One|Source+Code+Pro|Monda|Voltaire|Comfortaa|Quattrocento+Sans|Noticia+Text|Armata|Istok+Web|Economica|Cabin+Condensed|Philosopher|Rajdhani|Varela|Khand|Sarala|Signika+Negative|Actor|Aldrich|Bitter|Cabin|Exo+2|Playfair+Display|Glegoo|Cardo|Quattrocento|Alice|Enriqueta|Quando|Maitree|Fjord+One|Stoke|Junge|Alike+Angular|Permanent+Marker|Shadows+Into+Light|Patrick+Hand+SC"
  rel="stylesheet" type="text/css">
  </head>
  <body>
	  <header class="header">
		<!-- Page title / Logo -->
      <h1><a class="logo" href="#" title="logo">Page title</a></h1>
		  <!-- Main menu -->
		  <ul class="mainMenu"><li><a href="#noticias" title="">noticias</a></li><li><a href="#actividades" title="actividades">actividades</a></li><li><a href="#equipo" title="equipo">equipo</a></li><li><a href="#diseño" title="diseño">diseño</a></li><li><a href="#artistas" title="artistas">artistas</a></li><li><a href="#gestión-cultural" title="gestión cultural">gestión cultural</a></li></ul>
	  </header>
	  <article>
		<h2>1 2 3 4 5 6 7 8 9 10 11 12 13 14 15</h2>
		<p>Lorem ipsum 2017 dolor sit amet, consectetur adipiscing elit. In sit amet eros sit amet leo mattis dictum. Duis enim purus, vulputate ultricies erat id, lacinia convallis 1924 quam. Pellentesque nibh sem, ornare at mauris quis, tristique egestas tellus. Nam sit amet viverra ex, sit amet dictum eros. Phasellus tincidunt, lacus id consequat ullamcorper, velit nisi venenatis nisi, nec consectetur lorem elit id felis. Quisque tristique placerat elit, nec aliquam nisi tristique eu. Morbi ipsum libero, hendrerit ac dui et, fringilla venenatis risus. Curabitur nec massa ante. Nullam sit amet ex tristique, sagittis dolor non, mollis diam. Etiam laoreet sem eget erat rutrum eleifend. Praesent eleifend mi nec sollicitudin imperdiet. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Maecenas tincidunt est eu metus egestas, nec consequat ex condimentum.</p>
		<h2>Sergio Daroca Fernández</h2>
		<p>Mauris fringilla neque tellus, vel ultrices justo semper et. Suspendisse consequat leo et pharetra pulvinar. Phasellus maximus purus commodo felis porta, quis varius ex gravida. Curabitur a ante vel magna mattis feugiat id non tellus. Vestibulum vestibulum massa nulla, at malesuada mi aliquet nec. In hac habitasse platea dictumst. Nam in est ut tortor congue vehicula nec vel leo. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Integer urna dolor, feugiat et varius in, hendrerit vitae nisi. Duis id erat maximus, euismod ante eu, tincidunt mi. Integer mauris odio, ullamcorper nec venenatis id, vulputate quis eros.</p>
		<h2>Etiam eget sodales libero</h2><p>
		Etiam eget sodales libero. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Suspendisse sem orci, finibus id ipsum eget, interdum gravida dolor. Sed sit amet turpis leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec consectetur dignissim dolor sit amet faucibus. In vulputate dui quis rhoncus lacinia. Phasellus ornare neque ullamcorper tincidunt molestie. Etiam aliquet erat sit amet varius dictum. Proin interdum ac lorem id iaculis. Nulla facilisi.</p>
		<h2>Aliquam suscipit nisl vitae nunc tincidunt vestibulum</h2>
		<p>Aliquam suscipit nisl vitae nunc tincidunt vestibulum. Aenean ac turpis non massa tristique feugiat vitae semper ligula. Aenean ultricies dignissim convallis. Sed sed velit fermentum, varius leo in, viverra eros. Nulla hendrerit felis metus, sit amet rhoncus dui facilisis non. Ut porttitor eleifend venenatis. Nulla eget mauris ac felis tincidunt dapibus. Duis ac velit id magna suscipit lacinia. Praesent interdum risus quis mi auctor feugiat. Pellentesque urna tortor, blandit ac massa eget, bibendum vestibulum nunc. Nunc vulputate at enim at pharetra. Mauris ut turpis sed sem accumsan fermentum.</p>
		<h2>Praesent id orci placerat</h2>
		<p>Praesent id orci placerat, varius lacus a, tincidunt augue. Integer vel malesuada libero, non semper nibh. Cras imperdiet nulla et orci interdum euismod. Aenean tristique eget ipsum vitae facilisis. Aenean nec purus eget neque cursus aliquam in a lacus. Fusce rhoncus sed enim ut dapibus. Sed vestibulum semper sapien vitae pellentesque. Maecenas suscipit, augue eget eleifend consectetur, dui lorem semper leo, vitae efficitur quam nulla pharetra velit. Quisque iaculis lobortis justo bibendum porta. Fusce ac augue volutpat, molestie ipsum sed, egestas orci. Nam eu justo nisl. Quisque viverra urna vitae diam fringilla, at tincidunt sapien semper. Sed feugiat feugiat est. Nam ut diam interdum, volutpat odio id, laoreet nulla.</p>
	</article>
	<typeSetter>
    
  </typeSetter>
  <div id='reactTest1'></div>
  <div id='reactTest2'></div>
</body>
</html>
            
          
!
            
              html,bldy{font-size:16px;}
body {background-color: rgba(255,255,255,1);padding:1em;}
h1{color: rgba(22,22,22,.8);}
a{color: rgba(22,22,22,.8);}
header{position: fixed;top: 0;left: 0;right: 0;height:80px;background:white;padding:0 1em 0 1em;}
header>h1{display: inline-block;float: left;}
.mainMenu{padding: 0;list-style: none;float:right;}
.mainMenu LI {line-height: 80px;display: inline-block;float: left;margin-right: 0em;margin-left: 1.7em;}
.mainMenu LI A {/*color: rgba(0,0,0,.68) !important;*/
    font-weight: normal;text-decoration: none;
}
article{margin-top: 80px;}

#reactTest1{display:none;position:fixed;bottom:0;left:0;width:300px;height:300px; background:rgba(255,0,0,.8)}
#reactTest2{position:fixed;bottom:0;right:0;width:100%;height:300px;}

.typeSetterBTN{position:absolute;bottom:5px;right:5px;margin:0;padding:5px 7px;border-radius:50%;background:white;border-color:black;z-index:3000;}
.typeSetterBTN:focus{outline:none;}
.font-select{margin:10px;}
.form-group{margin:10px;}
#reactTest2 .fade{width:100%;height:300px;background:rgba(255,255,255,.95);border-top:1em solid rgba(22,22,22,.8);}












/*
 This css and associated images borrow heavily from the fantastic 
 chosen select box plugin.
 
 Copyright (c) 2011 Harvest http://getharvest.com

 MIT License, https://github.com/harvesthq/chosen/blob/master/LICENSE.md
*/

.font-select {
  font-size: 16px;
  width: 210px;
  position: relative;
  display: inline-block;
  zoom: 1;
  *display: inline;
}

.font-select .fs-drop {
  background: #fff;
  border: 1px solid #aaa;
  border-top: 0;
  position: absolute;
  top: 29px;
  left: 0;
  -webkit-box-shadow: 0 4px 5px rgba(0,0,0,.15);
  -moz-box-shadow   : 0 4px 5px rgba(0,0,0,.15);
  -o-box-shadow     : 0 4px 5px rgba(0,0,0,.15);
  box-shadow        : 0 4px 5px rgba(0,0,0,.15);
  z-index: 999;
}

.font-select > a {
  background-color: #fff;
  background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #eeeeee), color-stop(0.5, white));
  background-image: -webkit-linear-gradient(center bottom, #eeeeee 0%, white 50%);
  background-image: -moz-linear-gradient(center bottom, #eeeeee 0%, white 50%);
  background-image: -o-linear-gradient(top, #eeeeee 0%,#ffffff 50%);
  background-image: -ms-linear-gradient(top, #eeeeee 0%,#ffffff 50%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eeeeee', endColorstr='#ffffff',GradientType=0 );
  background-image: linear-gradient(top, #eeeeee 0%,#ffffff 50%);
  -webkit-border-radius: 4px;
  -moz-border-radius   : 4px;
  border-radius        : 4px;
  -moz-background-clip   : padding;
  -webkit-background-clip: padding-box;
  background-clip        : padding-box;
  border: 1px solid #aaa;
  display: block;
  overflow: hidden;
  white-space: nowrap;
  position: relative;
  height: 26px;
  line-height: 26px;
  padding: 0 0 0 8px;
  color: #444;
  text-decoration: none;
}

.font-select > a span {
  margin-right: 26px;
  display: block;
  overflow: hidden;
  white-space: nowrap;
  line-height: 1.8;
  -o-text-overflow: ellipsis;
  -ms-text-overflow: ellipsis;
  text-overflow: ellipsis;
  cursor: pointer;
}

.font-select > a div {
  -webkit-border-radius: 0 4px 4px 0;
  -moz-border-radius   : 0 4px 4px 0;
  border-radius        : 0 4px 4px 0;
  -moz-background-clip   : padding;
  -webkit-background-clip: padding-box;
  background-clip        : padding-box;
  background: #ccc;
  background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #ccc), color-stop(0.6, #eee));
  background-image: -webkit-linear-gradient(center bottom, #ccc 0%, #eee 60%);
  background-image: -moz-linear-gradient(center bottom, #ccc 0%, #eee 60%);
  background-image: -o-linear-gradient(bottom, #ccc 0%, #eee 60%);
  background-image: -ms-linear-gradient(top, #cccccc 0%,#eeeeee 60%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cccccc', endColorstr='#eeeeee',GradientType=0 );
  background-image: linear-gradient(top, #cccccc 0%,#eeeeee 60%);
  border-left: 1px solid #aaa;
  position: absolute;
  right: 0;
  top: 0;
  display: block;
  height: 100%;
  width: 18px;
}

.font-select > a div b {
  background: url('fs-sprite.png') no-repeat 0 1px;
  display: block;
  width: 100%;
  height: 100%;
  cursor: pointer;
}

.font-select .fs-drop {
  -webkit-border-radius: 0 0 4px 4px;
  -moz-border-radius   : 0 0 4px 4px;
  border-radius        : 0 0 4px 4px;
  -moz-background-clip   : padding;
  -webkit-background-clip: padding-box;
  background-clip        : padding-box;
}

.font-select .fs-results {
  margin: 0 4px 4px 0;
  max-height: 190px;
  width: 200px;
  padding: 0 0 0 4px;
  position: relative;
  overflow-x: hidden;
  overflow-y: auto;
}

.font-select .fs-results li {
  line-height: 80%;
  padding: 7px 7px 8px;
  margin: 0;
  list-style: none;
  font-size: 18px;
}

.font-select .fs-results li.active {
  background: #3875d7;
  color: #fff;
  cursor: pointer;
}
.font-select .fs-results li em {
  background: #feffde;
  font-style: normal;
}

.font-select .fs-results li.active em {
  background: transparent;
}

.font-select-active > a {
  -webkit-box-shadow: 0 0 5px rgba(0,0,0,.3);
  -moz-box-shadow   : 0 0 5px rgba(0,0,0,.3);
  -o-box-shadow     : 0 0 5px rgba(0,0,0,.3);
  box-shadow        : 0 0 5px rgba(0,0,0,.3);
  border: 1px solid #5897fb;
}

.font-select-active > a {
  border: 1px solid #aaa;
  -webkit-box-shadow: 0 1px 0 #fff inset;
  -moz-box-shadow   : 0 1px 0 #fff inset;
  -o-box-shadow     : 0 1px 0 #fff inset;
  box-shadow        : 0 1px 0 #fff inset;
  background-color: #eee;
  background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, white), color-stop(0.5, #eeeeee));
  background-image: -webkit-linear-gradient(center bottom, white 0%, #eeeeee 50%);
  background-image: -moz-linear-gradient(center bottom, white 0%, #eeeeee 50%);
  background-image: -o-linear-gradient(bottom, white 0%, #eeeeee 50%);
  background-image: -ms-linear-gradient(top, #ffffff 0%,#eeeeee 50%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#eeeeee',GradientType=0 );
  background-image: linear-gradient(top, #ffffff 0%,#eeeeee 50%);
  -webkit-border-bottom-left-radius : 0;
  -webkit-border-bottom-right-radius: 0;
  -moz-border-radius-bottomleft : 0;
  -moz-border-radius-bottomright: 0;
  border-bottom-left-radius : 0;
  border-bottom-right-radius: 0;
}

.font-select-active > a div {
  background: transparent;
  border-left: none;
}

.font-select-active > a div b {
  background-position: -18px 1px;
}

            
          
!
            
              var fontfamilies = "Open+Sans|Lato|Source+Sans+Pro|Raleway|Open+Sans+Condensed:300|Droid+Sans|Ubuntu|Noto+Sans|Dosis|Oxygen|Catamaran|Ubuntu+Condensed|Crimson+Text|Karla|Fira+Sans|Varela+Round|Asap|Signika|Quicksand|Questrial|Exo|Vollkorn|Work+Sans|Rubik|Ropa+Sans|Pathway+Gothic+One|Source+Code+Pro|Monda|Voltaire|Comfortaa|Quattrocento+Sans|Noticia+Text|Armata|Istok+Web|Economica|Cabin+Condensed|Philosopher|Rajdhani|Varela|Khand|Sarala|Signika+Negative|Actor|Aldrich|Bitter|Cabin|Exo+2|Playfair+Display|Glegoo|Cardo|Quattrocento|Alice|Enriqueta|Quando|Maitree|Fjord+One|Stoke|Junge|Alike+Angular|Permanent+Marker|Shadows+Into+Light|Patrick+Hand+SC";
var fontSelectionOBJ = {
	"fonts": ["Monda", "Open+Sans", "Lato", "Source+Sans+Pro", "Raleway", "Open+Sans+Condensed:300", "Droid+Sans", "Ubuntu", "Noto+Sans", "Dosis", "Oxygen", "Catamaran", "Ubuntu+Condensed", "Crimson+Text", "Karla", "Fira+Sans", "Varela+Round", "Asap", "Signika", "Quicksand", "Questrial", "Exo", "Vollkorn", "Work+Sans", "Rubik", "Ropa+Sans", "Pathway+Gothic+One", "Source+Code+Pro", "Monda", "Voltaire", "Comfortaa", "Quattrocento+Sans", "Noticia+Text", "Armata", "Istok+Web", "Economica", "Cabin+Condensed", "Philosopher", "Rajdhani", "Varela", "Khand", "Sarala", "Signika+Negative", "Actor", "Aldrich", "Bitter", "Cabin", "Exo+2", "Playfair+Display", "Glegoo", "Cardo", "Quattrocento", "Alice", "Enriqueta", "Quando", "Maitree", "Fjord+One", "Stoke", "Junge", "Alike+Angular", "Permanent+Marker", "Shadows+Into+Light", "Patrick+Hand+SC"]
};
/*
 * jQuery.fontselect - A font selector for the Google Web Fonts api
 * Tom Moor, http://tommoor.com
 * Copyright (c) 2011 Tom Moor
 * MIT Licensed
 * @version 0.1
 */

(function($) {

	$.fn.fontselect = function(options) {

		if (options) {
			console.log("$.fn.fontselect options: " + options + "<<<");
		}
		var __bind = function(fn, me) {
			return function() {
				return fn.apply(me, arguments);
			};
		};

		var fonts = ["Monda", "sans-serif", "serif", "monospace", "cursive", "Roboto", "Roboto:100", "Roboto:100italic", "Roboto:300", "Roboto:300italic", "Roboto:italic", "Roboto:500", "Roboto:500italic", "Roboto:700", "Roboto:700italic", "Roboto:900", "Roboto:900italic", "Open+Sans", "Open+Sans:300", "Open+Sans:300italic", "Open+Sans:italic", "Open+Sans:600", "Open+Sans:600italic", "Open+Sans:700", "Open+Sans:700italic", "Open+Sans:800", "Open+Sans:800italic", "Slabo+27px", "Lato", "Lato:100", "Lato:100italic", "Lato:300", "Lato:300italic", "Lato:italic", "Lato:700", "Lato:700italic", "Lato:900", "Lato:900italic", "Roboto+Condensed", "Roboto+Condensed:300", "Roboto+Condensed:300italic", "Roboto+Condensed:italic", "Roboto+Condensed:700", "Roboto+Condensed:700italic", "Source+Sans+Pro", "Source+Sans+Pro:200", "Source+Sans+Pro:200italic", "Source+Sans+Pro:300", "Source+Sans+Pro:300italic", "Source+Sans+Pro:italic", "Source+Sans+Pro:600", "Source+Sans+Pro:600italic", "Source+Sans+Pro:700", "Source+Sans+Pro:700italic", "Source+Sans+Pro:900", "Source+Sans+Pro:900italic", "Raleway", "Raleway:100", "Raleway:100italic", "Raleway:200", "Raleway:200italic", "Raleway:300", "Raleway:300italic", "Raleway:italic", "Raleway:500", "Raleway:500italic", "Raleway:600", "Raleway:600italic", "Raleway:700", "Raleway:700italic", "Raleway:800", "Raleway:800italic", "Raleway:900", "Raleway:900italic", "Open+Sans+Condensed", "Open+Sans+Condensed:300", "Open+Sans+Condensed:300italic", "Open+Sans+Condensed:700", "Droid+Sans", "Droid+Sans:regular", "Droid+Sans:700", "Ubuntu", "Ubuntu:300", "Ubuntu:300italic", "Ubuntu:italic", "Ubuntu:500", "Ubuntu:500italic", "Ubuntu:700", "Ubuntu:700italic", "Droid+Serif", "Droid+Serif:regular", "Droid+Serif:italic", "Droid+Serif:700", "Droid+Serif:700italic", "Playfair+Display", "Playfair+Display:regular", "Playfair+Display:italic", "Playfair+Display:700", "Playfair+Display:700italic", "Playfair+Display:900", "Playfair+Display:900italic", "Titillium+Web", "Titillium+Web:200", "Titillium+Web:200italic", "Titillium+Web:300", "Titillium+Web:300italic", "Titillium+Web:italic", "Titillium+Web:600", "Titillium+Web:600italic", "Titillium+Web:700", "Titillium+Web:700italic", "Titillium+Web:900", "Bitter", "Bitter:regular", "Bitter:italic", "Bitter:700", "Indie+Flower", "Anton", "Dosis", "Dosis:200", "Dosis:300", "Dosis:500", "Dosis:600", "Dosis:700", "Dosis:800", "Oxygen", "Oxygen:300", "Oxygen:700", "Cabin", "Cabin:regular", "Cabin:italic", "Cabin:500", "Cabin:500italic", "Cabin:600", "Cabin:600italic", "Cabin:700", "Cabin:700italic", "Cabin+Condensed", "Cabin+Condensed:regular", "Cabin+Condensed:500", "Cabin+Condensed:600", "Cabin+Condensed:700", "Nunito", "Nunito:200", "Nunito:200italic", "Nunito:300", "Nunito:300italic", "Nunito:italic", "Nunito:600", "Nunito:600italic", "Nunito:700", "Nunito:700italic", "Nunito:800", "Nunito:800italic", "Nunito:900", "Nunito:900italic", "Catamaran", "Catamaran:100", "Catamaran:200", "Catamaran:300", "Catamaran:500", "Catamaran:600", "Catamaran:700", "Catamaran:800", "Catamaran:900", "Crimson+Text", "Crimson+Text:regular", "Crimson+Text:italic", "Crimson+Text:600", "Crimson+Text:600italic", "Crimson+Text:700", "Crimson+Text:700italic", "Libre+Baskerville", "Libre+Baskerville:regular", "Libre+Baskerville:italic", "Libre+Baskerville:700", "Ubuntu+Condensed", "Gloria+Hallelujah", "Abril+Fatface", "Pacifico", "Fira+Sans", "Fira+Sans:300", "Fira+Sans:300italic", "Fira+Sans:italic", "Fira+Sans:500", "Fira+Sans:500italic", "Fira+Sans:700", "Fira+Sans:700italic", "Karla", "Karla:regular", "Karla:italic", "Karla:700", "Karla:700italic", "Asap", "Asap:regular", "Asap:italic", "Asap:500", "Asap:500italic", "Asap:700", "Asap:700italic", "Varela+Round", "Signika", "Signika:300", "Signika:600", "Signika:700", "Signika+Negative", "Signika+Negative:300", "Signika+Negative:600", "Signika+Negative:700", "Quicksand", "Quicksand:300", "Quicksand:500", "Quicksand:700", "Questrial", "Work+Sans", "Work+Sans:100", "Work+Sans:200", "Work+Sans:300", "Work+Sans:500", "Work+Sans:600", "Work+Sans:700", "Work+Sans:800", "Work+Sans:900", "Francois+One", "Orbitron", "Orbitron:regular", "Orbitron:500", "Orbitron:700", "Orbitron:900", "Exo", "Exo:100", "Exo:100italic", "Exo:200", "Exo:200italic", "Exo:300", "Exo:300italic", "Exo:italic", "Exo:500", "Exo:500italic", "Exo:600", "Exo:600italic", "Exo:700", "Exo:700italic", "Exo:800", "Exo:800italic", "Exo:900", "Exo:900italic", "Exo+2", "Exo+2:100", "Exo+2:100italic", "Exo+2:200", "Exo+2:200italic", "Exo+2:300", "Exo+2:300italic", "Exo+2:italic", "Exo+2:500", "Exo+2:500italic", "Exo+2:600", "Exo+2:600italic", "Exo+2:700", "Exo+2:700italic", "Exo+2:800", "Exo+2:800italic", "Exo+2:900", "Exo+2:900italic", "Vollkorn", "Vollkorn:regular", "Vollkorn:italic", "Vollkorn:700", "Vollkorn:700italic", "Crete+Round", "Crete+Round:regular", "Crete+Round:italic", "Rokkitt", "Rokkitt:regular", "Rokkitt:700", "Rubik+One", "Elsie", "Elsie:regular", "Elsie:900", "Donegal+One", "Junge", "Stoke", "Stoke:300", "Chicle", "UnifrakturCook", "Monofett", "Averia+Libre", "Averia+Libre:300", "Averia+Libre:300italic", "Averia+Libre:italic", "Averia+Libre:700", "Averia+Libre:700italic", "Mitr", "Mitr:200", "Mitr:300", "Mitr:500", "Mitr:600", "Mitr:700", "Trade+Winds", "Henny+Penny", "Text+Me+One", "Paprika", "Iceland", "Ropa+Sans", "Ropa+Sans:regular", "Ropa+Sans:italic", "Pathway+Gothic+One", "Play", "Play:regular", "Play:700", "Source+Code+Pro", "Source+Code+Pro:200", "Source+Code+Pro:300", "Source+Code+Pro:500", "Source+Code+Pro:600", "Source+Code+Pro:700", "Source+Code+Pro:900", "Monda", "Monda:regular", "Monda:700", "Voltaire", "Comfortaa", "Comfortaa:300", "Comfortaa:700", "Quattrocento+Sans", "Quattrocento+Sans:regular", "Quattrocento+Sans:italic", "Quattrocento+Sans:700", "Quattrocento+Sans:700italic", "Righteous", "Noticia+Text", "Noticia+Text:regular", "Noticia+Text:italic", "Noticia+Text:700", "Noticia+Text:700italic", "Armata", "Istok+Web", "Istok+Web:regular", "Istok+Web:italic", "Istok+Web:700", "Istok+Web:700italic", "Philosopher", "Philosopher:regular", "Philosopher:italic", "Philosopher:700", "Philosopher:700italic", "Rajdhani", "Rajdhani:300", "Rajdhani:500", "Rajdhani:600", "Rajdhani:700", "Varela", "Shrikhand", "Khand", "Khand:300", "Khand:500", "Khand:600", "Khand:700", "Actor", "Aldrich", "Homenaje", "Glegoo", "Glegoo:regular", "Glegoo:700", "Cardo", "Cardo:regular", "Cardo:italic", "Cardo:700", "Quattrocento+Sans", "Quattrocento+Sans:regular", "Quattrocento+Sans:italic", "Quattrocento+Sans:700", "Quattrocento+Sans:700italic", "Righteous", "Alice", "Enriqueta", "Enriqueta:regular", "Enriqueta:700", "Quando", "Mr+Dafoe", "Ovo", "Strait", "Alike", "Alike+Angular", "Oxygen+Mono", "Crushed", "Oregano", "Oregano:regular", "Oregano:italic", "Herr+Von+Muellerhoff", "Prompt", "Prompt:100", "Prompt:100italic", "Prompt:200", "Prompt:200italic", "Prompt:300", "Prompt:300italic", "Prompt:italic", "Prompt:500", "Prompt:500italic", "Prompt:600", "Prompt:600italic", "Prompt:700", "Prompt:700italic", "Prompt:800", "Prompt:800italic", "Prompt:900", "Prompt:900italic", "Fjord+One", "Permanent+Marker"];
		if (options) {
			console.log("options.fonts: " + options.fonts + "<<<");
			console.log("options['fonts']: " + options['fonts'] + "<<<");
			fonts = options.fonts;
		}

		var settings = {
			style: 'font-select',
			placeholder: 'Select a font',
			lookahead: 2,
			api: 'https://fonts.googleapis.com/css?family='
		};

		var Fontselect = (function() {

			function Fontselect(original, o) {
				this.$original = $(original);
				this.options = o;
				this.active = false;
				this.setupHtml();
				this.getVisibleFonts();
				this.bindEvents();

				var font = this.$original.val();
				if (font) {
					this.updateSelected();
					this.addFontLink(font);
				}
			}

			Fontselect.prototype.bindEvents = function() {

				$('li', this.$results)
					.click(__bind(this.selectFont, this))
					.mouseenter(__bind(this.activateFont, this))
					.mouseleave(__bind(this.deactivateFont, this));

				$('span', this.$select).click(__bind(this.toggleDrop, this));
				this.$arrow.click(__bind(this.toggleDrop, this));
			};

			Fontselect.prototype.toggleDrop = function(ev) {

				//console.log('toggleDrop called this.active: ' + this.active);
				if (this.active) {
					this.$element.removeClass('font-select-active');
					this.$drop.hide();
					clearInterval(this.visibleInterval);

				} else {
					this.$element.addClass('font-select-active');
					this.$drop.show();
					this.moveToSelected();
					this.visibleInterval = setInterval(__bind(this.getVisibleFonts, this), 500);
				}

				this.active = !this.active;
			};

			Fontselect.prototype.selectFont = function() {
				var font = $('li.active', this.$results).data('value');
				console.log('>>>selectFont called font: ' + font);
				this.$original.val(font).change();
				this.updateSelected();
				this.toggleDrop();
			};

			Fontselect.prototype.moveToSelected = function() {

				var $li, font = this.$original.val();

				if (font) {
					$li = $("li[data-value='" + font + "']", this.$results);
				} else {
					$li = $("li", this.$results).first();
				}

				this.$results.scrollTop($li.addClass('active').position().top);
			};

			Fontselect.prototype.activateFont = function(ev) {
				$('li.active', this.$results).removeClass('active');
				$(ev.currentTarget).addClass('active');
			};

			Fontselect.prototype.deactivateFont = function(ev) {

				$(ev.currentTarget).removeClass('active');
			};

			Fontselect.prototype.updateSelected = function() {
				//console.log('updateSelected called');
				var font = this.$original.val();
				$('span', this.$element).text(this.toReadable(font)).css(this.toStyle(font));
			};

			Fontselect.prototype.setupHtml = function() {

				this.$original.empty().hide();
				this.$element = $('<div>', {
					'class': this.options.style
				});
				this.$arrow = $('<div><b></b></div>');
				this.$select = $('<a><span>' + this.options.placeholder + '</span></a>');
				this.$drop = $('<div>', {
					'class': 'fs-drop'
				});
				this.$results = $('<ul>', {
					'class': 'fs-results'
				});
				this.$original.after(this.$element.append(this.$select.append(this.$arrow)).append(this.$drop));
				this.$drop.append(this.$results.append(this.fontsAsHtml())).hide();
			};

			Fontselect.prototype.fontsAsHtml = function() {

				var l = fonts.length;
				var r, s, h = '';

				for (var i = 0; i < l; i++) {
					r = this.toReadable(fonts[i]);
					s = this.toStyle(fonts[i]);
					h += '<li data-value="' + fonts[i] + '" style="font-family: ' + s['font-family'] + '; font-weight: ' + s['font-weight'] + ';font-style:' + s['font-style'] + ';">' + r + '</li>';
				}

				return h;
			};

			Fontselect.prototype.toReadable = function(font) {
				return font.replace(/[\+|:]/g, ' ');
			};

			Fontselect.prototype.toStyle = function(font) {

				var t = font.split(':');
				if (t[1] != undefined) {
					var isItalic = t[1].includes('italic');
					if (isItalic) {
						t[1] = t[1].split('italic')[0];
						t[2] = 'italic';
					} else {
						t[2] = 'normal';
					}
				} else {
					t[1] = '400';
					t[2] = 'normal';
				}

				return {
					'font-family': this.toReadable(t[0]),
					'font-weight': (t[1] || 400),
					'font-style': t[2]
				};
			};

			Fontselect.prototype.getVisibleFonts = function() {

				if (this.$results.is(':hidden')) return;

				var fs = this;
				var top = this.$results.scrollTop();
				var bottom = top + this.$results.height();

				if (this.options.lookahead) {
					var li = $('li', this.$results).first().height();
					bottom += li * this.options.lookahead;
				}

				$('li', this.$results).each(function() {

					var ft = $(this).position().top + top;
					var fb = ft + $(this).height();

					if ((fb >= top) && (ft <= bottom)) {
						var font = $(this).data('value');
						fs.addFontLink(font);
					}

				});
			};

			Fontselect.prototype.addFontLink = function(font) {

				var link = this.options.api + font;

				if ($("link[href*='" + font + "']").length === 0) {
					$('link:last').after('<link href="' + link + '" rel="stylesheet" type="text/css">');
				}
			};

			return Fontselect;
		})();

		return this.each(function(options) {
			// If options exist, lets merge them
			console.log("options.fonts: " + options + "<<<");
			if (options) {
				$.extend(settings, options);
			}
			return new Fontselect(this, settings);
		});

	};
})(jQuery);

/****************************************************
Trying out ReactDOm...



*/
const Button = ReactBootstrap.Button;
const Collapse = ReactBootstrap.Collapse;
const Fade = ReactBootstrap.Fade;
const Glyphicon = ReactBootstrap.Glyphicon;
const FormGroup = ReactBootstrap.FormGroup;
const InputGroup = ReactBootstrap.InputGroup;
const FormControl = ReactBootstrap.FormControl;

class Panel extends React.Component {
	constructor(props) {
		super(props);

		this.state = {
			expanded: false,
		};
	}

	toggle() {
		this.setState({
			expanded: !this.state.expanded
		});
	}
	fontSizeClicked(evt) {
		//console.log(evt);

		var fontSize = $(evt.target).text();
		$(evt.button).css('font-size', fontSize);
		var selectedSelector = $('.css-selector option:selected');
		$(selectedSelector.val()).css('font-size', fontSize);
	}
	assignFontClicked() {
		/*console.log($('.css-selector option:selected').css('font-family'));
		console.log($('.css-selector option:selected').val());*/
		var selectedSelector = $('.css-selector option:selected');
		$(selectedSelector.val()).css('font-family', $('.css-selector option:selected').css('font-family'));

		$(selectedSelector.val()).css('font-weight', $('.css-selector option:selected').css('font-weight'));
		$(selectedSelector.val()).css('font-style', $('.css-selector option:selected').css('font-style'))

	}
	render() {
		//console.log('render!');
		return (
			<div>
				  <Button bsClass="typeSetterBTN" onClick={ this.toggle.bind(this) }><Glyphicon glyph="font"></Glyphicon></Button>
               <Fade in={ this.state.expanded }>
                  <div>
							<form>
								<FormGroup>
								<InputGroup>
	<InputGroup.Addon>CSS Selector</InputGroup.Addon>
      <FormControl componentClass="select" placeholder="select" bsClass="form-control css-selector">
        <option value="body">body</option>
        <option value=".mainMenu li">.mainMenu li</option>
			<option value="h1">h1</option>
			<option value="h2">h2</option>
			<option value="h3">h3</option>
      </FormControl>
		<InputGroup.Button>
			<Button onClick={ this.fontSizeClicked.bind(this) }>.8em</Button>
         <Button onClick={ this.fontSizeClicked.bind(this) }>1em</Button>
         <Button onClick={ this.fontSizeClicked.bind(this) }>1.2em</Button>
         <Button onClick={ this.fontSizeClicked.bind(this) }>1.4em</Button>
         <Button onClick={ this.fontSizeClicked.bind(this) }>1.6em</Button>
         <Button onClick={ this.fontSizeClicked.bind(this) }>1.8em</Button>
         <Button onClick={ this.fontSizeClicked.bind(this) }>2em</Button>
			<Button onClick={ this.assignFontClicked.bind(this) }><Glyphicon glyph="send"></Glyphicon> </Button>
									</InputGroup.Button>
								</InputGroup>
								</FormGroup>
							</form>
                  	<input id="font" type="text"/>
                  </div>
                </Fade>
            </div>
		);
	}
	componentDidMount() {
		//console.log('ups!');
		$('#font').fontselect(fontSelectionOBJ).change(function() {
			// replace + signs with spaces for css
			var font = $(this).val().replace(/\+/g, ' ');
			// split font into family and weight
			font = font.split(':');
			console.log('change -font:' + font[1]);
			if (font[1] != undefined) {
				var isItalic = font[1].includes('italic');
				//console.log('A change -isItalic:'+isItalic);
				if (isItalic) {
					font[1] = font[1].split('italic')[0];
					font[2] = 'italic';
					//console.log('B change -font[1]:'+font[1]);
				} else {
					font[2] = 'normal';
					//console.log('C no italic change -font[2]:'+font[2]);
				}
			} else {
				font[1] = '400';
				font[2] = 'normal';
				//console.log('D font[1] undefined change -font[2]:'+font[2]);
			}
			//console.log('E change:'+font);
			// set family on paragraphs
			$('.css-selector option:selected').css('font-family', font[0]);
			$('.css-selector option:selected').css('font-weight', font[1]);
			$('.css-selector option:selected').css('font-style', font[2]);

			//TODO change selector text to selected style?
			//$('.css-selector *').css('font-family', font[0]);
		});
	}
}

ReactDOM.render(
	<Panel />,
	document.getElementById('reactTest2')
)

/*class Example extends React.Component {
  constructor(...args) {
    super(...args);
    this.state = {
      open: true
    };
  }

  render() {
    return (
      <div>
        <Button onClick={ ()=> this.setState({ open: !this.state.open })}>
          click me!
        </Button>
        <Panel collapsible expanded={this.state.open}>
          <input id="font" type="text"/>
        </Panel>
      </div>
    );
  }
}

ReactDOM.render(<Example/>, document.getElementById('reactTest1'));
$('#font').fontselect();*/
            
          
!
999px
Loading ..................

Console