{"id":18771033,"url":"https://github.com/rareloop/wp-font-fout","last_synced_at":"2025-06-17T08:34:17.196Z","repository":{"id":62533338,"uuid":"48113447","full_name":"Rareloop/wp-font-fout","owner":"Rareloop","description":"Optimise font loading, producing a FOUT instead of a FOIT","archived":false,"fork":false,"pushed_at":"2015-12-16T14:06:13.000Z","size":6,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":8,"default_branch":"master","last_synced_at":"2025-05-21T00:36:16.630Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"PHP","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Rareloop.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2015-12-16T13:58:28.000Z","updated_at":"2015-12-16T14:01:02.000Z","dependencies_parsed_at":"2022-11-02T16:00:47.666Z","dependency_job_id":null,"html_url":"https://github.com/Rareloop/wp-font-fout","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"purl":"pkg:github/Rareloop/wp-font-fout","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Rareloop%2Fwp-font-fout","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Rareloop%2Fwp-font-fout/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Rareloop%2Fwp-font-fout/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Rareloop%2Fwp-font-fout/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Rareloop","download_url":"https://codeload.github.com/Rareloop/wp-font-fout/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Rareloop%2Fwp-font-fout/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":260322459,"owners_count":22991831,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-11-07T19:22:55.364Z","updated_at":"2025-06-17T08:34:17.136Z","avatar_url":"https://github.com/Rareloop.png","language":"PHP","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Font FOUT\nWordPress plugin that allows browsers to show a Flash Of Unstyled Text (FOUT) when using web fonts.\n\n## Setup\nInstall \u0026 activate the plugin, then tell the plugin what font families to listen for:\n\n````php\n\u003c?php // functions.php\n\nRareloop\\FontFout::init([\n    'PT Serif',\n    'Open Sans',\n]);\n\n````\n\nThis will add the required JavaScript inline to the bottom of your `\u003cbody\u003e`. When all the fonts have loaded the `fonts-loaded` class will be added to your `\u003chtml\u003e` element. You can use this in your CSS to control when your web font is used:\n\n````css\nbody {\n    font-family: 'Georgia, serif';\n}\n\n.fonts-loaded body {\n    font-family: 'PT Serif, Georgia, serif';\n}\n````\n\n### More Configuration\n\nThe `init` function also take additional arguments that lets you control the cookie that is created to know when fonts are loaded. If you wanted to change the cookie name to `_fonts_cached_in_browser` and make it last 30 days you could do the following:\n\n````php\n\u003c?php // functions.php\n\nRareloop\\FontFout::init(['PT Serif'], '_fonts_cached_in_browser', 60 * 60 * 24 * 30);\n\n````\n\n## Optimising for future page views\n\nThe JavaScript injected into your page will set a cookie once all fonts are loaded. Once loaded you can assume that your users browser will have cached the font so shouldn't need to download again. In this instance you can have the `fonts-loaded` class added to your `\u003chtml\u003e` element before it's sent to the browser.\n\nTo add this optimisation you can use the following shortcode in your template:\n\n````html\n\u003c!DOCTYPE html\u003e\n\u003chtml class=\"no-js [fontfout-htmlclass]\"\u003e\n\u003chead\u003e\n    \u003ctitle\u003e...\u003c/title\u003e\n\u003c/head\u003e\n\u003cbody\u003e\n    ...\n\u003c/body\u003e\n\u003c/html\u003e\n````\n\nThe shortcode will only add the class when the cookie is detected. It will also prevent the inline JavaScript from being injected, reducing the payload of future page loads.\n\nThe plugin adds the following cookie: `fonts-loaded`, which you should add to your Cookie/Privacy Policy.","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frareloop%2Fwp-font-fout","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Frareloop%2Fwp-font-fout","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frareloop%2Fwp-font-fout/lists"}