How to add fonts to create-react-app based projects

Question

I m using create-react-app and prefer not to eject   It s not clear where fonts imported via  font-face and loaded locally should go    Namely  I m loading   font-face     font-family   Myriad Pro Regular     font-style  normal    font-weight  normal    src  local  Myriad Pro Regular    url  MYRIADPRO-REGULAR woff   format  woff        Any suggestions   -- EDIT  Including the gist to which Dan referring in his answer     Client git  feature trivia-game-ui-2    ls -l public static fonts total 1168 -rwxr-xr-x  1 maximveksler  staff  62676 Mar 17  2014 MYRIADPRO-BOLD woff -rwxr-xr-x  1 maximveksler  staff  61500 Mar 17  2014 MYRIADPRO-BOLDCOND woff -rwxr-xr-x  1 maximveksler  staff  66024 Mar 17  2014 MYRIADPRO-BOLDCONDIT woff -rwxr-xr-x  1 maximveksler  staff  66108 Mar 17  2014 MYRIADPRO-BOLDIT woff -rwxr-xr-x  1 maximveksler  staff  60044 Mar 17  2014 MYRIADPRO-COND woff -rwxr-xr-x  1 maximveksler  staff  64656 Mar 17  2014 MYRIADPRO-CONDIT woff -rwxr-xr-x  1 maximveksler  staff  61848 Mar 17  2014 MYRIADPRO-REGULAR woff -rwxr-xr-x  1 maximveksler  staff  62448 Mar 17  2014 MYRIADPRO-SEMIBOLD woff -rwxr-xr-x  1 maximveksler  staff  66232 Mar 17  2014 MYRIADPRO-SEMIBOLDIT woff    Client git  feature trivia-game-ui-2    cat src containers GameModule css  GameModule     padding  15px      font-face     font-family   Myriad Pro Regular     font-style  normal    font-weight  normal    src  local  Myriad Pro Regular    url   PUBLIC URL  static fonts MYRIADPRO-REGULAR woff   format  woff        font-face     font-family   Myriad Pro Condensed     font-style  normal    font-weight  normal    src  local  Myriad Pro Condensed    url   PUBLIC URL  static fonts MYRIADPRO-COND woff   format  woff        font-face     font-family   Myriad Pro Semibold Italic     font-style  normal    font-weight  normal    src  local  Myriad Pro Semibold Italic    url   PUBLIC URL  static fonts MYRIADPRO-SEMIBOLDIT woff   format  woff        font-face     font-family   Myriad Pro Semibold     font-style  normal    font-weight  normal    src  local  Myriad Pro Semibold    url   PUBLIC URL  static fonts MYRIADPRO-SEMIBOLD woff   format  woff        font-face     font-family   Myriad Pro Condensed Italic     font-style  normal    font-weight  normal    src  local  Myriad Pro Condensed Italic    url   PUBLIC URL  static fonts MYRIADPRO-CONDIT woff   format  woff        font-face     font-family   Myriad Pro Bold Italic     font-style  normal    font-weight  normal    src  local  Myriad Pro Bold Italic    url   PUBLIC URL  static fonts MYRIADPRO-BOLDIT woff   format  woff        font-face     font-family   Myriad Pro Bold Condensed Italic     font-style  normal    font-weight  normal    src  local  Myriad Pro Bold Condensed Italic    url   PUBLIC URL  static fonts MYRIADPRO-BOLDCONDIT woff   format  woff        font-face     font-family   Myriad Pro Bold Condensed     font-style  normal    font-weight  normal    src  local  Myriad Pro Bold Condensed    url   PUBLIC URL  static fonts MYRIADPRO-BOLDCOND woff   format  woff        font-face     font-family   Myriad Pro Bold     font-style  normal    font-weight  normal    src  local  Myriad Pro Bold    url   PUBLIC URL  static fonts MYRIADPRO-BOLD woff   format  woff

User · Answer

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>

User · Answer

