How to use webfontloader - 10 common examples

componentWillMount() {
        const that = this;
        WebfontLoader.load({
            google: {
                families: [
                    this.props.pair.primary.family,
                    this.props.pair.secondary.family
                ]
            },
            // loading: function() {
            //     console.debug("loading");
            // },
            // active: function() {
            //     console.debug("active");
            // },
            // inactive: function() {
            //     console.debug("inactive");
            // },
            // fontloading: function(familyName, fvd) {

/* global WebFont */

import WebFont from 'webfontloader';

WebFont.load({
  google: {
    families: ['Open Sans:400:latin-ext'],
  },
});

},
    parseUserData: function (data) {
        return data.user;
    },
    auth: knockAuth,
    http: require('@websanova/vue-auth/drivers/http/axios.1.x.js'),
    router: require('@websanova/vue-auth/drivers/router/vue-router.2.x.js')
});

import MQ from 'vue-match-media/dist'
Vue.use(MQ)

Vue.use(require('vee-validate'))
Vue.use(require('vue-shortkey'), { prevent: ['input', 'textarea'] })

WebFont.load({
    google: {
        families: ['Poppins:400,700']
    }
});

/* eslint-disable no-new */
new Vue({
    el: '#app',
    router,
    template: '',
    mq: {
        mobile: '(max-width: 980px)',
    },
    components: {
        App
    }

connectRouter(history)(rootReducer),
  composeEnhancer(
    applyMiddleware(
      routerMiddleware(history),
      thunk
    ),
  ),
)

// INITIALIZE
const resizeHandler = () => {
  store.dispatch(setResizeState())
}

// Load Fonts
WebFont.load({
  custom: {
    families: ['fff-regular', 'fff-italic'],
    urls: ['/assets/fonts.css']
  },
  active: () => {
    store.dispatch(fontsLoaded(true))
  }
})
store.dispatch(colorData())
resizeHandler()
// ADD EVENT LISTENERS
window.addEventListener('resize', _.throttle(resizeHandler, 50))

ReactDOM.render(

// Include libraries
import Vue from "vue";
import axios from "axios";
import WebFont from "webfontloader";

// Init Google Fonts
WebFont.load({
  google: {
    families: ["Open+Sans:300,400"]
  }
});

// Init Vue app
const kickstart_app = new Vue({
  el: "#kickstart-app",
  delimiters: ["[[", "]]"],
  data() {
    return {
      result: []
    };
  },
  methods: {
    getAllArticles: function() {

return new Promise((resolve) => {
      WebFont.load(Object.assign({}, this.fonts, {
        active: () => {
          this.systems.events.emit('load');
          resolve();
        },
      }));
    });
  }

import rough from 'roughjs';
import WebFont from 'webfontloader';
import 'wired-button';
import 'wired-input';

import {drawDiagram} from './diagram';

WebFont.load({
  active: main,
  google: {
    families: ['Gloria Hallelujah'],
  },
});

function rafThrottle<a>(callback: (...args: A) =&gt; any) {
  let requestId: number | undefined | null;
  return (...args: any[]) =&gt; {
    if (requestId == null) {
      requestId = requestAnimationFrame(() =&gt; {
        requestId = null;
        callback.apply(null, args);
      });
    }
  };</a>

import React from "react";
import ReactDOM from "react-dom";
import "./index.css";
import App from "./App";
import registerServiceWorker from "./registerServiceWorker";
import WebFont from "webfontloader";

WebFont.load({
  google: {
    families: ["Nunito:300,400,700", "Open Sans:300,400,700", "sans-serif"]
  }
});

ReactDOM.render(, document.getElementById("root"));
registerServiceWorker();

let source = props.source

    let urls
    if (props.family === 'FontAwesome') {
      source = 'custom'
      urls = [
        'https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css',
      ]
    } else if (typeof props.weight === 'string') {
      family = `${family}:${props.weight}`
    }

    if (loaded.includes(family)) return
    loaded.push(family)

    load({
      [source]: {
        families: [family],
        urls,
      },
    })
  }

import React from 'react';
import ReactDOM from 'react-dom';
import WebFont from 'webfontloader';
import App from './App';
import './index.css';

WebFont.load({
  google: {
    families: ['Titillium Web:300,400,700', 'sans-serif']
  }
});

ReactDOM.render(
  ,
  document.getElementById('root')
);