Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
@fontsource/karla
Advanced tools
@fontsource/karla - 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 |
@@ -14,2 +14,3 @@ { | ||
| "version": "v15", | ||
| "category": "sans-serif", | ||
| "source": "https://fonts.google.com/", | ||
@@ -16,0 +17,0 @@ "license": "https://fonts.google.com/attribution", |
| { | ||
| "name": "@fontsource/karla", | ||
| "version": "4.2.2", | ||
| "version": "4.3.0", | ||
| "description": "Self-host the Karla font in a neatly bundled NPM package.", | ||
@@ -25,3 +25,3 @@ "main": "index.css", | ||
| }, | ||
| "gitHead": "6f1ab8fd3e6c93d96a0fcd131f12409d142d9a9e" | ||
| "gitHead": "a6662f1f915c4779a5ef3f9b02efa8212a974788" | ||
| } |
112
README.md
@@ -5,7 +5,7 @@ # Fontsource Karla | ||
| The CSS and web font files to easily self-host the “Karla” 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 “Karla” font. Please visit the main [Fontsource website](https://fontsource.org/fonts/karla) 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/karla/500.css" // Weight 500. | ||
| import "@fontsource/karla/900-italic.css" // Italic variant. | ||
| ``` | ||
| Alternatively, the same solutions could be imported via SCSS! | ||
| ```scss | ||
| @import "~@fontsource/karla/index.css"; // Weight 400. | ||
| @import "~@fontsource/karla/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/karla/scss/mixins"; | ||
| // Uses a unicode-range map to automatically generate multiple @font-face rules. | ||
| @include fontFace( | ||
| $weight: 500, | ||
| $display: fallback, | ||
| $fontDir: "~@fontsource/karla/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/karla/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/karla/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]` | ||
@@ -95,52 +43,4 @@ Finally, you can reference the font name in a CSS stylesheet, CSS Module, or CSS-in-JS. | ||
| Begin by importing both the variable and fallback font for non-compatible browsers. | ||
| Variable documentation can be found [here](https://fontsource.org/docs/variable-fonts). | ||
| ```js | ||
| import "@fontsource/karla/400.css" // Weight 400. | ||
| ``` | ||
| Select either a stripped down weights only variant of the font or a full feature variant that contains all the variable axes. | ||
| ```js | ||
| import "@fontsource/karla/variable.css" // Contains ONLY variable weights and no other axes. | ||
| import "@fontsource/karla/variable-italic.css" // Italic variant. | ||
| // Or | ||
| import "@fontsource/karla/variable-full.css" // This contains ALL variable axes. Font files are larger. | ||
| import "@fontsource/karla/variable-full-italic.css" // Italic variant. | ||
| ``` | ||
| Note a `full` or `italic` variant may NOT exist if there are no additional axes other than wght and/or ital. You can check the available axes [here](https://fonts.google.com/variablefonts). | ||
| Followed by the CSS using the @supports tag, which checks whether the browser is capable of utilising variable fonts. Fallback fonts and their relevant CSS should be used outside the block, whilst all variable options should be used within the @supports block and utilising the font-variation-settings tag. | ||
| ```css | ||
| h1 { | ||
| font-family: Karla; | ||
| font-weight: 400; | ||
| } | ||
| @supports (font-variation-settings: normal) { | ||
| h1 { | ||
| font-family: KarlaVariable; | ||
| font-variation-settings: "wght" 400; | ||
| } | ||
| } | ||
| ``` | ||
| For Sass mixins, please use fontFaceVariable() and fontFaceVariableCustom which introduces the new $type variable to choose between "wghtOnly" and "full". | ||
| _To view the available variable axes that may be included in the font, click [here](https://fonts.google.com/variablefonts). The meanings of all axes and the restrictions associated with them are explained there._ | ||
| ## 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/karla/latin-ext.css" // All weights with normal style included. | ||
| import "@fontsource/karla/cyrillic-ext-500.css" // Weight 500 with normal style. | ||
| import "@fontsource/karla/greek-900-italic.css" // Italic variant. | ||
| ``` | ||
| - Supported subsets: `[latin,latin-ext]` | ||
| ## Licensing | ||
@@ -147,0 +47,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.15%
660
Worsened metrics
- Total package byte prevSize
- decreased by-0.16%
1487224
- Number of lines in readme file
- decreased by-65.36%
53
No dependency changes