add font

style/typography.md

@@ -1,31 +1,50 @@
 # Typography
 
-## Texta
+## Fonts
+
+### Texta
 
 **The official typeface of Mass.gov is Texta. We picked Texta for the Mass.gov branding purposes.**
 
-!["Mass.gov" displaying in Texta](../.gitbook/assets/texta-massgov.png)
+!["Mass.gov" displaying in Texta](../.gitbook/assets/texta-massgov%20%282%29.png)
 
-!["MA" displaying in Texta](../.gitbook/assets/texta-ma.png)
+!["MA" displaying in Texta](../.gitbook/assets/texta-ma%20%281%29.png)
 
 **Texta is a versatile, readable font that supports 23 different languages.** They are: Albanian, Alsatian, Aragonese, Arapaho, Arrernte, Asturian, Aymara, Basque, Bislama, Breton, Cebuano, Chamorro, Cheyenne, Corsican, Danish, Dutch, English, Estonian, Faroese, Fijian, Finnish, French, French Creole \(Saint Lucia\), Frisian, Galician, Genoese, German, Gilbertese \(Kiribati\), Greenlandic, Haitian Creole, Hiligaynon, Hmong, Hopi, Ibanag, Iloko \(Ilokano\), Indonesian, Interglossa \(Glosa\), Interlingua, Irish \(Gaelic\), Islandic, Italian, Jèrriais, Lojban, Lombard, Luxembourgian, Malagasy, Manx, Mohawk, Norfolk/Pitcairnese, Northern Sotho \(Pedi\), Norwegian, Occitan, Oromo, Pangasinan, Papiamento, Piedmontese, Portuguese, Potawatomi, Rhaeto-Romance, Romansh \(Rumantsch\), Rotokas, Sami \(Lule\), Samoan, Sardinian \(Sardu\), Scots \(Gaelic\), Seychellois Creole \(Seselwa\), Shona, Sicilian, Somali, Southern Ndebele, Southern Sotho \(Sesotho\), Spanish, Swahili, Swati/Swazi, Swedish, Tagalog \(Filipino/Pilipino\), Tetum \(Tetun\), Tok Pisin, Tswana, Uyghur \(Latinized\), Volapük, Votic \(Latinized\), Walloon, Warlpiri, Xhosa, Yapese and Zulu.
 
-### Usage
+#### License
 
-Texta font has the following font weight options:
+Fontspring grants Licensee a perpetual, worldwide, non-exclusive and non-transferrable license to install the Texta as webfont **on Websites that are owned by the Commonwealth of Massachusetts** using the @font-face selector in CSS files. For other usage, you may have to acquire an additional license through Fontsprint.
 
-| Font weight | Specs |
-| :--- | :--- |
-| Light | 300 |
-| Medium | 500 |
-| Bold | 700 |
-| Black | 800 |
+For more details about Texta's terms of use, please refer to our [**web font license**](https://www.fontspring.com/lic/htswufoczd).
 
-All font files can be downloaded either from the [**Mayflower Github repo**](https://github.com/massgov/mayflower/tree/develop/assets/fonts) or from the [**Mayflower NPM package**](https://unpkg.com/@massds/[email protected]/fonts/). Please read the web font [**web font license**](https://www.fontspring.com/lic/htswufoczd) **\*\*carefully to proceed**.\*\*
+### Montserrat
 
-### License
+We also hand picked a free web front — [**Montserrat — from Google fonts**](https://fonts.google.com/specimen/Montserrat) for applications using our open source design system Mayflower at no additional cost.
 
-Fontspring grants Licensee a perpetual, worldwide, non-exclusive and non-transferrable license to install the Texta as webfont **on Websites that are owned by the Commonwealth of Massachusetts** using the @font-face selector in CSS files. For other usage, you may have to acquire an additional license through Fontsprint.
+!["Mass.gov" displaying in Montserrat](../.gitbook/assets/montserrat-massgov.png)
 
-For more details about Texta's terms of use, please refer to our [**web font license**](https://www.fontspring.com/lic/htswufoczd).
+!["MA" displaying in Montserrat](../.gitbook/assets/montserrat-ma.png)
+
+#### Usage
+
+{% tabs %}
+{% tab title="Link in HTML" %}
+```css
+<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
+
+// Set font-family in CSS
+font-family: 'Montserrat', sans-serif;
+```
+{% endtab %}
+
+{% tab title="@Import in CSS" %}
+```css
+@import url('https://fonts.googleapis.com/css?family=Montserrat');
+
+// Set font-family in CSS
+font-family: 'Montserrat', sans-serif;
+```
+{% endtab %}
+{% endtabs %}