Git Product home page Git Product logo

untimate-fonts-loading's Introduction

Fonts loading

Overview

There is two main files, fonts.js and fallback.js. First is a core file, it contains main methods and code to load fonts with Fonts Loading API. Second is a fallback which is used when Fonts Loading API is not available. You can inline both files in page's html or just inline fonts.js and load fallback.js when needed.

  • fonts.min.js is 1.36 KB
  • fallback.min.js is 5.3 KB

Usage

Basic example:

<script>
  // Inline contents of fonts.js
  <%= fonts_js_file %>

  var fontSrc = 'local('Roboto'), local('Roboto-Regular'), url(https://fonts.gstatic.com/s/roboto/v15/oMMgfZMQthOryQo9n22dcuvvDin1pK8aKteLpeZ5c0A.woff2) format('woff2'), url(https://fonts.gstatic.com/s/roboto/v15/CrYjSnGjrRCn0pd9VQsnFOvvDin1pK8aKteLpeZ5c0A.woff) format('woff')';

  // Set url of a fallback file to be loaded when Fonts Loading API is not available
  Fonts.FALLBACK_FILE = 'fallback.js';
  Fonts.load([
    new Fonts.Font(fontSrc, 'Roboto', 700, 'normal'),
  ], function onLoad() {
    // Add class which uses loaded font
    document.body.className += ' fonts';
  }, function onError() {
    // ...
  });
</script>

API

Fonts.load(fonts: Array<Fonts.Font>, onLoad?: Function, onError?: Function);

Loads passed Fonts.


new Fonts.Font(source: string, family: string, weight?: number, style?: string, text?: string);

Creates Font object which can be used by Fonts Loading API or fallback.js.


Fonts.setSample(fontType: string, text: string);

Sets text samples to test fonts existence.

Example 1: Fonts.setSample('16px Roboto', 'тест') to test cyrilic text

Example 2:

var font = new Fonts.Font('...', 'Roboto');

Fonts.setSample(Fonts.getFontType(font), 'тест');

Fonts.load([font], ...);

Does same as Example 1, but uses getFontType(font: Fonts.Font) method to stringify Font to font (CSS's font property value) and then re-uses same Font to load it.


Fonts.USE_FONTS_API: boolean;

Set to false before calling load() to prevent usage of Fonts Loading API.

Example: Fonts.USE_FONTS_API = false;


Hot it works

Description about fallback.js implementation will be added later. Still may have bugs, of course.

License

MIT

untimate-fonts-loading's People

Contributors

nekr avatar

Stargazers

Dudaevskiy avatar Sjoerd Bodbijl avatar

Watchers

 avatar  avatar

untimate-fonts-loading's Issues

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.