fontsampler-js › skin
A configurable standalone webfont type tester for displaying and manipulating sample text in the browser.
View on Github
A configurable standalone webfont type tester for displaying and manipulating sample text in the browser.
View on GithubBy default Fontsampler can be used without any styling or the optional skin. However, default HTML controls are often not very appealing, so Fontsampler comes with a minimal skin that you can load to make Fontsamplers look more nice.
<script src="node_modules/fontsampler-js/dist/fontsampler.js"></script>
<!-- Load the optional skin javascript and css -->
<script src="../node_modules/fontsampler-js/dist/fontsampler-skin.js"></script>
<link rel="stylesheet" href="../node_modules/fontsampler-js/dist/fontsampler-skin.css">
…
<script>
…
var fs = new Fontsampler(document.getElementById("demo"), fonts, options)
// Initiate the skin by passing the Fontsampler instance to it
FontsamplerSkin(fs)
// Only then init the Fontsampler
fs.init()
</script>
Naturally all of the UI components can be configured or omitted via options. The above just shows a full set of all UI elements for preview.
The default skin tries to inherit as much as possible from the enclosing elements. For example font sizes and colors are inherited. If you need more control, you can overwrite part of the css.
If you want to use the UI components (dropdown, sliders) but overwrite their CSS
you can base your own styles on the included
scss/fontsampler-skin.scss.
Check out the included src/skin.js for how the
default HTML UI components are overwritten or to roll your own alternative.