Typotheque font import

fonts.css

@font-face {
	font-family: "Jigsaw";
	src: url("https://s3.amazonaws.com/fonts.typotheque.com/WF-XXXXXX-XXXXXX-XXXXXX-XXXXXXXXXX.eot");
	src: url("https://s3.amazonaws.com/fonts.typotheque.com/WF-XXXXXX-XXXXXX-XXXXXX-XXXXXXXXXX.eot?#iefix") format("embedded-opentype"), url("https://s3.amazonaws.com/fonts.typotheque.com/WF-XXXXXX-XXXXXX-XXXXXX-XXXXXXXXXX.woff") format("woff"), url("https://s3.amazonaws.com/fonts.typotheque.com/WF-XXXXXX-XXXXXX-XXXXXX-XXXXXXXXXX.svg#typotheque_webfonts_service") format("svg");
	font-style: normal;
	font-weight: 300;
	font-stretch: normal;
}

@font-face {
	font-family: "Jigsaw";
	src: url("https://s3.amazonaws.com/fonts.typotheque.com/WF-XXXXXX-XXXXXX-XXXXXX-XXXXXXXXXX.eot");
	src: url("https://s3.amazonaws.com/fonts.typotheque.com/WF-XXXXXX-XXXXXX-XXXXXX-XXXXXXXXXX.eot?#iefix") format("embedded-opentype"), url("https://s3.amazonaws.com/fonts.typotheque.com/WF-XXXXXX-XXXXXX-XXXXXX-XXXXXXXXXX.woff") format("woff"), url("https://s3.amazonaws.com/fonts.typotheque.com/WF-XXXXXX-XXXXXX-XXXXXX-XXXXXXXXXX.svg#typotheque_webfonts_service") format("svg");
	font-style: normal;
	font-weight: 400;
	font-stretch: normal;
}
	
@font-face {
	font-family: "Jigsaw";
	src: url("https://s3.amazonaws.com/fonts.typotheque.com/WF-XXXXXX-XXXXXX-XXXXXX-XXXXXXXXXX.eot");
	src: url("https://s3.amazonaws.com/fonts.typotheque.com/WF-XXXXXX-XXXXXX-XXXXXX-XXXXXXXXXX.eot?#iefix") format("embedded-opentype"), url("https://s3.amazonaws.com/fonts.typotheque.com/WF-XXXXXX-XXXXXX-XXXXXX-XXXXXXXXXX.woff") format("woff"), url("https://s3.amazonaws.com/fonts.typotheque.com/WF-XXXXXX-XXXXXX-XXXXXX-XXXXXXXXXX.svg#typotheque_webfonts_service") format("svg");
	font-style: normal;
	font-weight: 500;
	font-stretch: normal;
}
	
@font-face {
	font-family: "Jigsaw";
	src: url("https://s3.amazonaws.com/fonts.typotheque.com/WF-XXXXXX-XXXXXX-XXXXXX-XXXXXXXXXX.eot");
	src: url("https://s3.amazonaws.com/fonts.typotheque.com/WF-XXXXXX-XXXXXX-XXXXXX-XXXXXXXXXX.eot?#iefix") format("embedded-opentype"), url("https://s3.amazonaws.com/fonts.typotheque.com/WF-XXXXXX-XXXXXX-XXXXXX-XXXXXXXXXX.woff") format("woff"), url("https://s3.amazonaws.com/fonts.typotheque.com/WF-XXXXXX-XXXXXX-XXXXXX-XXXXXXXXXX.svg#typotheque_webfonts_service") format("svg");
	font-style: normal;
	font-weight: 700;
	font-stretch: normal;
}

This would let me declare weights simply by specifying the weight as a variable (using Sass).

$light: 300
$regular: 400
$medium: 500
$bold: 700

html { 
  font-family: "Jigsaw", sans-serif
}

h1 {
  font-weight: $bold;
}

---

As opposed to your current configuration, which requires:

html {
  font-family: "Jigsaw Light", sans-serif;
  font-style: normal;
  font-weight: normal;
  font-stretch: normal;
}

h1 {
  font-family: "Jigsaw Bold";
}