{"id":19220057,"url":"https://github.com/nativescript-community/fonts","last_synced_at":"2025-05-13T01:10:19.228Z","repository":{"id":60510852,"uuid":"542673851","full_name":"nativescript-community/fonts","owner":"nativescript-community","description":null,"archived":false,"fork":false,"pushed_at":"2024-02-09T16:31:51.000Z","size":1890,"stargazers_count":6,"open_issues_count":1,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-05-13T01:10:00.398Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/nativescript-community.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2022-09-28T15:59:15.000Z","updated_at":"2023-03-23T18:44:44.000Z","dependencies_parsed_at":"2024-10-04T23:01:20.886Z","dependency_job_id":"3566b5de-6035-4321-aa34-43b45499d9dc","html_url":"https://github.com/nativescript-community/fonts","commit_stats":{"total_commits":16,"total_committers":1,"mean_commits":16.0,"dds":0.0,"last_synced_commit":"6615f2e2e4e05f4a230c732d884733471075621d"},"previous_names":[],"tags_count":4,"template":false,"template_full_name":"NativeScript/plugin-seed","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nativescript-community%2Ffonts","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nativescript-community%2Ffonts/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nativescript-community%2Ffonts/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nativescript-community%2Ffonts/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/nativescript-community","download_url":"https://codeload.github.com/nativescript-community/fonts/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":253851070,"owners_count":21973674,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-11-09T14:33:48.653Z","updated_at":"2025-05-13T01:10:19.202Z","avatar_url":"https://github.com/nativescript-community.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"## Using font icons with NativeScript\n\n### The Problem\n\nYou can use icon fonts with NativeScript by combining a class with a unicode reference in the view:\n\n* CSS\n```css\n.fa {\n  font-family: FontAwesome;\n}\n```\n\n* view\n```xml\n\u003cLabel class=\"fa\" text=\"\\uf293\"\u003e\u003c/Label\u003e\n```\n\nThis works but keeping up with unicodes is not fun.\n\n### The Solution\n\nWith this plugin, you can instead reference the `fonticon` by the specific classname:\n\n```xml\n\u003cLabel class=\"fas\" text=\"fa-bluetooth\"\u003e\u003c/Label\u003e \n```\n\n## Install\n\n```console\nnpm install @nativescript-community/fonts --save-dev\n```\n\n### Usage\n\nThe plugin performs two pieces of processing on your project when enabled at build time:\n\n* It will scan your code for the relevant character tokens, replacing them with the actual character.\n* It will parse your font file and remove all unused characters, which depending on your particular usage will greatly reduce the size of the font.\n\nThis processing is configured in your `webpack.config.js` and occurs at build time.\n\n### FontAwesome\n\n[FontAwesome](https://fontawesome.com/docs/web/setup/packages) is distributed as a npm package so we can make use of that to add it to our project.\n\n* Install as a dev dependency\n\n```console\nnpm i @fortawesome/fontawesome-free --save-dev\n```\n\n* Create classes in `app.css/scss` global file, for each font you wise to use:\n\n    ```css\n    .fas {\n    font-family: 'Font Awesome 6 Free', 'fa-solid-900';\n    font-weight: 900;\n    }\n\n    .far {\n    font-family: 'Font Awesome 6 Free', 'fa-regular-400';\n    font-weight: 400;\n    }\n\n    .fab {\n    font-family: 'Font Awesome 6 Brands', 'fa-brands-400';\n    font-weight: 400;\n    }\n    ```\n\n* Use the icon name in the text and set the class for the font, for example:\n\n    ```xml\n    \u003cLabel class=\"fas\" text=\"fa-trash-can\"\u003e\u003c/Label\u003e \n    ``` \n\n* Configure in your `webpack.config.js`\n\n  Import the required function/enum:\n    ```js\n    const { addFontsConfigFontAwesome, FontAwesomeFontType } = require('@nativescript-community/fonts');\n\n    ```\n  Configure the fonts that you are using:\n  ```js\n  addFontsConfigFontAwesome({ \n    fontTypes: [FontAwesomeFontType.solid, FontAwesomeFontType.brands, FontAwesomeFontType.regular], stripCharactersFromFont: true });\n  \n  ```\n\n### Material Design Fonts\n\n[Material Design Fonts](https://materialdesignicons.com) are also available as a npm package.\n\n* Install as a dev dependency\n\n    ```console\n    npm i @mdi/font --save-dev\n    ```\n\n* Create classes in `app.css/scss` global file, for the font:\n\n    ```css\n    .mdi {\n    font-family: 'Material Design Icons', 'materialdesignicons-webfont';\n    font-weight: 400;\n    }\n    ```\n\n* Use the icon name in the text and set the class for the font, for example:\n\n    ```xml\n    \u003cLabel class=\"mdi\" text=\"trash-can\"\u003e\u003c/Label\u003e \n    ``` \n\n* Configure in your `webpack.config.js`\n\n  Import the required function/enum:\n    ```js\n    const { addFontsConfigMDIFont } = require('@nativescript-community/fonts');\n\n    ```\n  Configure the fonts that you are using:\n  ```js\n   addFontsConfigMDIFont({\n    stripCharactersFromFont: true,\n    });  \n  ```\n\n### Other fonts\n\nYou can also use any other fonts:\n\nAn example where we explicitly define the tokens for the font [icofont](https://icofont.com/).\n\n* Download the font and place it in your project e.g. `fonts\\icofont.ttf`\n* Add the css\n    ```css\n    .icoFont {\n        font-family: 'IcoFont', 'icofont';\n        font-weight: 400;\n    }\n    ```\n* Configure in your `webpack.config.js`\n\n  Import the required function/enum:\n    ```js\n    const { addFontsConfigCustom } = require('@nativescript-community/fonts');\n\n\n    ```\n  Configure the fonts that you are using:\n  ```js\n      addFontsConfigCustom({\n        pathToFont: 'fonts/icofont.ttf',\n        tokenPrefix: 'icofont-',   // text text before the icon name in your source code\n        tokenValues: {\n        trash: 'ee09', // token name, character code\n        },\n        stripCharactersFromFont: true,\n    });\n  ```\n\n   \n* Use the font:\n    ```xml\n      \u003cLabel text=\"icofont-trash\" class=\"icoFont\"/\u003e\n    ```\n\nAn example where we are not using icons but want to optimize the font size,  [Google Monoton](https://fonts.google.com/specimen/Monoton).\n\n* Download the font and place it in your project e.g. `fonts\\Monoton-Regular.ttf`\n* Add the css\n    ```css\n    .monoton {\n    font-family: 'Monoton', 'Monoton-Regular';\n    font-weight: 400;\n    }\n    ```\n* Configure in your `webpack.config.js`\n\n  Import the required function/enum:\n    ```js\n    const { addFontsConfigCustom } = require('@nativescript-community/fonts');\n\n\n    ```\n  Configure the fonts that you are using:\n  ```js\n    addFontsConfigCustom({ pathToFont: 'fonts/Monoton-Regular.ttf', extraCharacters: 'trash-can', stripCharactersFromFont: true });\n  ```\n\n    We are not using this font for icons, so here we simply wish to optimize the font, and we pass in the few characters that we use this font for.\n* Use the font:\n    ```xml\n    \u003cLabel text=\"trash-can\" class=\"monoton\"/\u003e\n    ```\n\n\nAn example where we define the tokens for the font in an scss file, [dripicons](http://demo.amitjakhu.com/dripicons/).\n\n* Download the font and place it in your project e.g. `fonts\\dripicons-v2.ttf`\n* Add a scss file e.g. `fonts\\dripicons.scss` with the contents:\n    ```scss\n    $trash-can: \\e053;\n    ```\n* Add the css\n    ```css\n    .drip {\n    font-family: 'dripicons-v2', 'dripicons-v2';\n    font-weight: 400;\n    }\n    ```\n* Configure in your `webpack.config.js`\n\n  Import the required function/enum:\n    ```js\n    const { addFontsConfigCustom } = require('@nativescript-community/fonts');\n\n\n    ```\n  Configure the fonts that you are using:\n  ```js\n  \n    addFontsConfigCustom({ \n        pathToFont: 'fonts/dripicons-v2.ttf', \n        tokenPrefix: 'drip-', \n        tokenScss: 'fonts/dripicons.scss', \n        stripCharactersFromFont: true }\n    );\n\n  ```\n\n   \n* Use the font:\n    ```xml\n        \u003cLabel text=\"drip-trash-can\" class=\"drip\"/\u003e\n\n    ```\n### icomoon\nThis is also an example where the definitions for the tokens for the font are in an scss file, [IcoMoon](https://icomoon.io/).\n\n* Generate and Download your pack, making sure you generate sass.\n* Place the font and the `variables.scss` in your project e.g. in the `fonts\\icomoon` directory.\n* Add the css\n    ```css\n    .icon {\n      font-family: 'icomoon', 'iconmoon';\n      font-weight: 400;\n    }\n    ```\n* Configure in your `webpack.config.js`\n\n  Import the required function/enum:\n    ```js\n    const { addFontsConfigCustom } = require('@nativescript-community/fonts');\n\n\n    ```\n  Configure the fonts that you are using:\n  ```js\n  \n    addFontsConfigCustom({ pathToFont: 'fonts/icomoon/icomoon.ttf', \n      tokenPrefix: 'icon-', \n      tokenScss: 'fonts/icomoon/variables.scss', \n      tokenScssPrefix:'$icon-',\n      stripCharactersFromFont: true });\n\n  ```\n\n   \n* Use the font:\n    ```xml\n        \u003cLabel text=\"icon-spades\" class=\"btn btn-primary icon\"/\u003e\n    ```\n\n\n## Full Example webpack.config.js\n\n\n```js\nconst webpack = require(\"@nativescript/webpack\");\nconst { addFontsConfigFontAwesome, addFontsConfigMDIFont, \n\tFontAwesomeFontType, addFontsConfigCustom } = require('@nativescript-community/fonts');\nmodule.exports = (env) =\u003e {\n\twebpack.init(env);\n\n\taddFontsConfigFontAwesome({ \n\t\tfontTypes: [FontAwesomeFontType.solid, \n\t\t\t\t\tFontAwesomeFontType.brands, \n\t\t\t\t\tFontAwesomeFontType.regular],\n\t\t stripCharactersFromFont: true });\n\t  \n\t  addFontsConfigMDIFont({\n\t\tstripCharactersFromFont: true,\n\t  });\n\t  \n\t  addFontsConfigCustom({ \n\t\tpathToFont: 'fonts/Monoton-Regular.ttf', \n\t\textraCharacters: 'trash-can', \n\t\tstripCharactersFromFont: true });\n\t  \n\t  addFontsConfigCustom({\n\t\tpathToFont: 'fonts/icofont.ttf',\n\t\ttokenPrefix: 'icofont-',\n\t\ttokenValues: {\n\t\t  trash: 'ee09',\n\t\t},\n\t\tstripCharactersFromFont: true,\n\t  });\n\t  \n\t  addFontsConfigCustom({ \n\t\tpathToFont: 'fonts/dripicons-v2.ttf', \n\t\ttokenPrefix: 'drip-', \n\t\ttokenScss: 'fonts/dripicons.scss', \n\t\tstripCharactersFromFont: true });\n\n    addFontsConfigCustom({ pathToFont: 'fonts/icomoon/icomoon.ttf', \n          tokenPrefix: 'icon-', \n          tokenScss: 'fonts/icomoon/variables.scss', \n          tokenScssPrefix:'$icon-',\n          stripCharactersFromFont: true });\n\n\treturn webpack.resolveConfig();\n};\n```\n## Usage Notes\n\nIn the examples above `stripCharactersFromFont` is set to `true`.  This ensures tha the unused characters are stripped from the fonts.\n\nFor a better development experience you want to set this to false during development, one option is to set it to the value `env.production` which should be true on release builds.\n\n\n\n## Credits\n\nIdea came from [farfromrefug](https://github.com/farfromrefug)'s [post here](https://discord.com/channels/603595811204366337/606457523574407178/904382834570068058).\n\n\n# License\n\n[MIT](/LICENSE)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnativescript-community%2Ffonts","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fnativescript-community%2Ffonts","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnativescript-community%2Ffonts/lists"}