Add fonts and design

This commit is contained in:
2023-11-28 14:15:01 +00:00
committed by Daniel Patterson
parent 39e6f36e9a
commit 8ece628b30
16 changed files with 202 additions and 31 deletions

View File

@@ -0,0 +1,7 @@
# Self-hosting subset fonts
Fonts are subset with the expectation that multiple font files will be used along with the CSS property `unicode-range` to specify unicodes present in each file. This enables a website browser to automatically download **only** the fonts needed to display text on a given site, and [works in all modern browsers](https://caniuse.com/font-unicode-range).
To support only "Latin Basic" characters, you can use just the `latin_basic` font file. To use "Latin Extended" characters, you should use *both* `latin_basic` *and* `latin_ext` font files (this makes sure basic punctuation isnt left out). For Vietnamese, you must use `latin_basic` *and* `vietnamese` subsets at minimum, but may wish to also use `latin_ext`.
Files are provided along with example CSS to provide an example of how this works. Feel free to copy the fonts.css to jump-start your own projects!

60
assets/vendor/fonts/Fraunces/fonts.css vendored Normal file
View File

@@ -0,0 +1,60 @@
/* Latin Basic, as defined by Google Fonts */
@font-face {
font-family: 'Fraunces';
font-display: swap;
font-weight: 100 900;
src: url('fonts/Fraunces--latin_basic.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;
}
/* Latin extended, for diacritics in font which are not included in Latin Basic */
@font-face {
font-family: 'Fraunces';
font-display: swap;
font-weight: 100 900;
src: url('fonts/Fraunces--latin_ext.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;
}
/* Vietnamese glyphs not included in Latin Basic */
@font-face {
font-family: 'Fraunces';
font-display: swap;
font-weight: 100 900;
src: url('fonts/Fraunces--vietnamese.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;
}
/* ---------------------------------------------------------------------------- */
/* ITALICS */
/* Latin Basic, as defined by Google Fonts */
@font-face {
font-family: 'Fraunces';
font-display: swap;
font-weight: 100 900;
font-style: italic;
src: url('fonts/Fraunces-Italic--latin_basic.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;
}
/* Latin extended, for diacritics in font which are not included in Latin Basic */
@font-face {
font-family: 'Fraunces';
font-display: swap;
font-weight: 100 900;
font-style: italic;
src: url('fonts/Fraunces-Italic--latin_ext.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;
}
/* Vietnamese glyphs not included in Latin Basic */
@font-face {
font-family: 'Fraunces';
font-display: swap;
font-weight: 100 900;
font-style: italic;
src: url('fonts/Fraunces-Italic--vietnamese.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;
}

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

87
assets/vendor/fonts/Fraunces/index.html vendored Normal file
View File

@@ -0,0 +1,87 @@
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='UTF-8'>
<meta name='viewport' content='width=device-width, initial-scale=1.0'>
<title>Fraunces Subset</title>
<link rel='stylesheet' href='fonts.css'>
<style>
html {
font-family: Fraunces, sans-serif;
margin: 1rem;
}
body {
max-width: 1400px;
margin: 5rem auto 15rem;
}
h1 {
font-size: 6rem;
}
h2, h3 {
margin-top: 3em;
}
p {
font-size: 48px;
word-break: break-all;
line-height: 1.75;
letter-spacing: 0.3em;
font-weight: 900;
font-variation-settings: SOFT 100;
text-align: justify;
}
.italic {
font-style: italic;
}
</style>
</head>
<body>
<h1>
Fraunces Subsets
</h1>
<h2>
Fraunces
</h2>
<h3>
Latin Basic
</h3>
<p>
! " # $ % & ' ( ) * + , - . / 0 1 2 3 4 5 6 7 8 9 : ; < = > ? @ A B C D E F G H I J K L M N O P Q R S T U V W X Y Z [ \ ] ^ _ ` a b c d e f g h i j k l m n o p q r s t u v w x y z { | } ~   ¡ ¢ £ ¤ ¥ ¦ § ¨ © ª « ¬ ­ ® ¯ ° ± ² ³ ´ µ ¶ · ¸ ¹ º » ¼ ½ ¾ ¿ À Á Â Ã Ä Å Æ Ç È É Ê Ë Ì Í Î Ï Ð Ñ Ò Ó Ô Õ Ö × Ø Ù Ú Û Ü Ý Þ ß à á â ã ä å æ ç è é ê ë ì í î ï ð ñ ò ó ô õ ö ÷ ø ù ú û ü ý þ ÿ ı Œ œ ʼ ˆ ˚ ˜ “ ” „ † ‡ • … ‰ ⁒ ⁴ € ™
</p>
<h3>
Latin Extended
</h3>
<p>
Ā ā Ă ă Ą ą Ć ć Ĉ ĉ Ċ ċ Č č Ď ď Đ đ Ē ē Ĕ ĕ Ė ė Ę ę Ě ě Ĝ ĝ Ğ ğ Ġ ġ Ģ ģ Ĥ ĥ Ħ ħ Ĩ ĩ Ī ī Ĭ ĭ Į į İ ı IJ ij Ĵ ĵ Ķ ķ ĸ Ĺ ĺ Ļ ļ Ľ ľ Ŀ ŀ Ł ł Ń ń Ņ ņ Ň ň Ŋ ŋ Ō ō Ŏ ŏ Ő ő Œ œ Ŕ ŕ Ŗ ŗ Ř ř Ś ś Ŝ ŝ Ş ş Š š Ţ ţ Ť ť Ŧ ŧ Ũ ũ Ū ū Ŭ ŭ Ů ů Ű ű Ų ų Ŵ ŵ Ŷ ŷ Ÿ Ź ź Ż ż Ž ž Ə ƒ Ơ ơ Ư ư DŽ Dž dž LJ Lj lj NJ Nj nj Ǚ ǚ Ǧ ǧ Ǫ ǫ Ǻ ǻ Ǽ ǽ Ǿ ǿ Ȁ ȁ Ȃ ȃ Ȅ ȅ Ȇ ȇ Ȉ ȉ Ȋ ȋ Ȍ ȍ Ȏ ȏ Ȑ ȑ Ȓ ȓ Ȕ ȕ Ȗ ȗ Ș ș Ț ț Ȫ ȫ Ȭ ȭ Ȱ ȱ Ȳ ȳ ȷ ə Ḉ ḉ Ḍ ḍ Ḏ ḏ Ḕ ḕ Ḗ ḗ Ḝ ḝ Ḡ ḡ Ḥ ḥ Ḫ ḫ Ḯ ḯ Ḷ ḷ Ḻ ḻ Ṃ ṃ Ṇ ṇ Ṉ ṉ Ṍ ṍ Ṏ ṏ Ṑ ṑ Ṓ ṓ Ṛ ṛ Ṟ ṟ Ṣ ṣ Ṥ ṥ Ṭ ṭ Ṯ ṯ Ṹ ṹ Ṻ ṻ Ẁ ẁ Ẃ ẃ Ẅ ẅ Ẓ ẓ ẗ ẞ Ạ ạ Ả ả Ấ ấ Ầ ầ Ẩ ẩ Ẫ ẫ Ậ ậ Ắ ắ Ằ ằ Ẳ ẳ Ẵ ẵ Ặ ặ Ẹ ẹ Ẻ ẻ Ẽ ẽ Ế ế Ề ề Ể ể Ễ ễ Ệ ệ Ỉ ỉ Ị ị Ọ ọ Ỏ ỏ Ố ố Ồ ồ Ổ ổ Ỗ ỗ Ộ ộ Ớ ớ Ờ ờ Ở ở Ỡ ỡ Ợ ợ Ụ ụ Ủ ủ Ứ ứ Ừ ừ Ử ử Ữ ữ Ự ự Ỳ ỳ Ỵ ỵ Ỷ ỷ Ỹ ỹ † ₡ ₣ ₤ ₦ ₧ ₩ ₫ ₭ ₱ ₲ ₵ ₹ ₺ ₼ ₽
</p>
<h3>
Latin Vietnamese
</h3>
<p>
Ă ă Đ đ Ĩ ĩ Ũ ũ Ơ ơ Ư ư Ạ ạ Ả ả Ấ ấ Ầ ầ Ẩ ẩ Ẫ ẫ Ậ ậ Ắ ắ Ằ ằ Ẳ ẳ Ẵ ẵ Ặ ặ Ẹ ẹ Ẻ ẻ Ẽ ẽ Ế ế Ề ề Ể ể Ễ ễ Ệ ệ Ỉ ỉ Ị ị Ọ ọ Ỏ ỏ Ố ố Ồ ồ Ổ ổ Ỗ ỗ Ộ ộ Ớ ớ Ờ ờ Ở ở Ỡ ỡ Ợ ợ Ụ ụ Ủ ủ Ứ ứ Ừ ừ Ử ử Ữ ữ Ự ự Ỳ ỳ Ỵ ỵ Ỷ ỷ Ỹ ỹ ₫
</p>
<div class=italic>
<h2>
Fraunces-Italic
</h2>
<h3>
Latin Basic
</h3>
<p>
! " # $ % & ' ( ) * + , - . / 0 1 2 3 4 5 6 7 8 9 : ; < = > ? @ A B C D E F G H I J K L M N O P Q R S T U V W X Y Z [ \ ] ^ _ ` a b c d e f g h i j k l m n o p q r s t u v w x y z { | } ~   ¡ ¢ £ ¤ ¥ ¦ § ¨ © ª « ¬ ­ ® ¯ ° ± ² ³ ´ µ ¶ · ¸ ¹ º » ¼ ½ ¾ ¿ À Á Â Ã Ä Å Æ Ç È É Ê Ë Ì Í Î Ï Ð Ñ Ò Ó Ô Õ Ö × Ø Ù Ú Û Ü Ý Þ ß à á â ã ä å æ ç è é ê ë ì í î ï ð ñ ò ó ô õ ö ÷ ø ù ú û ü ý þ ÿ ı Œ œ ʼ ˆ ˚ ˜ “ ” „ † ‡ • … ‰ ⁒ ⁴ € ™
</p>
<h3>
Latin Extended
</h3>
<p>
Ā ā Ă ă Ą ą Ć ć Ĉ ĉ Ċ ċ Č č Ď ď Đ đ Ē ē Ĕ ĕ Ė ė Ę ę Ě ě Ĝ ĝ Ğ ğ Ġ ġ Ģ ģ Ĥ ĥ Ħ ħ Ĩ ĩ Ī ī Ĭ ĭ Į į İ ı IJ ij Ĵ ĵ Ķ ķ ĸ Ĺ ĺ Ļ ļ Ľ ľ Ŀ ŀ Ł ł Ń ń Ņ ņ Ň ň Ŋ ŋ Ō ō Ŏ ŏ Ő ő Œ œ Ŕ ŕ Ŗ ŗ Ř ř Ś ś Ŝ ŝ Ş ş Š š Ţ ţ Ť ť Ŧ ŧ Ũ ũ Ū ū Ŭ ŭ Ů ů Ű ű Ų ų Ŵ ŵ Ŷ ŷ Ÿ Ź ź Ż ż Ž ž Ə ƒ Ơ ơ Ư ư DŽ Dž dž LJ Lj lj NJ Nj nj Ǚ ǚ Ǧ ǧ Ǫ ǫ Ǻ ǻ Ǽ ǽ Ǿ ǿ Ȁ ȁ Ȃ ȃ Ȅ ȅ Ȇ ȇ Ȉ ȉ Ȋ ȋ Ȍ ȍ Ȏ ȏ Ȑ ȑ Ȓ ȓ Ȕ ȕ Ȗ ȗ Ș ș Ț ț Ȫ ȫ Ȭ ȭ Ȱ ȱ Ȳ ȳ ȷ ə Ḉ ḉ Ḍ ḍ Ḏ ḏ Ḕ ḕ Ḗ ḗ Ḝ ḝ Ḡ ḡ Ḥ ḥ Ḫ ḫ Ḯ ḯ Ḷ ḷ Ḻ ḻ Ṃ ṃ Ṇ ṇ Ṉ ṉ Ṍ ṍ Ṏ ṏ Ṑ ṑ Ṓ ṓ Ṛ ṛ Ṟ ṟ Ṣ ṣ Ṥ ṥ Ṭ ṭ Ṯ ṯ Ṹ ṹ Ṻ ṻ Ẁ ẁ Ẃ ẃ Ẅ ẅ Ẓ ẓ ẗ ẞ Ạ ạ Ả ả Ấ ấ Ầ ầ Ẩ ẩ Ẫ ẫ Ậ ậ Ắ ắ Ằ ằ Ẳ ẳ Ẵ ẵ Ặ ặ Ẹ ẹ Ẻ ẻ Ẽ ẽ Ế ế Ề ề Ể ể Ễ ễ Ệ ệ Ỉ ỉ Ị ị Ọ ọ Ỏ ỏ Ố ố Ồ ồ Ổ ổ Ỗ ỗ Ộ ộ Ớ ớ Ờ ờ Ở ở Ỡ ỡ Ợ ợ Ụ ụ Ủ ủ Ứ ứ Ừ ừ Ử ử Ữ ữ Ự ự Ỳ ỳ Ỵ ỵ Ỷ ỷ Ỹ ỹ † ₡ ₣ ₤ ₦ ₧ ₩ ₫ ₭ ₱ ₲ ₵ ₹ ₺ ₼ ₽
</p>
<h3>
Latin Vietnamese
</h3>
<p>
Ă ă Đ đ Ĩ ĩ Ũ ũ Ơ ơ Ư ư Ạ ạ Ả ả Ấ ấ Ầ ầ Ẩ ẩ Ẫ ẫ Ậ ậ Ắ ắ Ằ ằ Ẳ ẳ Ẵ ẵ Ặ ặ Ẹ ẹ Ẻ ẻ Ẽ ẽ Ế ế Ề ề Ể ể Ễ ễ Ệ ệ Ỉ ỉ Ị ị Ọ ọ Ỏ ỏ Ố ố Ồ ồ Ổ ổ Ỗ ỗ Ộ ộ Ớ ớ Ờ ờ Ở ở Ỡ ỡ Ợ ợ Ụ ụ Ủ ủ Ứ ứ Ừ ừ Ử ử Ữ ữ Ự ự Ỳ ỳ Ỵ ỵ Ỷ ỷ Ỹ ỹ ₫
</p>
</div>
</body>
</html>