I spent the entire morning solving a similar problem after having landed on this stack question  I used Dan s first solution in the answer above as the jump off point   Problem  I have a dev  this is on my local machine   staging  and production environment  My staging and production environments live on the same server   The app is deployed to staging via acmeserver  staging note-taking-app and the production version lives at acmeserver note-taking-app  blame IT    All the media files such as fonts were loading perfectly fine on dev  i e   react-scripts start    However  when I created and uploaded staging and production builds  while the  css and  js files were loading properly  fonts were not  The compiled  css file looked to have a correct path but the browser http request was getting some very wrong pathing  shown below    The compiled main fc70b10f chunk css file    font-face     font-family  SairaStencilOne-Regular    src  url note-taking-app static media SairaStencilOne-Regular ca2c4b9f ttf    truetype        The browser http request is shown below  Note how it is adding in  static css  when the font file just lives in  static media  as well as duplicating the destination folder  I ruled out the server config being the culprit   The Referer is partly at fault too   GET   staging note-taking-app static css note-taking-app static media SairaStencilOne-Regular ca2c4b9f ttf HTTP 1 1 Host  acmeserver Origin  http   acmeserver Referer  http   acmeserver  staging note-taking-app static css main fc70b10f chunk css   The package json file had the homepage property set to   note-taking-app  This was causing the problem        name    note-taking-app      version    0 1 0      private   true     homepage      note-taking-app      scripts          start    env-cmd -e development react-scripts start        build    react-scripts build        build staging    env-cmd -e staging npm run build        build production    env-cmd -e production npm run build        test    react-scripts test        eject    react-scripts eject                  Solution  That was long winded     but the solution is to    change the PUBLIC URL env variable depending on the environment  remove the homepage property from the package json file   Below is my  env-cmdrc file  I use  env-cmdrc over regular  env because it keeps everything together in one file        development          PUBLIC URL            REACT APP API    http   acmeserver  staging note-taking-app api          staging          PUBLIC URL      staging note-taking-app        REACT APP API    http   acmeserver  staging note-taking-app api          production          PUBLIC URL     note-taking-app        REACT APP API    http   acmeserver note-taking-app api          Routing via react-router-dom works fine too     simply use the PUBLIC URL env variable as the basename property   import React from  react   import   BrowserRouter   from  react-router-dom    const createRouter   RootComponent   gt       lt BrowserRouter basename  process env PUBLIC URL  gt       lt RootComponent   gt     lt  BrowserRouter gt      export   createRouter      The server config is set to route all requests to the   index html file   Finally  here is what the compiled main fc70b10f chunk css file looks like after the discussed changes were implemented    font-face     font-family  SairaStencilOne-Regular    src  url   staging note-taking-app static media SairaStencilOne-Regular ca2c4b9f ttf      format  truetype        Reading material   https   create-react-app dev docs adding-custom-environment-variables adding-development-environment-variables-in-env https   create-react-app dev docs deployment serving-apps-with-client-side-routing https   create-react-app dev docs advanced-configuration   this explains the PUBLIC URL environment variable     Create React App assumes your application is hosted at the serving web server s root or a subpath as specified in package json  homepage   Normally  Create React App ignores the hostname  You may use this variable to force assets to be referenced verbatim to the url you provide  hostname included   This may be particularly useful when using a CDN to host your application

User · Answer

Go to Google Fonts https   fonts google com  Select your font as depicted in image below        Copy and then paste that url in new tab you will get the css code to add that font  In this case if you go to      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          lt Typography           variant  h1            gutterBottom           style    fontFamily   Spicy Rice   color   pink              gt            React Rock          lt  Typography gt    Result

User · Answer

Here are some ways of doing this   1  Importing font  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   2  For fonts hosted by Third party  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   lt link href  https   fonts googleapis com css family Montserrat  rel  stylesheet  gt    or    lt style gt       import url  https   fonts googleapis com css family Montserrat     lt  style gt    3  Downloading the font and adding it in your source code   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      4  Using web-font-loader package  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

User · Answer

You can use the WebFont module  which greatly simplifies the process   render      webfont load        custom           families    MyFont           urls     fonts MyFont woff                  return        lt div style  your style   gt        your text       lt  div gt

User · Answer

There are two options  Using Imports 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       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  Using public Folder If 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  lt link gt  to this stylesheet from public index html   lt link rel  quot stylesheet quot  href  quot  PUBLIC URL  index css quot  gt   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    Which Way to Use  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

User · Answer

I was making mistakes like this    import  https   fonts googleapis com css family Open Sans 300 300i 400 400i 600 600i 700 700i amp amp subset cyrillic cyrillic-ext latin-ext    import  https   use fontawesome com releases v5 3 1 css all css     It works properly this way   import url https   fonts googleapis com css family Open Sans 300 300i 400 400i 600 600i 700 700i amp amp subset cyrillic cyrillic-ext latin-ext    import url https   use fontawesome com releases v5 3 1 css all css

User · Answer

You can use the Web API FontFace constructor  also Typescript  without need of CSS  export async function loadFont fontFamily  string  url  string   Promise lt void gt        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  quot fonts-loaded quot       import ComicSans from  quot   assets fonts ComicSans ttf quot    loadFont  quot Comic Sans  quot   ComicSans  catch  e    gt        console log e        Declare a file font ts with your modules  TS only   declare module  quot   ttf quot   declare module  quot   woff quot   declare module  quot   woff2 quot    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

[css] How to add fonts to create-react-app based projects?

Examples related to css

Examples related to reactjs

Examples related to fonts

Examples related to webpack

Examples related to create-react-app