Skip to content

Commit

Permalink
Refactor CSS options
Browse files Browse the repository at this point in the history 
* Add/Rename CSS options and font formats to reflect the current (2023) state of technology.
* Change default to modern browsers.

New updated CSS options:
Label: font format
Modern Browser: woff2
Legacy Support: woff2 + ttf
Historic Support: woff2 + woff + ttf + svg + eot
  • Loading branch information
@Rotzbua
Rotzbua committed May 15, 2023
1 parent 5800006 commit dce8d51
Show file tree
Hide file tree
Showing 3 changed files with 57 additions and 29 deletions.
29 changes: 19 additions & 10 deletions client/app/cssCode/cssCode.html
View file
Original file line number Diff line number Diff line change
@@ -1,25 +1,34 @@
<pre ng-if="type.bestSupport"><code data-hljs="css" highlightjs>/* {{fontItem.id}}-{{variant.id}} - {{fontItem.storeID}} */
<pre ng-if="type.modernSupport"><code data-hljs="css" highlightjs>/* {{fontItem.id}}-{{variant.id}} - {{fontItem.storeID}} */
@font-face {
font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
font-family: {{variant.fontFamily}};
font-style: {{variant.fontStyle}};
font-weight: {{variant.fontWeight}};
src: url('{{folderPrefix}}{{fontItem.id}}-{{fontItem.version}}-{{fontItem.storeID}}-{{variant.id}}.eot'); /* IE9 Compat Modes */
src: url('{{folderPrefix}}{{fontItem.id}}-{{fontItem.version}}-{{fontItem.storeID}}-{{variant.id}}.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('{{folderPrefix}}{{fontItem.id}}-{{fontItem.version}}-{{fontItem.storeID}}-{{variant.id}}.woff2') format('woff2'), /* Super Modern Browsers */
url('{{folderPrefix}}{{fontItem.id}}-{{fontItem.version}}-{{fontItem.storeID}}-{{variant.id}}.woff') format('woff'), /* Modern Browsers */
url('{{folderPrefix}}{{fontItem.id}}-{{fontItem.version}}-{{fontItem.storeID}}-{{variant.id}}.ttf') format('truetype'), /* Safari, Android, iOS */
url('{{folderPrefix}}{{fontItem.id}}-{{fontItem.version}}-{{fontItem.storeID}}-{{variant.id}}.svg#{{variant.svg.substring(variant.svg.indexOf('#')+1);}}') format('svg'); /* Legacy iOS */
src: url('{{folderPrefix}}{{fontItem.id}}-{{fontItem.version}}-{{fontItem.storeID}}-{{variant.id}}.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
</code></pre>
<pre ng-if="type.modernBrowsers"><code data-hljs="css" highlightjs>/* {{fontItem.id}}-{{variant.id}} - {{fontItem.storeID}} */
<pre ng-if="type.legacySupport"><code data-hljs="css" highlightjs>/* {{fontItem.id}}-{{variant.id}} - {{fontItem.storeID}} */
@font-face {
font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
font-family: {{variant.fontFamily}};
font-style: {{variant.fontStyle}};
font-weight: {{variant.fontWeight}};
src: url('{{folderPrefix}}{{fontItem.id}}-{{fontItem.version}}-{{fontItem.storeID}}-{{variant.id}}.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+ */
url('{{folderPrefix}}{{fontItem.id}}-{{fontItem.version}}-{{fontItem.storeID}}-{{variant.id}}.woff') format('woff'); /* Chrome 5+, Firefox 3.6+, IE 9+, Safari 5.1+ */
src: url('{{folderPrefix}}{{fontItem.id}}-{{fontItem.version}}-{{fontItem.storeID}}-{{variant.id}}.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
url('{{folderPrefix}}{{fontItem.id}}-{{fontItem.version}}-{{fontItem.storeID}}-{{variant.id}}.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}
</code></pre>
<pre ng-if="type.historicSupport"><code data-hljs="css" highlightjs>/* {{fontItem.id}}-{{variant.id}} - {{fontItem.storeID}} */
@font-face {
font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
font-family: {{variant.fontFamily}};
font-style: {{variant.fontStyle}};
font-weight: {{variant.fontWeight}};
src: url('{{folderPrefix}}{{fontItem.id}}-{{fontItem.version}}-{{fontItem.storeID}}-{{variant.id}}.eot'); /* IE9 Compat Modes */
src: url('{{folderPrefix}}{{fontItem.id}}-{{fontItem.version}}-{{fontItem.storeID}}-{{variant.id}}.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('{{folderPrefix}}{{fontItem.id}}-{{fontItem.version}}-{{fontItem.storeID}}-{{variant.id}}.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
url('{{folderPrefix}}{{fontItem.id}}-{{fontItem.version}}-{{fontItem.storeID}}-{{variant.id}}.woff') format('woff'), /* Chrome 5+, Firefox 3.6+, IE 9+, Safari 5.1+, iOS 5+ */
url('{{folderPrefix}}{{fontItem.id}}-{{fontItem.version}}-{{fontItem.storeID}}-{{variant.id}}.ttf') format('truetype'), /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
url('{{folderPrefix}}{{fontItem.id}}-{{fontItem.version}}-{{fontItem.storeID}}-{{variant.id}}.svg#{{variant.svg.substring(variant.svg.indexOf('#')+1);}}') format('svg'); /* Legacy iOS */
}
</code></pre>
<style ng-if="type.styleTag" type="text/css">
Expand Down
16 changes: 9 additions & 7 deletions client/app/fonts/fonts.controller.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -73,7 +73,7 @@ angular.module('googleWebfontsHelperApp')
}

$scope.error = false;
$scope.modernFontsOnly = false;
$scope.fontFormats = 'woff2';

$scope.downloadSubSetID = '';
$scope.subSetsSelected = 0;
Expand Down Expand Up @@ -260,13 +260,15 @@ angular.module('googleWebfontsHelperApp')
selection.addRange(range);
}
};

$scope.modernOnlyActive = function() {
$scope.modernFontsOnly = true;
$scope.modernSupportActive = function() {
$scope.fontFormats = 'woff2';
};

$scope.modernOnlyDeactive = function() {
$scope.modernFontsOnly = false;
$scope.legacySupportActive = function() {
$scope.fontFormats = 'woff2,ttf';
};
$scope.historicSupportActive = function() {
$scope.fontFormats = 'woff2,woff,ttf,svg,eot';
};

});
41 changes: 29 additions & 12 deletions client/app/fonts/fontsItem.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -94,15 +94,15 @@ <h4>2. Select styles:&nbsp;<small>(default is <code>{{fontItem.defVariant}}</cod
<!-- css snippets -->
<div class="fontItemCSSWrap">

<h4>3. Copy CSS:&nbsp;<small>(default is <code>Best Support</code>)</small></h4>
<h4>3. Copy CSS:&nbsp;<small>(default is <code>Modern Browsers</code>)</small></h4>

<tabset type="pills">
<tab heading="Best Support">
<p class="small">Choose <code>Best Support</code> if old browsers still need to be supported. Formats in this snippet: <code>[eot,woff,woff2,ttf,svg]</code></p>
<tab heading="Modern Browsers" select="modernSupportActive();">
<p class="small">Choose <code>Modern Browsers</code> if supporting old browsers is not relevant. Formats in this snippet: <code>[{{fontFormats}}]</code></p>

<div ng-click="selectText($event)" class="cssCodeStyle">
<div ng-repeat="variant in fontItem.variants | filter:variantFilter" css-code variant="variant" font-item="fontItem" folder-prefix="folderPrefix"
type="{bestSupport:true}"></div>
type="{modernSupport:true}"></div>
</div>

<div class="form-inline folderPrefixBar small">Customize folder prefix (optional):&nbsp;
Expand All @@ -113,19 +113,36 @@ <h4>3. Copy CSS:&nbsp;<small>(default is <code>Best Support</code>)</small></h4>
</div>
<p class="small">Click on code to select all statements, then copy/paste it into your own CSS file.</p>
</tab>

<tab heading="Modern Browsers" select="modernOnlyActive();" deselect="modernOnlyDeactive();">
<p class="small">Choose <code>Modern Browsers</code> if supporting old browsers is not relevant. Formats in this snippet: <code>[woff,woff2]</code></p>

<tab heading="Legacy Support" select="legacySupportActive();">
<p class="small">Choose <code>Legacy Support</code> if old browsers still need to be supported. Formats in this snippet: <code>[{{fontFormats}}]</code></p>
<div ng-click="selectText($event)" class="cssCodeStyle">
<div ng-repeat="variant in fontItem.variants | filter:variantFilter" css-code variant="variant" font-item="fontItem" folder-prefix="folderPrefix"
type="{modernBrowsers:true}"></div>
type="{legacySupport:true}"></div>
</div>

<div class="form-inline folderPrefixBar small">Customize folder prefix (optional):&nbsp;
<div class="form-group">
<input class="form-control input-sm" type="text" ng-model="folderPrefix" placeholder="no folder prefix" ng-init="folderPrefix='../fonts/'"
value="../fonts/">
value="../fonts/">
</div>
</div>
<p class="small">Click on code to select all statements, then copy/paste it into your own CSS file.</p>
</tab>

<tab heading="Historic Support" select="historicSupportActive();">
<p class="small">Choose <code>Historic Support</code> if very old browsers still need to be supported. Formats in this snippet: <code>[{{fontFormats}}]</code></p>

<div ng-click="selectText($event)" class="cssCodeStyle">
<div ng-repeat="variant in fontItem.variants | filter:variantFilter" css-code variant="variant" font-item="fontItem" folder-prefix="folderPrefix"
type="{historicSupport:true}"></div>
</div>

<div class="form-inline folderPrefixBar small">Customize folder prefix (optional):&nbsp;
<div class="form-group">
<input class="form-control input-sm" type="text" ng-model="folderPrefix" placeholder="no folder prefix" ng-init="folderPrefix='../fonts/'"
value="../fonts/">
</div>
</div>
<p class="small">Click on code to select all statements, then copy/paste it into your own CSS file.</p>
Expand Down Expand Up @@ -153,9 +170,9 @@ <h5>{{fontItem.id}}-{{variant.id}} <small>{{fontItem.storeID}}</small></h5>
<div>
<hr>
<h4>4. Download files:</h4>
<p>Your generated archive for <strong>{{fontItem.family}}</strong> with charsets <strong><code>[{{downloadSubSetID}}]</code></strong> and styles <strong><code>[{{variantDownloadQueryString}}]</code></strong> includes the formats <strong><code>[{{modernFontsOnly === true ? 'woff,woff2' : 'eot,ttf,svg,woff,woff2'}}]</code></strong>.</p>
<p>Your generated archive for <strong>{{fontItem.family}}</strong> with charsets <strong><code>[{{downloadSubSetID}}]</code></strong> and styles <strong><code>[{{variantDownloadQueryString}}]</code></strong> includes the formats <strong><code>[{{fontFormats}}]</code></strong>.</p>

<a href="/api/fonts/{{fontItem.id}}?download=zip&amp;subsets={{downloadSubSetID}}&amp;variants={{variantDownloadQueryString}}{{modernFontsOnly === true ? '&formats=woff,woff2' : ''}}"
<a href="/api/fonts/{{fontItem.id}}?download=zip&amp;subsets={{downloadSubSetID}}&amp;variants={{variantDownloadQueryString}}&formats={{fontFormats}}"
target="_blank" role="button" class="btn btn-primary download-button"><i class="fa fa-download fa-lg"></i><br/>{{fontItem.id}}-{{fontItem.version}}-{{fontItem.storeID}}.zip</a>
<p><small>Fonts are copyright of their respective authors.<br><b>See <a target="_blank" href="https://fonts.google.com/attribution">Google Fonts Open Source Font Attribution</a> to find out the specific license that this font uses.</b></small></p>

Expand Down

0 comments on commit dce8d51

Please sign in to comment.