Foundation CSS Prototyping Utilities Font Styling

Last Updated : 24 Mar, 2022

A Foundation is an open-source and responsive front-end framework created by ZURB in September 2011 that makes it simple to create stunning responsive websites, apps, and emails that operate on any device. Many companies, like Facebook, eBay, Mozilla, Adobe, and even Disney, use it. The framework is based on bootstrap, which is similar to SaaS. It’s more complex, versatile, and configurable. It also comes with a command-line interface, making it simple to use with module bundlers. Email framework provides you with responsive HTML emails, which can be read on any device. Foundation for Apps allows you to build fully responsive web applications.

In this article, we will learn about Font Styling Foundation CSS Prototyping Utility. Quickly prototype layouts and UI with Foundation's Prototyping Utilities. These optional classes and mixins are great for quickly turning sketches and mockups into coded prototypes. This utility helps to provide some styling to the text

Foundation CSS Prototyping Utilities Font Styling Classes:

font-wide: To make text larger
font-normal: To display text normally without any styling
font-bold: To make text bold
font-italic: To make text in italic

Example 1: In this example, we will learn about classes font-bold and font-wide

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <title>Foundation CSS Prototyping Utilities Sizing</title>
    <link rel="stylesheet" href=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/css/foundation-float.min.css"
        crossorigin="anonymous" />

    <link rel="stylesheet" href=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/css/foundation-prototype.min.css"
        crossorigin="anonymous" />

    <link rel="stylesheet" href=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/css/foundation-rtl.min.css"
        crossorigin="anonymous" />

    <link rel="stylesheet" href=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/css/foundation.min.css"
        crossorigin="anonymous" />

    <script crossorigin="anonymous" src=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/js/foundation.min.js"></script>
</head>

<body style="margin-inline: 30rem">
    <center>
        <h1 style="color: green">GeeksforGeeks</h1>

        <p class="font-wide">
            Foundation CSS is the frontend framework 
            of CSS that is used to build responsive 
            websites, apps.
        </p>

        <h1 style="color: green">Font-Bold</h1>
        <p class="font-bold">
            It is written using HTML, CSS, and 
            Javascript and is used by many famous
            companies like Amazon, Facebook, 
            eBay, etc. It uses packages like Grunt
            and Libsass for fast coding and 
            controlling and Saas compiler to make
            development faster.
        </p>
    </center>

    <script>
        $(document).ready(function () {
            $(document).foundation();
        });
    </script>
</body>

</html>

Output:

Foundation CSS Prototyping Utilities Font Styling

Example 2: In this example, we will learn about font-italic and font-normal. Also, add some styling to them

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <title>Foundation CSS Prototyping Utilities Sizing</title>
    <link rel="stylesheet" href=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/css/foundation-float.min.css"
        crossorigin="anonymous" />

    <link rel="stylesheet" href=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/css/foundation-prototype.min.css"
        crossorigin="anonymous" />

    <link rel="stylesheet" href=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/css/foundation-rtl.min.css"
        crossorigin="anonymous" />

    <link rel="stylesheet" href=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/css/foundation.min.css"
        crossorigin="anonymous" />

    <script crossorigin="anonymous" src=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/js/foundation.min.js"></script>
</head>

<body>
    <h1 style="color:green">Font-Italic</h1>
    <p class="font-italic" style="color:red">
        Foundation CSS is the frontend
        framework of CSS that is used to
        build responsive websites, apps.
    </p>

    <h1 style="color:green">Font-Normal</h1>
    <p class="font-normal" style="color:red">
        It is written using HTML, CSS, and Javascript
        and is used by many famous companies like Amazon,
        Facebook, eBay, etc. It uses packages like Grunt
        and Libsass for fast coding and controlling
        and Saas compiler to make development faster.
    </p>

    <script>
        $(document).ready(function () {
            $(document).foundation();
        });
    </script>
</body>

</html>

Output:

Reference: https://get.foundation/sites/docs/prototyping-utilities.html#font-styling

Foundation CSS Prototyping Utilities Font Styling

akshitsaxenaa09

Improve

Article Tags :

Foundation CSS Prototyping Utilities Font Styling

Similar Reads

Thank You!

What kind of Experience do you want to share?