How to use webfont - 10 common examples
To help you get started, we’ve selected a few webfont examples, based on popular ways it is used in public projects.
Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.
adobe / brackets-edge-web-fonts / main.js View on Github 
(function startExtensionHelper() {
webfont.init()
.done(function () {
init(); // register commands if the core loaded properly
if (window.navigator.onLine) {
handleOnline();
} else {
window.addEventListener("online", handleOnline);
}
}).fail(function (err) {
if (window.navigator.onLine) {
setTimeout(startExtensionHelper, delay);
if (delay < MAX_DELAY) {
delay *= 2;
}
} else {
window.addEventListener("online", startExtension);
}for (i = 0; i < fonts.length; i++) {
f = webfont.getFontBySlug(fonts[i]);
if (f) {
allFvds = [];
for (j = 0; j < f.variations.length; j++) {
allFvds.push(f.variations[j].fvd);
}
fontFamilies.push({slug: f.slug, fvds: allFvds, subset: "all"});
}
}
if (fontFamilies.length === 0) { // no EWF in this css file
_showHowtoDialog();
} else {
includeString = webfont.createInclude(fontFamilies);
var dlg = Dialogs.showModalDialogUsingTemplate(ewfIncludeDialogTemplate);
$('.instance .ewf-include-string').html(_.escape(includeString)).focus().select();
}
}function _handleGenerateInclude() {
var editor = EditorManager.getFocusedEditor() || EditorManager.getCurrentFullEditor();
var parser = _getParserForContext(editor);
var fonts = parser.parseCurrentEditor(false);
var fontFamilies = [], allFvds = [];
var i, j, f;
var includeString = "";
for (i = 0; i < fonts.length; i++) {
f = webfont.getFontBySlug(fonts[i]);
if (f) {
allFvds = [];
for (j = 0; j < f.variations.length; j++) {
allFvds.push(f.variations[j].fvd);
}
fontFamilies.push({slug: f.slug, fvds: allFvds, subset: "all"});
}
}
if (fontFamilies.length === 0) { // no EWF in this css file
_showHowtoDialog();
} else {
includeString = webfont.createInclude(fontFamilies);
var dlg = Dialogs.showModalDialogUsingTemplate(ewfIncludeDialogTemplate);
$('.instance .ewf-include-string').html(_.escape(includeString)).focus().select();
}// the current cursor position to the autocompletion list (but we do for the
// query = "";
}
} else if (modeSupport.isFontNameToken(token)) { // is not wrapped in quotes
query = token.string.substring(0, cursor.ch - token.start);
} else { // after a ":", a space, or a ","
query = "";
}
// candidate hints are lower case, so the query should be too
lowerCaseQuery = query.toLocaleLowerCase();
var candidates = parser.parseCurrentEditor(true);
candidates = candidates.concat(lastTwentyFonts);
candidates = candidates.concat(webfont.getWebsafeFonts());
candidates = webfont.lowerSortUniqStringArray(candidates);
candidates = webfont.filterAndSortArray(query, candidates);
candidates = candidates.map(function (hint) {
var index = hint.indexOf(lowerCaseQuery),
$hintObj = $('<span>'),
slugs = webfont.searchBySlug(hint);
// load the matching font scripts individually for cachability
slugs.forEach(function (slug) {
var font = webfont.getFontBySlug(slug),
script;
if (!(scriptCache.hasOwnProperty(slug)) && window.navigator.onLine) {
script = webfont.createInclude([font]);
$(script).appendTo("head");
scriptCache[slug] = true;
}
});</span>}
} else if (modeSupport.isFontNameToken(token)) { // is not wrapped in quotes
query = token.string.substring(0, cursor.ch - token.start);
} else { // after a ":", a space, or a ","
query = "";
}
// candidate hints are lower case, so the query should be too
lowerCaseQuery = query.toLocaleLowerCase();
var candidates = parser.parseCurrentEditor(true);
candidates = candidates.concat(lastTwentyFonts);
candidates = candidates.concat(webfont.getWebsafeFonts());
candidates = webfont.lowerSortUniqStringArray(candidates);
candidates = webfont.filterAndSortArray(query, candidates);
candidates = candidates.map(function (hint) {
var index = hint.indexOf(lowerCaseQuery),
$hintObj = $('<span>'),
slugs = webfont.searchBySlug(hint);
// load the matching font scripts individually for cachability
slugs.forEach(function (slug) {
var font = webfont.getFontBySlug(slug),
script;
if (!(scriptCache.hasOwnProperty(slug)) && window.navigator.onLine) {
script = webfont.createInclude([font]);
$(script).appendTo("head");
scriptCache[slug] = true;
}
});
</span>} else { // not in the text
query = "";
}
} else if (modeSupport.isFontNameToken(token)) { // is not wrapped in quotes
query = token.string.substring(0, cursor.ch - token.start);
} else { // after a ":", a space, or a ","
query = "";
}
// candidate hints are lower case, so the query should be too
lowerCaseQuery = query.toLocaleLowerCase();
var candidates = parser.parseCurrentEditor(true);
candidates = candidates.concat(lastTwentyFonts);
candidates = candidates.concat(webfont.getWebsafeFonts());
candidates = webfont.lowerSortUniqStringArray(candidates);
candidates = webfont.filterAndSortArray(query, candidates);
candidates = candidates.map(function (hint) {
var index = hint.indexOf(lowerCaseQuery),
$hintObj = $('<span>'),
slugs = webfont.searchBySlug(hint);
// load the matching font scripts individually for cachability
slugs.forEach(function (slug) {
var font = webfont.getFontBySlug(slug),
script;
if (!(scriptCache.hasOwnProperty(slug)) && window.navigator.onLine) {
script = webfont.createInclude([font]);
$(script).appendTo("head");
scriptCache[slug] = true;
}</span>candidates = candidates.map(function (hint) {
var index = hint.indexOf(lowerCaseQuery),
$hintObj = $('<span>'),
slugs = webfont.searchBySlug(hint);
// load the matching font scripts individually for cachability
slugs.forEach(function (slug) {
var font = webfont.getFontBySlug(slug),
script;
if (!(scriptCache.hasOwnProperty(slug)) && window.navigator.onLine) {
script = webfont.createInclude([font]);
$(script).appendTo("head");
scriptCache[slug] = true;
}
});
var fontNameSpan = $('<span class="ewf-fontname">');
// emphasize the matching substring
if (index >= 0) {</span></span>function main() {
webfont({
files: [
'resources/extra_icons/1_maximize.svg',
'resources/extra_icons/2_minimize.svg',
'resources/extra_icons/3_osx_close.svg',
'resources/extra_icons/4_osx_maximize.svg',
'resources/extra_icons/5_osx_minimize.svg',
'resources/extra_icons/6_triangle_down.svg',
'resources/extra_icons/7_triangle_up.svg',
'resources/extra_icons/8_rows.svg',
'resources/extra_icons/9_pocketknife.svg',
],
fontName: 'extraicons',
formats: ['ttf']
})
.then((result) => {
console.log("Done!");const fontName = 'font-ballerina';
const webfontConfig = {
files: path.resolve(__dirname, '../src/icons/**/*.svg'),
fontHeight: 1000,
normalize: true,
fontName,
templateClassName: 'fw',
template: path.resolve(__dirname, '../src/template/template.css.njk'),
glyphTransformFn: (obj) => {
codepoints[obj.name] = obj.unicode;
return obj;
},
hash: new Date().getTime(),
}
webfont(webfontConfig)
.then(result => {
if(!fs.existsSync(path.join(buildDir, 'font'))) {
fs.mkdirSync(path.join(buildDir, 'font'));
}
['svg', 'ttf', 'eot', 'woff', 'woff2'].forEach(ext => {
const fileName = `font-ballerina.${ext}`;
const filePath = path.join(buildDir, 'font', fileName);
fs.writeFile(filePath, result[ext], err => {
if (err) {
throw err;
}
console.log(`${fileName} written.`);
});
});webfont
Generator of fonts from svg icons, svg icons to svg font, svg font to ttf, ttf to eot, ttf to woff, ttf to woff2
