⚠️ If you are registering a different font, make sure you replace 'Raleway' with the name found in the former step (find font family name). In android/app/src/main/java/com/fontdemo/MainApplication.java, bind the font family name with the asset we just created inside onCreate method. You should think of this as the normal font size, and basically everything else a variation on it. Body Text The body text size in Material Design is 14sp. When running the same application on Android, the font weight is rendered correctly. The Text Widget is rendered with a light font weight (< 400). The Text Widget is rendered with font weight normal. w300) Compile it for Flutter Web and view it in Chrome Actual Behaviour. We must create one entry per fontStyle / fontWeight combination we wish to support, and Titles on mobile Material Design apps are 20sp. Add a Text Widget with font weight < 400 (e.g. fixfonts.sh /path/to/root/FontDemo/android/app/src/main/res/fontĬreate the android/app/src/main/res/font/raleway.xml file with the below content. You can use the below bash script (make sure you give the font folder as first argument): #!/bin/bash Replace any uppercase letter with its lowercase counterpart.We must rename the font files following these rules to comply with Android asset names restrictions: Copy and rename assets to the resource font folder mkdir android/app/src/main/res/fontĬp /tmp/raleway/*.ttf android/app/src/main/res/font This name will be used in React fontFamily style.

It is shipped with many Linux distributions. You will need otfinfo installed in your system to perform this step. I will use Raleway for this example, but this method should work with any font family! I am assuming that you have the whole Raleway font family TTF files, extracted in a temporary folder, /tmp/raleway. Remark: This procedure is available in React Native since commit fd6386a07eb75a8ec16b1384a3e5827dea520b64 ( ), with the addition of ReactFontManager::addCustomFont method.

I have written a complete guide here for a consistent typeface multi-platform experience. Since React Native 0.66.0 (tested with RN 0.66.3), it is absolutely feasible! The solution is to use XML Fonts feature for Android. Url('./fonts/patua-one-v15-latin-regular.Other answers are outdated. Url('./fonts/patua-one-v15-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */ Url('./fonts/patua-one-v15-latin-regular.woff') format('woff'), /* Modern Browsers */ Url('./fonts/patua-one-v15-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */

Url('./fonts/patua-one-v15-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ Src: url('./fonts/patua-one-v15-latin-regular.eot') /* IE9 Compat Modes */ In the admin area I then deactivated the button for Google Fonts. I would like to integrate Google Fonts locally and have followed the instructions on the homepage ( ).Īs CSS I added the following code and uploaded the appropriate files to the …/fonts folder via FTP.

Android font weight