Generic Font Family

A generic font family in CSS is a fallback font category that represents a broad class of fonts. It ensures that if a specific font is not available on a user's device or browser, the browser will default to a similar font within that generic family. There are five generic font families in CSS:

serif

- Fonts with decorative strokes at the ends of characters, often used for traditional and formal designs. Examples include Times New Roman, Georgia, and Palatino.

- For example: Lucida Bright, Lucida Fax, Palatino, Palatino Linotype, Palladio, URW Palladio

sans-serif

- Fonts without decorative strokes, known for their clean and modern appearance. Common examples include Arial, Helvetica, and Verdana.

- For example: Open Sans, Fira Sans, Lucida Sans, Lucida Sans Unicode, Trebuchet MS, Liberation Sans, Nimbus Sans L

monospace

- Fonts where each character occupies the same amount of horizontal space, often used for code snippets or typewriter-style text. Examples include Courier New, Consolas, and Monaco.

- For example: Fira Mono, DejaVu Sans Mono, Menlo, Consolas, Liberation Mono, Monaco, Lucida Console

cursive

- Fonts that mimic handwriting or calligraphy, adding a more personalized touch to text. Examples include Comic Sans MS, Brush Script, and Snell Roundhand.

- For example: Brush Script MT, Brush Script Std, Lucida Calligraphy, Lucida Handwriting, Apple Chancery

fantasy

- Fonts that don't fit into the other categories, often unique or decorative in style. They are typically used for special effects or artistic purposes. Examples include Impact, Papyrus, and Chalkboard.

- For example: Papyrus, Herculanum, Party LET, Curlz MT, Harrington

System font, or web-safe font

A system font or web-safe font is one that’s already assumed to be on the vast majority of users’ devices, with no need for a web font to be downloaded.

How to use Google Fonts


    < !-- By using link -->
    < head>
        < 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=Ubuntu:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap" rel="stylesheet">
    < /head>

    < !-- Or by using import -->
    style
        @import url('https://fonts.googleapis.com/css2?family=Ubuntu:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap')
    style

    < !-- Then create a class and use that class -->
    .font-ubuntu {
        font-family: "Ubuntu", sans-serif;
    }

How to use Downloaded Fonts


    < !-- Declare -->
    @font-face {
        font-family: Ubuntu; src: url("../fonts/Ubuntu-Light.ttf");
    }
    @font-face {
        font-family: Ubuntu; font-weight: bold; src: url("../fonts/Ubuntu-Bold.ttf");
    }

    < !-- How to use -->
    .font-ubuntu {
        font-family: "Ubuntu", sans-serif;
    }

Font Testing

Ubuntu, sans-serif


    /* Declare */
    @import url('https://fonts.googleapis.com/css2?family=Ubuntu:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap');


    /* How to use*/
    style='font-family: "Ubuntu", sans-serif';

Font Size: 12

Bangladesh, nestled in South Asia, boasts a rich tapestry of culture, history, and natural beauty. Its fertile plains are crisscrossed by numerous rivers, including the mighty Ganges, shaping a landscape known for its lush greenery. Dhaka, the bustling capital, pulsates with vibrant markets and historical landmarks like Lalbagh Fort. The country's economy, primarily agrarian, is diversifying into textiles and technology, propelling its growth.

Bangladesh, nestled in South Asia, boasts a rich tapestry of culture, history, and natural beauty. Its fertile plains are crisscrossed by numerous rivers, including the mighty Ganges, shaping a landscape known for its lush greenery. Dhaka, the bustling capital, pulsates with vibrant markets and historical landmarks like Lalbagh Fort. The country's economy, primarily agrarian, is diversifying into textiles and technology, propelling its growth.

Segoe UI Light, sans-serif


    /* Declare */
    @font-face {
        font-family: "Segoe UI Light";
        src: url("./fonts/segoeuil.ttf");
    }
    /* How to use */
    style='font-family: "Segoe UI Light", sans-serif';

Font Size: 12

Bangladesh, nestled in South Asia, boasts a rich tapestry of culture, history, and natural beauty. Its fertile plains are crisscrossed by numerous rivers, including the mighty Ganges, shaping a landscape known for its lush greenery. Dhaka, the bustling capital, pulsates with vibrant markets and historical landmarks like Lalbagh Fort. The country's economy, primarily agrarian, is diversifying into textiles and technology, propelling its growth.

Bangladesh, nestled in South Asia, boasts a rich tapestry of culture, history, and natural beauty. Its fertile plains are crisscrossed by numerous rivers, including the mighty Ganges, shaping a landscape known for its lush greenery. Dhaka, the bustling capital, pulsates with vibrant markets and historical landmarks like Lalbagh Fort. The country's economy, primarily agrarian, is diversifying into textiles and technology, propelling its growth.

Roboto, sans-serif


    /* Declare */
    @import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');



    /* How to use */
    style='font-family: "Roboto", sans-serif';

Font Size: 12

Bangladesh, nestled in South Asia, boasts a rich tapestry of culture, history, and natural beauty. Its fertile plains are crisscrossed by numerous rivers, including the mighty Ganges, shaping a landscape known for its lush greenery. Dhaka, the bustling capital, pulsates with vibrant markets and historical landmarks like Lalbagh Fort. The country's economy, primarily agrarian, is diversifying into textiles and technology, propelling its growth.

Bangladesh, nestled in South Asia, boasts a rich tapestry of culture, history, and natural beauty. Its fertile plains are crisscrossed by numerous rivers, including the mighty Ganges, shaping a landscape known for its lush greenery. Dhaka, the bustling capital, pulsates with vibrant markets and historical landmarks like Lalbagh Fort. The country's economy, primarily agrarian, is diversifying into textiles and technology, propelling its growth.

Rajdhani, sans-serif

Example Site: kingsleygroup.co 

    /* Declare */
    @font-face {
        font-family: "Rajdhani";
        src: url("./fonts/Rajdhani-Regular.ttf");
    }
    /*@import url('https://fonts.googleapis.com/css2?family=Rajdhani:wght@300;400;500;600;700&display=swap')*/

    /* How to use */
    style='font-family: "Rajdhani", sans-serif';

Font Size: 12

Bangladesh, nestled in South Asia, boasts a rich tapestry of culture, history, and natural beauty. Its fertile plains are crisscrossed by numerous rivers, including the mighty Ganges, shaping a landscape known for its lush greenery. Dhaka, the bustling capital, pulsates with vibrant markets and historical landmarks like Lalbagh Fort. The country's economy, primarily agrarian, is diversifying into textiles and technology, propelling its growth.

Bangladesh, nestled in South Asia, boasts a rich tapestry of culture, history, and natural beauty. Its fertile plains are crisscrossed by numerous rivers, including the mighty Ganges, shaping a landscape known for its lush greenery. Dhaka, the bustling capital, pulsates with vibrant markets and historical landmarks like Lalbagh Fort. The country's economy, primarily agrarian, is diversifying into textiles and technology, propelling its growth.