Bree Serif
+ Alegreya
Font Styles
regular
regular italic 500 500italic 600 600italic 700 700italic 800 800italic 900 900italic
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=Bree+Serif:wght@400&family=Alegreya:ital,wght@0,400;0,500;0,600;0,700;0,800;0,900;1,400;1,500;1,600;1,700;1,800;1,900&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=Bree+Serif:wght@400&family=Alegreya:ital,wght@0,400;0,500;0,600;0,700;0,800;0,900;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");
</style>Alegreya & Uppercase
Alegreya capitalized does not have enough spacing between words. At first glance, a paragraph looks like one long word and letters.
An uppercase sentence written with the Alegreya font family, is not the most legible at first glance because of the spacing between words.
Additional classes can be added to make it more legible, especially when a sentence has multiple words. A sample of a legible paragraph.
An uppercase sentence written with the Alegreya font family, with additional styles to make it more legible. The word-spacing & letter-spacing styles
TailwindCSS does not have utility classes for the word-spacing style. But we can add them using Arbitrary values. Then we can also add the tracking-[] utility with a custom value utility class to reduce the space between letters and finally increase the line-height leading-5
/* Tailwind classes */
class="text_4xl font-alegreya tracking-[-0.01em]
[word-spacing:1.5px] leading-5"Any issues or feature requests?
If you encounter any issues or have any ideas or feature requests pleae email me.