From 06a0c49cf39dd47fc415d2521c676da8aa269ef6 Mon Sep 17 00:00:00 2001 From: George Burduli Date: Sun, 14 Feb 2021 14:11:00 +0400 Subject: [PATCH 1/5] Added if condition for ttf font-types to include 'truetype' in CSS format --- mixin.scss | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/mixin.scss b/mixin.scss index 28354c9..5a1a116 100644 --- a/mixin.scss +++ b/mixin.scss @@ -31,7 +31,13 @@ $fonts-path: '../fonts' !default; $src: (local('☺')); $family-folder: str-replace($font-family, ' ', '-'); @each $type in $font-types { - $src: append($src, url('#{$fonts-path}/#{$font-family}/#{nth($font-file, 1)}.#{$type}') format('#{$type}'), 'comma'); + @if $type == 'ttf' { + // Allows ttf fonts to be correctly included in CSS + $ttf-type: 'truetype'; + $src: append($src, url('#{$fonts-path}/#{$font-family}/#{nth($font-file, 1)}.#{$type}') format('#{$ttf-type}'), 'comma'); + } @else { + $src: append($src, url('#{$fonts-path}/#{$font-family}/#{nth($font-file, 1)}.#{$type}') format('#{$type}'), 'comma'); + } } @return $src; } From f4fa8b47923475f66a66c9ccf79c70da9c3d5960 Mon Sep 17 00:00:00 2001 From: George Burduli Date: Sun, 14 Feb 2021 15:15:30 +0400 Subject: [PATCH 2/5] Fixed ttf format condition and added test cases --- mixin.scss | 9 ++++----- tests/generator/generator.test.css | 12 ++++++------ tests/generator/generator.test.scss | 2 +- tests/mixin/mixin.test.css | 4 ++-- tests/mixin/mixin.test.scss | 4 +++- 5 files changed, 16 insertions(+), 15 deletions(-) diff --git a/mixin.scss b/mixin.scss index 5a1a116..609723d 100644 --- a/mixin.scss +++ b/mixin.scss @@ -31,13 +31,12 @@ $fonts-path: '../fonts' !default; $src: (local('☺')); $family-folder: str-replace($font-family, ' ', '-'); @each $type in $font-types { + $format-type: $type; @if $type == 'ttf' { - // Allows ttf fonts to be correctly included in CSS - $ttf-type: 'truetype'; - $src: append($src, url('#{$fonts-path}/#{$font-family}/#{nth($font-file, 1)}.#{$type}') format('#{$ttf-type}'), 'comma'); - } @else { - $src: append($src, url('#{$fonts-path}/#{$font-family}/#{nth($font-file, 1)}.#{$type}') format('#{$type}'), 'comma'); + //Allows ttf fonts to be correctly included in CSS + $format-type: 'truetype'; } + $src: append($src, url('#{$fonts-path}/#{$font-family}/#{nth($font-file, 1)}.#{$type}') format('#{$format-type}'), 'comma'); } @return $src; } diff --git a/tests/generator/generator.test.css b/tests/generator/generator.test.css index c4db8bf..83c898d 100644 --- a/tests/generator/generator.test.css +++ b/tests/generator/generator.test.css @@ -1,36 +1,36 @@ @charset "UTF-8"; @font-face { font-family: "Open Sans"; - src: local("☺"), url("/path/to/fonts/Open Sans/open-sans-light.woff2") format("woff2"), url("/path/to/fonts/Open Sans/open-sans-light.woff") format("woff"); + src: local("☺"), url("/path/to/fonts/Open Sans/open-sans-light.ttf") format("truetype"); font-weight: 300; font-style: normal; } @font-face { font-family: "Open Sans"; - src: local("☺"), url("/path/to/fonts/Open Sans/open-sans-normal.woff2") format("woff2"), url("/path/to/fonts/Open Sans/open-sans-normal.woff") format("woff"); + src: local("☺"), url("/path/to/fonts/Open Sans/open-sans-normal.ttf") format("truetype"); font-weight: 400; font-style: normal; } @font-face { font-family: "Open Sans"; - src: local("☺"), url("/path/to/fonts/Open Sans/open-sans-normal-italic.woff2") format("woff2"), url("/path/to/fonts/Open Sans/open-sans-normal-italic.woff") format("woff"); + src: local("☺"), url("/path/to/fonts/Open Sans/open-sans-normal-italic.ttf") format("truetype"); font-weight: 400; font-style: italic; } @font-face { font-family: "Open Sans"; - src: local("☺"), url("/path/to/fonts/Open Sans/open-sans-semibold.woff2") format("woff2"), url("/path/to/fonts/Open Sans/open-sans-semibold.woff") format("woff"); + src: local("☺"), url("/path/to/fonts/Open Sans/open-sans-semibold.ttf") format("truetype"); font-weight: 600; font-style: normal; } @font-face { font-family: "Open Sans"; - src: local("☺"), url("/path/to/fonts/Open Sans/open-sans-bold.woff2") format("woff2"), url("/path/to/fonts/Open Sans/open-sans-bold.woff") format("woff"); + src: local("☺"), url("/path/to/fonts/Open Sans/open-sans-bold.ttf") format("truetype"); font-weight: 700; font-style: normal; } @font-face { font-family: "Font Two"; - src: local("☺"), url("/path/to/fonts/Font Two/font-two.woff2") format("woff2"), url("/path/to/fonts/Font Two/font-two.woff") format("woff"); + src: local("☺"), url("/path/to/fonts/Font Two/font-two.ttf") format("truetype"); font-weight: 400; font-style: normal; } diff --git a/tests/generator/generator.test.scss b/tests/generator/generator.test.scss index 7e648a2..7146c9e 100644 --- a/tests/generator/generator.test.scss +++ b/tests/generator/generator.test.scss @@ -15,7 +15,7 @@ $fonts: ( ) ); -$font-file-types: 'woff2' 'woff'; +$font-file-types: 'ttf'; $fonts-path: '/path/to/fonts'; diff --git a/tests/mixin/mixin.test.css b/tests/mixin/mixin.test.css index 6dca265..40c8863 100644 --- a/tests/mixin/mixin.test.css +++ b/tests/mixin/mixin.test.css @@ -31,13 +31,13 @@ @font-face { font-family: "Font One"; - src: local("☺"), url("../fonts/Font One/font-one.woff") format("woff"); + src: local("☺"), url("../fonts/Font One/font-one.ttf") format("truetype"); font-weight: 400; font-style: normal; } @font-face { font-family: "Font Two"; - src: local("☺"), url("../fonts/Font Two/font-two.woff") format("woff"); + src: local("☺"), url("../fonts/Font Two/font-two.ttf") format("truetype"); font-weight: 400; font-style: normal; } diff --git a/tests/mixin/mixin.test.scss b/tests/mixin/mixin.test.scss index ab3a84b..1d47327 100644 --- a/tests/mixin/mixin.test.scss +++ b/tests/mixin/mixin.test.scss @@ -20,7 +20,9 @@ 'Font Two' : ( 400 : 'font-two' ) -)); +), +$types: 'ttf' +); @include font-face( $fonts: ( From 54687ffb4d243b112fd6115cb32a179fb91732dd Mon Sep 17 00:00:00 2001 From: Daniel Tonon Date: Sun, 14 Feb 2021 22:42:40 +1100 Subject: [PATCH 3/5] Fixed ttf tests --- tests/generator/generator.test.css | 12 ++++++------ tests/generator/generator.test.scss | 2 +- tests/mixin/mixin.test.css | 16 ++++++++++++++-- tests/mixin/mixin.test.scss | 24 +++++++++++++++++++++--- 4 files changed, 42 insertions(+), 12 deletions(-) diff --git a/tests/generator/generator.test.css b/tests/generator/generator.test.css index 83c898d..8dd3824 100644 --- a/tests/generator/generator.test.css +++ b/tests/generator/generator.test.css @@ -1,36 +1,36 @@ @charset "UTF-8"; @font-face { font-family: "Open Sans"; - src: local("☺"), url("/path/to/fonts/Open Sans/open-sans-light.ttf") format("truetype"); + src: local("☺"), url("/path/to/fonts/Open Sans/open-sans-light.woff2") format("woff2"), url("/path/to/fonts/Open Sans/open-sans-light.woff") format("woff"), url("/path/to/fonts/Open Sans/open-sans-light.ttf") format("truetype"); font-weight: 300; font-style: normal; } @font-face { font-family: "Open Sans"; - src: local("☺"), url("/path/to/fonts/Open Sans/open-sans-normal.ttf") format("truetype"); + src: local("☺"), url("/path/to/fonts/Open Sans/open-sans-normal.woff2") format("woff2"), url("/path/to/fonts/Open Sans/open-sans-normal.woff") format("woff"), url("/path/to/fonts/Open Sans/open-sans-normal.ttf") format("truetype"); font-weight: 400; font-style: normal; } @font-face { font-family: "Open Sans"; - src: local("☺"), url("/path/to/fonts/Open Sans/open-sans-normal-italic.ttf") format("truetype"); + src: local("☺"), url("/path/to/fonts/Open Sans/open-sans-normal-italic.woff2") format("woff2"), url("/path/to/fonts/Open Sans/open-sans-normal-italic.woff") format("woff"), url("/path/to/fonts/Open Sans/open-sans-normal-italic.ttf") format("truetype"); font-weight: 400; font-style: italic; } @font-face { font-family: "Open Sans"; - src: local("☺"), url("/path/to/fonts/Open Sans/open-sans-semibold.ttf") format("truetype"); + src: local("☺"), url("/path/to/fonts/Open Sans/open-sans-semibold.woff2") format("woff2"), url("/path/to/fonts/Open Sans/open-sans-semibold.woff") format("woff"), url("/path/to/fonts/Open Sans/open-sans-semibold.ttf") format("truetype"); font-weight: 600; font-style: normal; } @font-face { font-family: "Open Sans"; - src: local("☺"), url("/path/to/fonts/Open Sans/open-sans-bold.ttf") format("truetype"); + src: local("☺"), url("/path/to/fonts/Open Sans/open-sans-bold.woff2") format("woff2"), url("/path/to/fonts/Open Sans/open-sans-bold.woff") format("woff"), url("/path/to/fonts/Open Sans/open-sans-bold.ttf") format("truetype"); font-weight: 700; font-style: normal; } @font-face { font-family: "Font Two"; - src: local("☺"), url("/path/to/fonts/Font Two/font-two.ttf") format("truetype"); + src: local("☺"), url("/path/to/fonts/Font Two/font-two.woff2") format("woff2"), url("/path/to/fonts/Font Two/font-two.woff") format("woff"), url("/path/to/fonts/Font Two/font-two.ttf") format("truetype"); font-weight: 400; font-style: normal; } diff --git a/tests/generator/generator.test.scss b/tests/generator/generator.test.scss index 7146c9e..9331295 100644 --- a/tests/generator/generator.test.scss +++ b/tests/generator/generator.test.scss @@ -15,7 +15,7 @@ $fonts: ( ) ); -$font-file-types: 'ttf'; +$font-file-types: 'woff2' 'woff' 'ttf'; $fonts-path: '/path/to/fonts'; diff --git a/tests/mixin/mixin.test.css b/tests/mixin/mixin.test.css index 40c8863..bdde0d5 100644 --- a/tests/mixin/mixin.test.css +++ b/tests/mixin/mixin.test.css @@ -31,13 +31,13 @@ @font-face { font-family: "Font One"; - src: local("☺"), url("../fonts/Font One/font-one.ttf") format("truetype"); + src: local("☺"), url("../fonts/Font One/font-one.woff") format("woff"); font-weight: 400; font-style: normal; } @font-face { font-family: "Font Two"; - src: local("☺"), url("../fonts/Font Two/font-two.ttf") format("truetype"); + src: local("☺"), url("../fonts/Font Two/font-two.woff") format("woff"); font-weight: 400; font-style: normal; } @@ -59,6 +59,18 @@ font-weight: 400; font-style: normal; } +@font-face { + font-family: "TTF Font"; + src: local("☺"), url("/global/path/to/fonts/TTF Font/ttf-normal.ttf") format("truetype"); + font-weight: 400; + font-style: normal; } + +@font-face { + font-family: "TTF with backup Font"; + src: local("☺"), url("/global/path/to/fonts/TTF with backup Font/ttf-normal.ttf") format("truetype"), url("/global/path/to/fonts/TTF with backup Font/ttf-normal.woff") format("woff"); + font-weight: 400; + font-style: normal; } + @font-face { font-family: "Open Sans"; src: local("☺"), url("/path/to/fonts/Open Sans/open-sans-light.woff2") format("woff2"), url("/path/to/fonts/Open Sans/open-sans-light.woff") format("woff"); diff --git a/tests/mixin/mixin.test.scss b/tests/mixin/mixin.test.scss index 1d47327..06e94cd 100644 --- a/tests/mixin/mixin.test.scss +++ b/tests/mixin/mixin.test.scss @@ -20,9 +20,7 @@ 'Font Two' : ( 400 : 'font-two' ) -), -$types: 'ttf' -); +)); @include font-face( $fonts: ( @@ -57,6 +55,26 @@ $fonts-path: '/global/path/to/fonts'; $types: 'woff' ); +@include font-face( + $fonts: ( + 'TTF Font' : ( + 400 : 'ttf-normal' + ) + ), + // overide the default file types setting + $types: 'ttf' +); + +@include font-face( + $fonts: ( + 'TTF with backup Font' : ( + 400 : 'ttf-normal' + ) + ), + // overide the default file types setting + $types: 'ttf' 'woff' +); + @include font-face( $fonts: ( 'Open Sans' : ( From bce0bd973cf15fe63ba2ef1dee08ce0d329de231 Mon Sep 17 00:00:00 2001 From: Daniel Tonon Date: Sun, 14 Feb 2021 22:47:04 +1100 Subject: [PATCH 4/5] Version bump to v1.1.2 --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 2481f45..8779cd0 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "font-face-generator", - "version": "1.1.1", + "version": "1.1.2", "description": "An @font-face code generator for SCSS", "main": "mixin.scss", "scripts": { From e26dfc1341ffbcfed094666960aac15110f549c2 Mon Sep 17 00:00:00 2001 From: Daniel Tonon Date: Sun, 14 Feb 2021 23:00:45 +1100 Subject: [PATCH 5/5] Adding a Contributing section to README.md --- README.md | 14 ++++++++++++++ 1 file changed, 14 insertions(+) diff --git a/README.md b/README.md index 654117f..2ba00f9 100644 --- a/README.md +++ b/README.md @@ -456,3 +456,17 @@ That will produce this css: unicode-range: U+0025-00FF; } `````` + +## Contributing + +Please make PRs against `develop` branch rather than `master` branch. + +### Writing tests + +Please make tests for your changes. Avoid modifying existing tests, it is better to make new ones (though this isn't always practical for `generator.test.scss`). + +Write tests for your changes in `tests/mixin/mixin.test.scss` and `tests/generator/generator.test.scss`. + +`npm i` to install packages, `npx gulp` to generate the CSS from the test scss files. + +Use git to compare the old CSS output with the new CSS output. If git identifies any changes, check that those changes are expected.