Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
@fontsource/barlow
Advanced tools
@fontsource/barlow - npm Package Compare versions
Comparing version 4.2.2 to 4.3.0
@@ -15,2 +15,18 @@ # Changelog | ||
| ## 4.3.x | ||
| ### Features | ||
| - Added 'category' key to metadata.json. [#189](https://github.com/fontsource/fontsource/pull/189) | ||
| ### Fixes | ||
| - Update dependencies. [#187](https://github.com/fontsource/fontsource/pull/187) | ||
| ### Documentation | ||
| - New website. [#186](https://github.com/fontsource/fontsource/pull/186) [#188](https://github.com/fontsource/fontsource/pull/188) [#191](https://github.com/fontsource/fontsource/pull/191) [#192](https://github.com/fontsource/fontsource/pull/192) [#193](https://github.com/fontsource/fontsource/pull/193) [#194](https://github.com/fontsource/fontsource/pull/194) [#195](https://github.com/fontsource/fontsource/pull/195) [#196](https://github.com/fontsource/fontsource/pull/196) [#197](https://github.com/fontsource/fontsource/pull/197) [#198](https://github.com/fontsource/fontsource/pull/198) | ||
| - Update READMEs with new information. [#199](https://github.com/fontsource/fontsource/pull/199) | ||
| - GitHub Actions Git configs changed to 'fontsource-bot'. [#200](https://github.com/fontsource/fontsource/pull/200) | ||
| ## 4.2.x | ||
@@ -28,2 +44,5 @@ | ||
| - Resolved incorrect unicodeMap numeric subset names that linked to the wrong files. [#167](https://github.com/fontsource/fontsource/pull/167) | ||
| - Update Material Icons [#177](https://github.com/fontsource/fontsource/pull/177) | ||
| - Apply previous SCSS Generic updates [#178](https://github.com/fontsource/fontsource/pull/178) | ||
| - Update dependencies [#168](https://github.com/fontsource/fontsource/pull/168) [#169](https://github.com/fontsource/fontsource/pull/169) | ||
@@ -33,2 +52,3 @@ ### Documentation | ||
| - Changed package.json descriptions to something more mature. [#148](https://github.com/fontsource/fontsource/pull/148) | ||
| - README updates for Sass usage. [#173](https://github.com/fontsource/fontsource/pull/173) | ||
@@ -35,0 +55,0 @@ ## 4.1.x |
@@ -11,2 +11,3 @@ { | ||
| "version": "v5", | ||
| "category": "sans-serif", | ||
| "source": "https://fonts.google.com/", | ||
@@ -13,0 +14,0 @@ "license": "https://fonts.google.com/attribution", |
| { | ||
| "name": "@fontsource/barlow", | ||
| "version": "4.2.2", | ||
| "version": "4.3.0", | ||
| "description": "Self-host the Barlow font in a neatly bundled NPM package.", | ||
@@ -25,3 +25,3 @@ "main": "index.css", | ||
| }, | ||
| "gitHead": "6f1ab8fd3e6c93d96a0fcd131f12409d142d9a9e" | ||
| "gitHead": "a6662f1f915c4779a5ef3f9b02efa8212a974788" | ||
| } |
@@ -5,7 +5,7 @@ # Fontsource Barlow | ||
| The CSS and web font files to easily self-host the “Barlow” font. Please visit the main [Fontsource monorepo](https://github.com/fontsource/fontsource) to view more details on this package. | ||
| The CSS and web font files to easily self-host the “Barlow” font. Please visit the main [Fontsource website](https://fontsource.org/fonts/barlow) to view more details on this package. | ||
| ## Installation | ||
| ## Quick Installation | ||
| Fontsource assumes you are using a bundler, such as Webpack, to load in CSS. Solutions like [CRA](https://create-react-app.dev/), [Gatsby](https://www.gatsbyjs.org/) and [Next.js](https://nextjs.org/) are prebuilt examples that are compatible. | ||
| Fontsource has a variety of methods to import CSS, such as using a bundler like Webpack. Alternatively, it supports SASS. Full documentation can be found [here](https://fontsource.org/docs/introduction). | ||
@@ -16,3 +16,3 @@ ```javascript | ||
| Then within your app entry file or site component, import it in. For example in Gatsby, you could choose to import it into a layout template (`layout.js`), page component (`index.js`), or `gatsby-browser.js`. | ||
| Within your app entry file or site component, import it in. | ||
@@ -23,55 +23,2 @@ ```javascript | ||
| Fontsource allows you to select weights and even individual styles, allowing you to cut down on payload sizes to the last byte! Utilizing the CSS unicode-range selector, all language subsets are accounted for. | ||
| ```javascript | ||
| import "@fontsource/barlow/500.css" // Weight 500. | ||
| import "@fontsource/barlow/900-italic.css" // Italic variant. | ||
| ``` | ||
| Alternatively, the same solutions could be imported via SCSS! | ||
| ```scss | ||
| @import "~@fontsource/barlow/index.css"; // Weight 400. | ||
| @import "~@fontsource/barlow/300-italic.css"; | ||
| ``` | ||
| For more advanced setups, you can use our highly customisable Sass mixins that can modify many of the existing @font-face variables. | ||
| ```scss | ||
| @import "~@fontsource/barlow/scss/mixins"; | ||
| // Uses a unicode-range map to automatically generate multiple @font-face rules. | ||
| @include fontFace( | ||
| $weight: 500, | ||
| $display: fallback, | ||
| $fontDir: "~@fontsource/barlow/files" | ||
| ); | ||
| // Fully customisable single @font-face mixin. | ||
| @include fontFaceCustom( | ||
| $weight: 600, | ||
| $display: optional, | ||
| $woff2Path: "#{$fontDir}/custom-file.woff2", | ||
| $unicodeRange: false | ||
| ); | ||
| // More options available in link below. | ||
| ``` | ||
| We also have default variables that you can use! | ||
| ```scss | ||
| @import "~@fontsource/barlow/scss/mixins"; | ||
| $style: italic; | ||
| @include fontFace($weight: 500); | ||
| @include fontFace($weight: 600); | ||
| // Applies italic to both @includes. | ||
| ``` | ||
| You can see all of the existing inputtable mixin variables [here](https://github.com/fontsource/fontsource/tree/master/packages/barlow/scss/mixins.scss). | ||
| _These examples may not reflect actual compatibility. Please refer below._ | ||
| Supported variables: | ||
@@ -81,2 +28,3 @@ | ||
| - Styles: `[italic,normal]` | ||
| - Supported subsets: `[latin,latin-ext,vietnamese]` | ||
@@ -91,14 +39,2 @@ Finally, you can reference the font name in a CSS stylesheet, CSS Module, or CSS-in-JS. | ||
| ## Additional Options | ||
| In the rare case you need to individually select a language subset and not utilize the CSS unicode-range selector, you may specify the import as follows. This is especially not recommended for languages, such as Japanese, with a large amount of characters. | ||
| ```javascript | ||
| import "@fontsource/barlow/latin-ext.css" // All weights with normal style included. | ||
| import "@fontsource/barlow/cyrillic-ext-500.css" // Weight 500 with normal style. | ||
| import "@fontsource/barlow/greek-900-italic.css" // Italic variant. | ||
| ``` | ||
| - Supported subsets: `[latin,latin-ext,vietnamese]` | ||
| ## Licensing | ||
@@ -105,0 +41,0 @@ |
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Improved metrics
- Lines of code
- increased by0.07%
1338
Worsened metrics
- Total package byte prevSize
- decreased by-0.03%
3169779
- Number of lines in readme file
- decreased by-57.66%
47
No dependency changes