To set a global font family in React, set the font-family style on the html element in your index. css file and import the file in your index. js file. Global CSS should be imported in index.
we know our react-native default fonts are San Francisco for iOS and Roboto for android.
There are two options:
This is the suggested option. It ensures your fonts go through the build pipeline, get hashes during compilation so that browser caching works correctly, and that you get compilation errors if the files are missing.
As described in “Adding Images, Fonts, and Files”, you need to have a CSS file imported from JS. For example, by default src/index.js
imports src/index.css
:
import './index.css';
A CSS file like this goes through the build pipeline, and can reference fonts and images. For example, if you put a font in src/fonts/MyFont.woff
, your index.css
might include this:
@font-face {
font-family: 'MyFont';
src: local('MyFont'), url(./fonts/MyFont.woff) format('woff');
/* other formats include: 'woff2', 'truetype, 'opentype',
'embedded-opentype', and 'svg' */
}
Notice how we’re using a relative path starting with ./
. This is a special notation that helps the build pipeline (powered by Webpack) discover this file.
Normally this should be enough.
public
FolderIf for some reason you prefer not to use the build pipeline, and instead do it the “classic way”, you can use the public
folder and put your fonts there.
The downside of this approach is that the files don’t get hashes when you compile for production so you’ll have to update their names every time you change them, or browsers will cache the old versions.
If you want to do it this way, put the fonts somewhere into the public
folder, for example, into public/fonts/MyFont.woff
. If you follow this approach, you should put CSS files into public
folder as well and not import them from JS because mixing these approaches is going to be very confusing. So, if you still want to do it, you’d have a file like public/index.css
. You would have to manually add <link>
to this stylesheet from public/index.html
:
<link rel="stylesheet" href="%PUBLIC_URL%/index.css">
And inside of it, you would use the regular CSS notation:
@font-face {
font-family: 'MyFont';
src: local('MyFont'), url(fonts/MyFont.woff) format('woff');
}
Notice how I’m using fonts/MyFont.woff
as the path. This is because index.css
is in the public
folder so it will be served from the public path (usually it’s the server root, but if you deploy to GitHub Pages and set your homepage
field to http://myuser.github.io/myproject
, it will be served from /myproject
). However fonts
are also in the public
folder, so they will be served from fonts
relatively (either http://mywebsite.com/fonts
or http://myuser.github.io/myproject/fonts
). Therefore we use the relative path.
Note that since we’re avoiding the build pipeline in this example, it doesn’t verify that the file actually exists. This is why I don’t recommend this approach. Another problem is that our index.css
file doesn’t get minified and doesn’t get a hash. So it’s going to be slower for the end users, and you risk the browsers caching old versions of the file.
Go with the first method (“Using Imports”). I only described the second one since that’s what you attempted to do (judging by your comment), but it has many problems and should only be the last resort when you’re working around some issue.
Here are some ways of doing this:
For example, for using Roboto, install the package using
yarn add typeface-roboto
or
npm install typeface-roboto --save
In index.js:
import "typeface-roboto";
There are npm packages for a lot of open source fonts and most of Google fonts. You can see all fonts here. All the packages are from that project.
For example Google fonts, you can go to fonts.google.com where you can find links that you can put in your public/index.html
It'll be like
<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
or
<style>
@import url('https://fonts.googleapis.com/css?family=Montserrat');
</style>
Download the font. For example, for google fonts, you can go to fonts.google.com. Click on the download button to download the font.
Move the font to fonts
directory in your src
directory
src
|
`----fonts
| |
| `-Lato/Lato-Black.ttf
| -Lato/Lato-BlackItalic.ttf
| -Lato/Lato-Bold.ttf
| -Lato/Lato-BoldItalic.ttf
| -Lato/Lato-Italic.ttf
| -Lato/Lato-Light.ttf
| -Lato/Lato-LightItalic.ttf
| -Lato/Lato-Regular.ttf
| -Lato/Lato-Thin.ttf
| -Lato/Lato-ThinItalic.ttf
|
`----App.css
Now, in App.css
, add this
@font-face {
font-family: 'Lato';
src: local('Lato'), url(./fonts/Lato-Regular.otf) format('opentype');
}
@font-face {
font-family: 'Lato';
font-weight: 900;
src: local('Lato'), url(./fonts/Lato-Bold.otf) format('opentype');
}
@font-face {
font-family: 'Lato';
font-weight: 900;
src: local('Lato'), url(./fonts/Lato-Black.otf) format('opentype');
}
For ttf
format, you have to mention format('truetype')
. For woff
, format('woff')
Now you can use the font in classes.
.modal-title {
font-family: Lato, Arial, serif;
font-weight: black;
}
Install package using
yarn add webfontloader
or
npm install webfontloader --save
In src/index.js
, you can import this and specify the fonts needed
import WebFont from 'webfontloader';
WebFont.load({
google: {
families: ['Titillium Web:300,400,700', 'sans-serif']
}
});
https://fonts.googleapis.com/css?family=Spicy+Rice
It will open like this:
4, Copy and paste that code in your style.css and simply start using that font like this:
<Typography
variant="h1"
gutterBottom
style={{ fontFamily: "Spicy Rice", color: "pink" }}
>
React Rock
</Typography>
Result:
You can use the Web API FontFace constructor (also Typescript) without need of CSS:
export async function loadFont(fontFamily: string, url: string): Promise<void> {
const font = new FontFace(fontFamily, `local(${fontFamily}), url(${url})`);
// wait for font to be loaded
await font.load();
// add font to document
document.fonts.add(font);
// enable font with CSS class
document.body.classList.add("fonts-loaded");
}
import ComicSans from "./assets/fonts/ComicSans.ttf";
loadFont("Comic Sans ", ComicSans).catch((e) => {
console.log(e);
});
Declare a file font.ts
with your modules (TS only):
declare module "*.ttf";
declare module "*.woff";
declare module "*.woff2";
If TS cannot find FontFace type as its still officially WIP, add this declaration to your project. It will work in your browser, except for IE.
You can use the WebFont module, which greatly simplifies the process.
render(){
webfont.load({
custom: {
families: ['MyFont'],
urls: ['/fonts/MyFont.woff']
}
});
return (
<div style={your style} >
your text!
</div>
);
}
Local fonts linking to your react js may be a failure. So, I prefer to use online css file from google to link fonts. Refer the following code,
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
or
<style>
@import url('https://fonts.googleapis.com/css?family=Roboto');
</style>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With