Skip to content
Snippets Groups Projects
Commit 03de6486 authored by Reiter, Christoph's avatar Reiter, Christoph :snake:
Browse files

Add font-source-sans-pro package

This contains a subsetted version of OTF Source Sans Pro 2.x
(the only version that looks good on low DPI Windows with font-weight 300)

Since there is no package on npm for this and ideally we don't
want to copy around font files this makes it reusable.
parent 270ce945
No related branches found
No related tags found
No related merge requests found
Pipeline #14692 failed
Showing
with 470 additions and 0 deletions
The woff2 files are derived from https://github.com/adobe-fonts/source-sans-pro which
is available under the "SIL Open Font License 1.1"
\ No newline at end of file
# Subsetted Version of Sans Source Pro 2
## FAQ
* Why?
We mostly use a light variant (300) of Source Sans Pro in our CI and any newer
version and any version not based on the OTF variant looks horrible on low DPI
screens on Windows and, to some extend, on Linux as well.
* Why OTF and not TTF?
The TTF variant is hard to read on Windows with a low-DPI screen and a font
weight of 300, OTF looks good on the other hand.
* Do I need to do this for every font?
https://github.com/fontsource/fontsource has nice subsetted npm packages for
various fonts. I'd try that first.
Also see https://markoskon.com/creating-font-subsets for a nice article on the
topic of subsetting.
## Rebuilding the fonts
* `poetry install`
* `poetry run bash build.sh`
\ No newline at end of file
#!/bin/bash
set -e
# Subset taken from google fonts: https://fonts.googleapis.com/css?family=Source+Sans+Pro
LATIN="U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD"
LATIN_EXT="U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF"
VIETNAMESE="U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+1EA0-1EF9,U+20AB"
GREEK="U+0370-03FF"
GREEK_EXT="U+1F00-1FFF"
CYRILLIC="U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116"
CYRILLIC_EXT="U+0460-052F,U+1C80-1C88,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F"
EXT="$VIETNAMESE,$GREEK,$GREEK_EXT,$CYRILLIC,$CYRILLIC_EXT"
function build() {
INPUT_NAME=$1
INPUT_FORMAT='otf'
STYLE=$2
WEIGHT=$3
BASE_DIR="source-sans-pro-2.045R-ro-1.095R-it"
CSS_FILE="files/$WEIGHT.css"
echo "$WEIGHT-$STYLE"
SUBSET="rest"
pyftsubset \
"$BASE_DIR/${INPUT_FORMAT^^}/SourceSansPro-$INPUT_NAME.${INPUT_FORMAT,,}" \
--output-file="files/source-sans-pro-$SUBSET-$WEIGHT-$STYLE.woff2" \
--flavor=woff2 \
--layout-features='*' \
--unicodes="$EXT"
echo "
@font-face {
font-family: 'Source Sans Pro';
font-style: $STYLE;
font-weight: $WEIGHT;
font-display: swap;
src: url(source-sans-pro-$SUBSET-$WEIGHT-$STYLE.woff2) format('woff2');
unicode-range: $EXT;
}" >> "$CSS_FILE"
SUBSET="base-ext"
pyftsubset \
"$BASE_DIR/${INPUT_FORMAT^^}/SourceSansPro-$INPUT_NAME.${INPUT_FORMAT,,}" \
--output-file="files/source-sans-pro-$SUBSET-$WEIGHT-$STYLE.woff2" \
--flavor=woff2 \
--layout-features='*' \
--unicodes="$LATIN_EXT"
echo "
@font-face {
font-family: 'Source Sans Pro';
font-style: $STYLE;
font-weight: $WEIGHT;
font-display: swap;
src: url(source-sans-pro-$SUBSET-$WEIGHT-$STYLE.woff2) format('woff2');
unicode-range: $LATIN_EXT;
}" >> "$CSS_FILE"
SUBSET="base"
pyftsubset \
"$BASE_DIR/${INPUT_FORMAT^^}/SourceSansPro-$INPUT_NAME.${INPUT_FORMAT,,}" \
--output-file="files/source-sans-pro-$SUBSET-$WEIGHT-$STYLE.woff2" \
--flavor=woff2 \
--layout-features='*' \
--unicodes="$LATIN"
echo "
@font-face {
font-family: 'Source Sans Pro';
font-style: $STYLE;
font-weight: $WEIGHT;
font-display: swap;
src: url(source-sans-pro-$SUBSET-$WEIGHT-$STYLE.woff2) format('woff2');
unicode-range: $LATIN;
}" >> "$CSS_FILE"
}
function main() {
# Extract upstream release
RELEASE="source-sans-pro-2.045R-ro-1.095R-it"
[ -d "$RELEASE" ] || (
wget -c "https://github.com/adobe-fonts/source-sans-pro/releases/download/2.045R-ro%2F1.095R-it/$RELEASE.zip";
unzip "$RELEASE.zip"
rm "$RELEASE.zip")
BASE_DIR="$RELEASE"
rm -rf files
mkdir -p "files"
build "ExtraLight" "normal" "200"
build "ExtraLightIt" "italic" "200"
build "Light" "normal" "300"
build "LightIt" "italic" "300"
build "Regular" "normal" "400"
build "It" "italic" "400"
build "Semibold" "normal" "600"
build "SemiboldIt" "italic" "600"
build "Bold" "normal" "700"
build "BoldIt" "italic" "700"
build "Black" "normal" "900"
build "BlackIt" "italic" "900"
rm -rf "$RELEASE"
}
main;
\ No newline at end of file
@font-face {
font-family: 'Source Sans Pro';
font-style: normal;
font-weight: 200;
font-display: swap;
src: url(source-sans-pro-rest-200-normal.woff2) format('woff2');
unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+1EA0-1EF9,U+20AB,U+0370-03FF,U+1F00-1FFF,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116,U+0460-052F,U+1C80-1C88,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F;
}
@font-face {
font-family: 'Source Sans Pro';
font-style: normal;
font-weight: 200;
font-display: swap;
src: url(source-sans-pro-base-ext-200-normal.woff2) format('woff2');
unicode-range: U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
font-family: 'Source Sans Pro';
font-style: normal;
font-weight: 200;
font-display: swap;
src: url(source-sans-pro-base-200-normal.woff2) format('woff2');
unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
font-family: 'Source Sans Pro';
font-style: italic;
font-weight: 200;
font-display: swap;
src: url(source-sans-pro-rest-200-italic.woff2) format('woff2');
unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+1EA0-1EF9,U+20AB,U+0370-03FF,U+1F00-1FFF,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116,U+0460-052F,U+1C80-1C88,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F;
}
@font-face {
font-family: 'Source Sans Pro';
font-style: italic;
font-weight: 200;
font-display: swap;
src: url(source-sans-pro-base-ext-200-italic.woff2) format('woff2');
unicode-range: U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
font-family: 'Source Sans Pro';
font-style: italic;
font-weight: 200;
font-display: swap;
src: url(source-sans-pro-base-200-italic.woff2) format('woff2');
unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
font-family: 'Source Sans Pro';
font-style: normal;
font-weight: 300;
font-display: swap;
src: url(source-sans-pro-rest-300-normal.woff2) format('woff2');
unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+1EA0-1EF9,U+20AB,U+0370-03FF,U+1F00-1FFF,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116,U+0460-052F,U+1C80-1C88,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F;
}
@font-face {
font-family: 'Source Sans Pro';
font-style: normal;
font-weight: 300;
font-display: swap;
src: url(source-sans-pro-base-ext-300-normal.woff2) format('woff2');
unicode-range: U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
font-family: 'Source Sans Pro';
font-style: normal;
font-weight: 300;
font-display: swap;
src: url(source-sans-pro-base-300-normal.woff2) format('woff2');
unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
font-family: 'Source Sans Pro';
font-style: italic;
font-weight: 300;
font-display: swap;
src: url(source-sans-pro-rest-300-italic.woff2) format('woff2');
unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+1EA0-1EF9,U+20AB,U+0370-03FF,U+1F00-1FFF,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116,U+0460-052F,U+1C80-1C88,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F;
}
@font-face {
font-family: 'Source Sans Pro';
font-style: italic;
font-weight: 300;
font-display: swap;
src: url(source-sans-pro-base-ext-300-italic.woff2) format('woff2');
unicode-range: U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
font-family: 'Source Sans Pro';
font-style: italic;
font-weight: 300;
font-display: swap;
src: url(source-sans-pro-base-300-italic.woff2) format('woff2');
unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
font-family: 'Source Sans Pro';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(source-sans-pro-rest-400-normal.woff2) format('woff2');
unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+1EA0-1EF9,U+20AB,U+0370-03FF,U+1F00-1FFF,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116,U+0460-052F,U+1C80-1C88,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F;
}
@font-face {
font-family: 'Source Sans Pro';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(source-sans-pro-base-ext-400-normal.woff2) format('woff2');
unicode-range: U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
font-family: 'Source Sans Pro';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(source-sans-pro-base-400-normal.woff2) format('woff2');
unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
font-family: 'Source Sans Pro';
font-style: italic;
font-weight: 400;
font-display: swap;
src: url(source-sans-pro-rest-400-italic.woff2) format('woff2');
unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+1EA0-1EF9,U+20AB,U+0370-03FF,U+1F00-1FFF,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116,U+0460-052F,U+1C80-1C88,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F;
}
@font-face {
font-family: 'Source Sans Pro';
font-style: italic;
font-weight: 400;
font-display: swap;
src: url(source-sans-pro-base-ext-400-italic.woff2) format('woff2');
unicode-range: U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
font-family: 'Source Sans Pro';
font-style: italic;
font-weight: 400;
font-display: swap;
src: url(source-sans-pro-base-400-italic.woff2) format('woff2');
unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
font-family: 'Source Sans Pro';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url(source-sans-pro-rest-600-normal.woff2) format('woff2');
unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+1EA0-1EF9,U+20AB,U+0370-03FF,U+1F00-1FFF,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116,U+0460-052F,U+1C80-1C88,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F;
}
@font-face {
font-family: 'Source Sans Pro';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url(source-sans-pro-base-ext-600-normal.woff2) format('woff2');
unicode-range: U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
font-family: 'Source Sans Pro';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url(source-sans-pro-base-600-normal.woff2) format('woff2');
unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
font-family: 'Source Sans Pro';
font-style: italic;
font-weight: 600;
font-display: swap;
src: url(source-sans-pro-rest-600-italic.woff2) format('woff2');
unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+1EA0-1EF9,U+20AB,U+0370-03FF,U+1F00-1FFF,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116,U+0460-052F,U+1C80-1C88,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F;
}
@font-face {
font-family: 'Source Sans Pro';
font-style: italic;
font-weight: 600;
font-display: swap;
src: url(source-sans-pro-base-ext-600-italic.woff2) format('woff2');
unicode-range: U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
font-family: 'Source Sans Pro';
font-style: italic;
font-weight: 600;
font-display: swap;
src: url(source-sans-pro-base-600-italic.woff2) format('woff2');
unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
font-family: 'Source Sans Pro';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url(source-sans-pro-rest-700-normal.woff2) format('woff2');
unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+1EA0-1EF9,U+20AB,U+0370-03FF,U+1F00-1FFF,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116,U+0460-052F,U+1C80-1C88,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F;
}
@font-face {
font-family: 'Source Sans Pro';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url(source-sans-pro-base-ext-700-normal.woff2) format('woff2');
unicode-range: U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
font-family: 'Source Sans Pro';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url(source-sans-pro-base-700-normal.woff2) format('woff2');
unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
font-family: 'Source Sans Pro';
font-style: italic;
font-weight: 700;
font-display: swap;
src: url(source-sans-pro-rest-700-italic.woff2) format('woff2');
unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+1EA0-1EF9,U+20AB,U+0370-03FF,U+1F00-1FFF,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116,U+0460-052F,U+1C80-1C88,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F;
}
@font-face {
font-family: 'Source Sans Pro';
font-style: italic;
font-weight: 700;
font-display: swap;
src: url(source-sans-pro-base-ext-700-italic.woff2) format('woff2');
unicode-range: U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
font-family: 'Source Sans Pro';
font-style: italic;
font-weight: 700;
font-display: swap;
src: url(source-sans-pro-base-700-italic.woff2) format('woff2');
unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
font-family: 'Source Sans Pro';
font-style: normal;
font-weight: 900;
font-display: swap;
src: url(source-sans-pro-rest-900-normal.woff2) format('woff2');
unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+1EA0-1EF9,U+20AB,U+0370-03FF,U+1F00-1FFF,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116,U+0460-052F,U+1C80-1C88,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F;
}
@font-face {
font-family: 'Source Sans Pro';
font-style: normal;
font-weight: 900;
font-display: swap;
src: url(source-sans-pro-base-ext-900-normal.woff2) format('woff2');
unicode-range: U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
font-family: 'Source Sans Pro';
font-style: normal;
font-weight: 900;
font-display: swap;
src: url(source-sans-pro-base-900-normal.woff2) format('woff2');
unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
font-family: 'Source Sans Pro';
font-style: italic;
font-weight: 900;
font-display: swap;
src: url(source-sans-pro-rest-900-italic.woff2) format('woff2');
unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+1EA0-1EF9,U+20AB,U+0370-03FF,U+1F00-1FFF,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116,U+0460-052F,U+1C80-1C88,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F;
}
@font-face {
font-family: 'Source Sans Pro';
font-style: italic;
font-weight: 900;
font-display: swap;
src: url(source-sans-pro-base-ext-900-italic.woff2) format('woff2');
unicode-range: U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
font-family: 'Source Sans Pro';
font-style: italic;
font-weight: 900;
font-display: swap;
src: url(source-sans-pro-base-900-italic.woff2) format('woff2');
unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
File added
File added
File added
File added
File added
File added
File added
File added
File added
File added
File added
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment