@fontsource/dm-serif-text
Advanced tools
Comparing version 4.2.3 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": "serif", | ||
| "source": "https://fonts.google.com/", | ||
@@ -13,0 +14,0 @@ "license": "https://fonts.google.com/attribution", |
| { | ||
| "name": "@fontsource/dm-serif-text", | ||
| "version": "4.2.3", | ||
| "version": "4.3.0", | ||
| "description": "Self-host the DM Serif Text font in a neatly bundled NPM package.", | ||
@@ -25,3 +25,3 @@ "main": "index.css", | ||
| }, | ||
| "gitHead": "f978071cb919d56226c149f7c0d1e61652bd1565" | ||
| "gitHead": "a6662f1f915c4779a5ef3f9b02efa8212a974788" | ||
| } |
@@ -5,7 +5,7 @@ # Fontsource DM Serif Text | ||
| The CSS and web font files to easily self-host the “DM Serif Text” 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 “DM Serif Text” font. Please visit the main [Fontsource website](https://fontsource.org/fonts/dm-serif-text) 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/dm-serif-text/500.css" // Weight 500. | ||
| import "@fontsource/dm-serif-text/900-italic.css" // Italic variant. | ||
| ``` | ||
| Alternatively, the same solutions could be imported via SCSS! | ||
| ```scss | ||
| @import "~@fontsource/dm-serif-text/index.css"; // Weight 400. | ||
| @import "~@fontsource/dm-serif-text/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 | ||
| @use "@fontsource/dm-serif-text/scss/mixins" as DMSerif Text; | ||
| // Uses a unicode-range map to automatically generate multiple @font-face rules. | ||
| @include DMSerif Text.fontFace($weight: 500, $display: fallback, $fontDir: | ||
| "~@fontsource/dm-serif-text/files"); | ||
| // Fully customisable single @font-face mixin. | ||
| @include DMSerif Text.fontFaceCustom($weight: 600, $display: optional, $woff2Path: | ||
| "#{$fontDir}/custom-file.woff2", $unicodeRange: false); | ||
| ``` | ||
| For those not using Dart Sass, you can still use @import although it can be highly problematic as variables are placed in the global scope which can conflict with existing Sass setups. It's highly recommended to migrate to Dart Sass as all other versions have been deprecated. | ||
| ```scss | ||
| @import "~@fontsource/dm-serif-text/scss/mixins"; | ||
| // Uses a unicode-range map to automatically generate multiple @font-face rules. | ||
| @include fontFace( | ||
| $weight: 500, | ||
| $display: fallback, | ||
| $fontDir: "~@fontsource/dm-serif-text/files" | ||
| ); | ||
| // Fully customisable single @font-face mixin. | ||
| @include fontFaceCustom( | ||
| $weight: 600, | ||
| $display: optional, | ||
| $woff2Path: "#{$fontDir}/custom-file.woff2", | ||
| $unicodeRange: false | ||
| ); | ||
| ``` | ||
| You can see all of the existing inputtable mixin variables [here](https://github.com/fontsource/fontsource/tree/master/packages/dm-serif-text/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]` | ||
@@ -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/dm-serif-text/latin-ext.css" // All weights with normal style included. | ||
| import "@fontsource/dm-serif-text/cyrillic-ext-500.css" // Weight 500 with normal style. | ||
| import "@fontsource/dm-serif-text/greek-900-italic.css" // Italic variant. | ||
| ``` | ||
| - Supported subsets: `[latin,latin-ext]` | ||
| ## Licensing | ||
@@ -105,0 +41,0 @@ |
No alert changes
Improved metrics
- Lines of code
- increased by0.86%
117
Worsened metrics
- Total package byte prevSize
- decreased by-0.48%
284215
- Number of lines in readme file
- decreased by-57.66%
47
No dependency changes