Skip to content

Instantly share code, notes, and snippets.

@mdsib

mdsib/custom-font-upload-frontend.html

Last active September 21, 2017 22:29
Show Gist options
  • Save mdsib/f3802d67063e5fe93f2940ebb1269282 to your computer and use it in GitHub Desktop.
Save mdsib/f3802d67063e5fe93f2940ebb1269282 to your computer and use it in GitHub Desktop.
Download ZIP
uploading a font to be used
Raw
custom-font-upload-frontend.html
<html>
<head>
<title>Uploading custom fonts</title>
</head>
<body>
<form id="custom-font-input">
<label> pick a font: <input type="file"></label>
<input type="submit">
</form>
<p style="font-family:custom" contenteditable>edit me</p>
<script>
document.querySelector("#custom-font-input").addEventListener('submit', function(ev, file) {
ev.preventDefault();
var fontReader = new FileReader();
fontReader.onloadend = () => addCustomFontToStyle(fontReader.result);
fontReader.readAsDataURL(ev.target.querySelector("input[type=file]").files[0]);
});
function addCustomFontToStyle (dataurl) {
var styleEl = document.createElement('style');
styleEl.appendChild(document.createTextNode(
`@font-face {font-family: 'custom'; src: url('${dataurl}')}`)
);
document.head.appendChild(styleEl);
}
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment