Gatsby: [gatsby-plugin-styled-components] Self-hosted font not loaded
Description
I'm using injectGlobals from styled-components to set a self-hosted custom for my site, however the default font is used instead.
I'm using the JS-import approach described @monsieurnebo in this comment.
My project src folder contains the following files
├───fonts
│ GloriaHallelujahTTF.ttf
│ index.js
│
└───pages
index.js
The contents of these files look as follows
// src/fonts/index.js
import GloriaHallelujahTTF from "./GloriaHallelujah.ttf"
export { GloriaHallelujahTTF }
```javascript
// src/pages/index.js
import React from "react"
import { injectGlobal } from "styled-components"
import * as fonts from "../fonts"
injectGlobal
@font-face {
font-family: 'Gloria Hallelujah';
font-style: normal;
font-weight: normal;
src: local('Gloria Hallelujah'), url('${fonts.GloriaHallelujahTTF}') format('ttf');
}
body {
font-family: 'Gloria Hallelujah';
font-size: 48px;
}
export default () =>
The HTML generated by `gatsby build` looks as follows
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<meta http-equiv="x-ua-compatible" content="ie=edge"/>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"/>
<link rel="preload" href="/component---src-pages-index-js-31b536ebdc8e15241425.js" as="script"/>
<link rel="preload" href="/path---index-a0e39f21c11f6a62c5ab.js" as="script"/>
<link rel="preload" href="/app-ceebbf1777514e6542b2.js" as="script"/>
<link rel="preload" href="/commons-e022f0772ff8dce9b915.js" as="script"/>
<style data-styled-components="">
/* sc-component-id: sc-global-660114477 */
@font-face{font-family:'Gloria Hallelujah';font-style:normal;font-weight:normal;src:local('Gloria Hallelujah'),url('/static/GloriaHallelujah.25d5fb55.ttf') format('ttf');} body{font-family:'Gloria Hallelujah';font-size:48px;}
</style>
<style id="gatsby-inlined-css"></style>
</head>
<body>
<div id="___gatsby">
<div data-reactroot="" data-reactid="1" data-react-checksum="-122217258">
<div data-reactid="2">Hello world!</div>
</div>
</div>
<script id="webpack-manifest">/*<![CDATA[*/window.webpackManifest={"231608221292675":"app-ceebbf1777514e6542b2.js","35783957827783":"component---src-pages-index-js-31b536ebdc8e15241425.js","142629428675168":"path---index-a0e39f21c11f6a62c5ab.js"}/*]]>*/</script><script>/*<![CDATA[*/["/commons-e022f0772ff8dce9b915.js","/app-ceebbf1777514e6542b2.js","/path---index-a0e39f21c11f6a62c5ab.js","/component---src-pages-index-js-31b536ebdc8e15241425.js"].forEach(function(s){document.write('<script src="'+s+'" defer></'+'script>')})/*]]>*/</script>
</body>
</html>
As described in this issue the devtools don't show any network request to load the font. However, the reason seems to be a different one as my font's file name does not contain any spaces as it was the case in that issue.
The generated CSS URL (/static/GloriaHallelujah.25d5fb55.ttf in my case) seems fine as I can reach the font file under http://localhost:9000/static/GloriaHallelujah.25d5fb55.ttf.
Steps to reproduce
Run gatsby new gatsby-site https://github.com/gatsbyjs/gatsby-starter-hello-world to init a new project. Add/update the files provided in this gist. Install all dependencies with npm install(or yarn install), build the site (gatsby build) and serve it (gatsby serve). Visit http://localhost:9000/.
Expected result
Self-hosted font should be used.
Actual result
Default font is being used.
Environment
System:
OS: macOS High Sierra 10.13.5
CPU: x64 Intel(R) Core(TM) i7-3720QM CPU @ 2.60GHz
Shell: 3.2.57 - /bin/bash
Binaries:
Node: 8.5.0 - ~/.nvm/versions/node/v8.5.0/bin/node
Yarn: 1.6.0 - /usr/local/bin/yarn
npm: 6.1.0 - ~/.nvm/versions/node/v8.5.0/bin/npm
Browsers:
Chrome: 67.0.3396.87
Firefox: 60.0.2
Safari: 11.1.1
npmPackages:
gatsby: ^1.9.250 => 1.9.272
gatsby-link: ^1.6.40 => 1.6.44
gatsby-plugin-styled-components: ^2.0.11 => 2.0.11
npmGlobalPackages:
gatsby-cli: 1.1.5
File contents (if changed)
gatsby-config.js:
module.exports = {
plugins: [`gatsby-plugin-styled-components`],
}
package.json:
{
"name": "gatsby-starter-hello-world",
"description": "Gatsby hello world starter",
"license": "MIT",
"scripts": {
"develop": "gatsby develop",
"build": "gatsby build",
"serve": "gatsby serve"
},
"dependencies": {
"babel-plugin-styled-components": "^1.5.1",
"gatsby": "^1.9.250",
"gatsby-link": "^1.6.40",
"gatsby-plugin-styled-components": "^2.0.11",
"styled-components": "^3.3.2"
}
}
gatsby-node.js: N/A
gatsby-browser.js: N/A
gatsby-ssr.js: N/A
asterikx
All 11 comments
Could you build a reproduction for us to look at? There's a number of sites that import fonts like this so it's not clear what is wrong.
KyleAMathews
on 19 Jun 2018
@KyleAMathews what exactly do you mean by build a reproduction? Should I push my code to some public repo so you can run and investigate it?
asterikx
on 19 Jun 2018
A stripped down version of your site that only has the code for loading your font so it's easy for a maintainer to review to see if there's a bug in core
KyleAMathews
on 19 Jun 2018
And yeah, public on GitHub
KyleAMathews
on 19 Jun 2018
Here's the repo. Thanks a lot!
asterikx
on 19 Jun 2018
Does this work if you import the font directly into src/pages/index.js?
KyleAMathews
on 19 Jun 2018
No, doesn't work :/
asterikx
on 19 Jun 2018
Hi, your format type in the
@font-face{
src: local('Gloria Hallelujah'), url('${
fonts.GloriaHallelujahTTF
}') format('ttf');
}
function is wrong: change format('ttf') to format('truetype') ;-)
valse
on 19 Jun 2018
Silly mistake... Thank you a lot @valse!
asterikx
on 19 Jun 2018
You also might want to use fontsquirrel's webfont generator — https://www.fontsquirrel.com/tools/webfont-generator
ttfs are much larger than woff2 so slow down your page speed.
KyleAMathews
on 19 Jun 2018
Hi,
I am facing same issue. Somehow my font are not getting applied. Fonts are defined globally.
`````
//global-fonts.js
import { createGlobalStyle } from 'styled-components';
import UbuntuRegular from 'themes/fonts/Ubuntu/Ubuntu-Regular.ttf';
export default createGlobalStyle `
@font-face {
font-family: "Ubuntu";
src: url('${UbuntuRegular}') format('truetype');
}
//fonts.js
// @flow
import type { Node } from 'react';
import '../global-fonts.js';
type typography = { [key: string]: string | any };
// Typography
export default ({
FALLBACK_FONT: 'Ubuntu',
PRIMARY_FONT: 'Ubuntu',
FONT_SIZE_BASE: '16px',
FONT_SIZE_DEFAULT: '14px',
FONT_SIZE_H1: "54px",
FONT_SIZE_H2: "32px",
FONT_WEIGHT_BOLD: "bold",
FONT_WEIGHT_NORMAL: "normal"
}: typography);
By using ThemeProvider font family is getting picked from theme. But it is not reflecting on web page.
Please help
khus29
on 13 Nov 2018
Related issues
3CordGuy
·
3Comments
brandonmp
·
3Comments
signalwerk
·
3Comments
rossPatton
·
3Comments
jimfilippou
·
3Comments
Most helpful comment
Hi, your format type in the
function is wrong: change
format('ttf')toformat('truetype');-)