Stint Ultra Expanded
+ Pontano Sans
Font Styles
regular
300 regular 500 600 700
Embed as a: <link> tag
To embed a font, copy the code into the head of your html
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link
href="https://fonts.googleapis.com/css2?family=Stint+Ultra+Expanded:wght@400&family=Pontano+Sans:wght@300;400;500;600;700&display=swap" rel="stylesheet">
</link>Embed as a: <style> tag
To embed a font, copy the code into the head of your html
<style>
@import url("https://fonts.googleapis.com/css2?family=Stint+Ultra+Expanded:wght@400&family=Pontano+Sans:wght@300;400;500;600;700&display=swap");
</style>Adding fonts in `tailwind.config.ts` file
Extending the themes fontFamily property
Since both Stint Ultra Expanded & Pontano Sans font-families are serif fonts, using the property “sans” inside the config file doesn’t make sence, Therefore, we will use custom properties that matches the font-familes name for both font families.
module.exports = {
content: [],
theme: {
extend: {
fontFamily: {
'breeserif': ['"Bree Serif"', ...defaultTheme.fontFamily.serif],
'alegreya': ['Alegreya', ...defaultTheme.fontFamily.serif],
},
},
}
}Example Usage
Using the font-family utility class in your markup
<h1 class="font-breeserif">Using the utility class.</h1>
<p class="font-alegreya">Using the utility class.</p>Stint Ultra Expanded
Stint Ultra Expanded only has one font, a regular size (400). But you can force a bold by using the CSS property font-weight: 700;. Look at the example bellow with a font size bold.
<h1 style="font-family:'Stint Ultra Expanded'; font-weight:400;">
Default: Stint Ultra Expanded
</h1><h1 style="font-family:'Stint Ultra Expanded'; font-weight:700;">
Bold: Stint Ultra Expanded
</h1>Default: Stint Ultra Expanded
Bold: Stint Ultra Expanded
Any issues or feature requests?
If you encounter any issues or have any ideas or feature requests pleae email me.