The text tool in Framer X doesn’t yet support custom fonts. We could install the fonts as system fonts, but they wouldn’t show up properly in mobile preview, or when we export the prototype.
We could write a code component that imports the fonts via the @font-face
CSS rule.
yarn add styled-components
container
folderOptionally we can create a fonts
sub-folder inside.
const GlobalStyle = createGlobalStyle`
@font-face {
font-family: Grand-Hotel;
src: url(${url("fonts/GrandHotel-Regular.otf")}) format("opentype");
}
`;
Notice here url
is imported from framer
:
import { url } from "framer/resource";
See this tip for more details.
<Container />
in render method<Container {...this.props}>
...
<GlobalStyle />
</Container>
font-family: Grand-Hotel;
If we put everything above inside a single component, say CustomFontText
, we’ll see the text flickering on the canvas when we move things around. This is perhaps because the @font-face
elements are frequently removed and added back when there’s an update to the CustomFontText
component.
A workaround is to install the fonts in a separate FontManager
component and drop the component once on the frame.
It’s an invisible component like this:
This way, when we update the CustomFontText
component, the @font-face
elements remain there. This is apparently a hacky solution. I’ll update this post if I find a better one. Comment below if you have any idea!
For better browser support and more details about the @font-face
rule, see this page. But at the very least, we can now send previews to clients without worrying about missing fonts!
PS: If you find this tip difficult to understand, check out this course I prepared for you, where concepts are explained in a more digestible way. No programming experience required!
PPS: See other pro tips, or share / request a new tip.
Want the complete source file? Enter your email address below:
I'll also send you new tips when available. No spam, unsubscribe any time!
© 2019 jimu Labs, Inc.