I haven’t explored this further yet. The temporary solution I have is to render a <Global /> component with the @font-face definitions, but the problem here is that the fonts will be required twice on load, because of the hydration of React, causing some flickering.
Imports:
import { css, Global } from "frontity";
import LibreBaskerville from "../../fonts/LibreBaskerville-Regular.ttf";
The ideal solution I think is to load the fonts outside of the React cycle somehow. Not sure how to do this and I couldn’t find a quick solution around, need to explore it more.
It is important that you define the @font-face in a separeted <Global /> element because if you do this in an existing <Global /> element that might be using a state variable and is subject to rerender, the @font-face definition would be rerendered as well, asking again for the fonts and causing the flickering.
ERROR in ./packages/competicion-theme/src/assets/fonts/Metropolis-Bold.ttf 1:0
Module parse failed: Unexpected character '' (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
(Source code omitted for this binary file)
Are you running the last version of frontity? The webpack's font loaders were added after the 1.0 so maybe you are missing that update? I didn’t run into that problem.
I also wonder if this problem exists when using Emotion’s extractCritical, which manually moves all the CSS to the <head> on SSR. We used to do that, but I removed it to be able to have source-maps. Maybe we can add it back in production.
I’ve done a quick test with TwentyTwenty and I cannot reproduce that problem. Fonts are only requested once for me.
This is the test:
const FontFace = ({ state }) => {
// I added a dependency on state.router.link so this component is
// rerendered each time it changes.
state.router.link;
// Now I do a console.log to check that component is being rendered
// successfully on each state.router.link change.
React.useEffect(() => {
console.log("The FontFace component has been rendered");
});
return (
<Global
styles={css`
@font-face {
// ...
}
`}
/>
);
};
I just checked this and realized that the problem exists in Firefox (and only if the cache is disabled), but not in Chrome. So… my bad! Thanks for looking into it though!
No, it doesn’t, but that only happens if the Firefox DevTools are open and “disable cache” is selected, so I guess it’s not something we should worry about. I’m going to leave it as it is.
ModuleParseError: Module parse failed: Unexpected character '' (1:4)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
In my package.json it says that the version is “1.0.0” and that I have the following dependencies:
Hi
I guess when working with Google Fonts you can just drop the &display=swap that comes on the end of the served URL. The font will behavior as a font-display: block;
I felt this post needed a clarification. Although, as of January, you cannot load otf files, loading other font files (ttf, woff, woff2, eot) is possible using the pattern on the following thread:
This seems to be an efficient way to load Google fonts as of now. Hopefully this will save someone the couple of hours worth of confusion I had when thinking a direct file import would not work.
First, make sure you have the font files (usually in formats like .woff, .woff2, .ttf, or .otf) that you want to use on your website Century Gothic Font Family. You may obtain these files from the font’s official website or other reliable sources.
