https://github.com/pagepro/fontsloader
Helps to get rid of FOIT
https://github.com/pagepro/fontsloader
Last synced: 2 months ago
JSON representation
Helps to get rid of FOIT
- Host: GitHub
- URL: https://github.com/pagepro/fontsloader
- Owner: Pagepro
- Created: 2015-12-11T12:59:26.000Z (over 9 years ago)
- Default Branch: master
- Last Pushed: 2015-12-11T13:29:54.000Z (over 9 years ago)
- Last Synced: 2025-03-22T06:01:44.015Z (2 months ago)
- Language: HTML
- Size: 6.84 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# FontsLoader
###Benefits
* Displays text after html is loaded
* Get rid of [FOIT](https://css-tricks.com/fout-foit-foft/)
## Requirements
1. [jQuery](https://jquery.com/)
2. [FontFaceObserver](https://github.com/bramstein/fontfaceobserver)
##Installation
###Step 1: Link plugins file
```html
```
###Step 2: Set up css styles
```css
body {
font-family: 'Arial';
}
.fonts-loaded body {
font-family: 'Open Sans';
}
.fonts-loaded .special {
font-family: 'Roboto'
}
```
###Step 3: Call function in javascript
```javascript
$(document).ready(function(){
$('html').fontLoader({
fonts: {
'Open Sans': [200, 400, 600, 700],
'Roboto': [100, 300, 400]
},
fontLoadedClass: 'fonts-loaded'
});
});
```
[DOC for @pagepro users](https://docs.google.com/a/pagepro.pl/document/d/1yh0CPeksutxzDg-zvwk_1z1UkShT1CG8iX8ACsCz8nQ/edit?usp=sharing)
[Presentation](https://docs.google.com/a/pagepro.pl/presentation/d/1W3S8i6XI6cwFdDq7IzGDWKau9FsKf0GUiRjlkcVAFPk/edit?usp=sharing)
##Configuration options
**fonts**
Objects with font family names as key and array of weights as value
```
default: 'Arial': [400]
options: fonts
```
**fontLoadedClass**
Fonts Loaded Class name
```
default: 'fonts-loaded'
options: class name
```
##Licenses
FontFaceObserver
Copyright 2014-2015 Bram Stein.
https://github.com/bramstein/fontfaceobserver