<script type="text/javascript" src="//use.typekit.net/amy6fxx.js"></script>
<script type="text/javascript">try{Typekit.load();}catch(e){}</script>

<input type="checkbox" id="size">
<label for="size">Size</label>
  <br>
<input checked type="checkbox" id="fonts">
<label for="fonts">Fonts</label>

<div class="col">
<div class="ad">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 width="400px" height="327px" viewBox="0 0 400 327">
<rect fill="#DEF2FD" width="400" height="327"/>
<polygon opacity="0.2" fill="#7DACDC" points="0,327 200,173.797 400,327 "/>
<polygon opacity="0.2" fill="#7DACDC" points="91,327 291,280.292 491,327 "/>
<polygon opacity="0.2" fill="#7DACDC" points="-101,327 99,201 299,327 "/>
<g>
	<text>
    <tspan x="121.5" y="57.875"  fill="#0093C0" class="sans on" font-size="29.7691">GRAVES</tspan>
    <tspan x="38.5483" y="114.1104" fill="#016082" class="script on" font-size="97.8796">Mountain</tspan>
    <tspan x="41.5005" y="141.4561" fill="#0093C0" class="sans on" font-size="14.5332" 
    dx="0 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10" 
            >BLUEGRASS FESTIVAL</tspan>
  </text>

</g>
</svg>
</div>
</div>

.col {
  width: 30%;
  margin: 0 auto;
  transition: 0.4s;
  &.large {
    width: 80%;
  }
}

.ad {
  height: 0;
  position: relative;
  padding-top: 81.75%;
  > svg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
}

.sans.on {
  font-family: "proxima-nova"
}
.script.on {
  font-family: "ff-market-web";
}


body {
  text-align: center;
}

$("#size").on("click", function() {
 $(".col").toggleClass("large");
});

$("#fonts").on("click", function() {
  if ($(this).is(":checked")) {
    $(".script").attr("class", "script on");
    $(".sans").attr("class", "sans on");
  } else {
    $(".script").attr("class", "script");
    $(".sans").attr("class", "sans");
  }
  
});