How to use webfontloader - 10 common examples

To help you get started, we’ve selected a few webfontloader 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.

github suprahfly / fontcards / client / components / card / card.jsx View on Github external
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) {
github infinum / eightshift-boilerplate / wp-content / themes / inf_theme / skin / assets / scripts / fonts.js View on Github external
/* global WebFont */

import WebFont from 'webfontloader';

WebFont.load({
  google: {
    families: ['Open Sans:400:latin-ext'],
  },
});
github jake / screenhole-web / src / main.js View on Github external
},
    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
    }
github dblodorn / sanzo-wada / src / index.js View on Github external
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(
github koddr / bottle-vue-kickstart / static / assets / js / script.js View on Github external
// 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() {
github goldfire / phaser-webpack-loader / src / index.js View on Github external
return new Promise((resolve) => {
      WebFont.load(Object.assign({}, this.fonts, {
        active: () => {
          this.systems.events.emit('load');
          resolve();
        },
      }));
    });
  }
github pyrocat101 / rough-diagram / src / main.ts View on Github external
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>
github satansdeer / gradient-token / front / src / index.js View on Github external
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();
github UXtemple / panels / blocks / font.js View on Github external
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,
      },
    })
  }
github brandiqa / react-web-fonts / src / index.js View on Github external
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')
);

webfontloader

Web Font Loader gives you added control when using linked fonts via @font-face.

Apache-2.0
Latest version published 7 years ago

Package Health Score

64 / 100
Full package analysis

Popular webfontloader functions