Skip to content

Instantly share code, notes, and snippets.

@quinn

quinn/font-family.html

Last active January 2, 2016 07:29
Show Gist options
  • Save quinn/8270709 to your computer and use it in GitHub Desktop.
Save quinn/8270709 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
font-family.html
<link rel="import" href="../components/polymer/polymer.html">
<polymer-element name="font-family" attributes="family normal italic bold italic-bold format url" lightdom>
<template>
<template if="{{normal}}">
<style>
@font-face {
font-family: '{{family}}';
src: {{url}}('{{normal}}') format('{{format}}');
font-weight: normal;
font-style: normal;
}
</style>
</template>
<template if="{{italic}}">
<style>
@font-face {
font-family: '{{family}}';
src: {{url}}('{{italic}}') format('{{format}}');
font-weight: normal;
font-style: italic;
}
</style>
</template>
<template if="{{bold}}">
<style>
@font-face {
font-family: '{{family}}';
src: {{url}}('{{bold}}') format('{{format}}');
font-weight: bold;
font-style: normal;
}
</style>
</template>
<template if="{{italic-bold}}">
<style>
@font-face {
font-family: '{{family}}';
src: {{url}}('{{italic-bold}}') format('{{format}}');
font-weight: bold;
font-style: italic;
}
</style>
</template>
</template>
<script>
Polymer('font-family', {
format: 'opentype',
url: 'url'
});
</script>
</polymer-element>
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<script src="../components/platform/platform.js"></script>
<link rel="import" href="../elements/font-family.html">
<script src="app://timeline/js/index.js"></script>
<font-family family="Droid Serif"
normal="DroidSerif-Regular-webfont.ttf"
italic="DroidSerif-Italic-webfont.ttf"
bold="DroidSerif-BoldItalic-webfont.ttf"
format="truetype"></font-family>
</head>
<body>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment