Skip to content

Latest commit

 

History

History
75 lines (66 loc) · 3.27 KB

fonts.md

File metadata and controls

75 lines (66 loc) · 3.27 KB

Updating Fonts

  1. Download the latest stable releases of the non-variable versions of Source Sans Pro and Source Code Pro.

  2. Unpack the downloads.

  3. From each package, upload the contents of the OTF directories, 12 at a time, to the FontSquirrel Webfont Generator.

  4. Check the box to confirm that the fonts can be used for web embedding, then download the fonts.

  5. Repeat steps 3-4 until all the fonts have been downloaded.

  6. Copy all the files matching *.woff* to a single fonts directory.

  7. Run this Perl script over the files:

    use v5.20;
use warnings;
use utf8;
use File::Copy qw(mv);

my %config = (
    black        => { qual => 'blk',    style => 'normal', weight => '900' },
    blackit      => { qual => 'blkit',  style => 'italic', weight => '900' },
    bold         => { qual => 'bld',    style => 'normal', weight => 'bold' },
    boldit       => { qual => 'bldit',  style => 'italic', weight => 'bold' },
    extralight   => { qual => 'xlt',    style => 'normal', weight => '100' },
    extralightit => { qual => 'xltit',  style => 'italic', weight => '100' },
    it           => { qual => 'it',     style => 'italic', weight => 'normal' },
    light        => { qual => 'lt',     style => 'normal', weight => '200' },
    lightit      => { qual => 'ltit',   style => 'italic', weight => '200' },
    medium       => { qual => 'med',    style => 'normal', weight => 'normal' },
    mediumit     => { qual => 'medit',  style => 'italic', weight => 'normal' },
    regular      => { qual => 'reg',    style => 'normal', weight => 'normal' },
    semibold     => { qual => 'sbld',   style => 'normal', weight => '600' },
    semiboldit   => { qual => 'sbldit', style => 'italic', weight => '600' },
);

for my $fn (@ARGV) {
    my ($name, $type, $ext) = $fn =~ /^([^-]+)-([^-]+)-[^.]+.([^.]+)/;
    next unless $name;
    my ($sn, $ln) = $name eq 'sourcesanspro'
        ? ('srcsans', 'SourceSans')  : ('srccode', 'SourceCode');;
    my $c = $config{$type} or die "No config for $type\n";
    my $bn = "$sn-$c->{qual}";
    if ($ext eq 'woff') {
        say qq{\@font-face {
    font-family: '$ln';
    src: url('/fonts/$bn.woff2') format('woff2'),
        url('/fonts/$bn.woff') format('woff');
    font-weight: $c->{weight};
    font-style: $c->{style};
}
};
    }

    mv $fn => "$bn.$ext";
}

  8. Copy the output of the script into the CSS file.

  9. Run make font-awesome to use [fontawesome-subset] to generate the [Font Awesome] fonts. Edit themes/justatheory/bin/fa-subset.js and themes/justatheory/static/css/screen.css to add new icons.

See the Mozilla Web fonts docs for additional information on web fonts, and this SO answer for reasons to just use WOFF2 and WOFF. [fontawesome-subset]: https://github.com/omacranger/fontawesome-subset [Font Awesome]: https://fontawesome.com