Are @font-face rules are usable in it's defined CSS File or usable in other CSS files and inline CSS codes?

Question

I have a bunch of CSS document, that has some @font-face rules, I want to check these @font-face which are used and which are not used in a HTML Document or Website. So, should I check these @font-faces used in it's defined CSS Document or all CSS Documents with inline Style tags in HTML Document?

The question is, this;

File Name: style.css

@font-face {
    font-family:'FontAwesome';
    src:url('../fonts/fontawesome-webfont.eot?v=4.7.0');
    src:url('../fonts/fontawesome-webfont.eot?#iefix&v=4.7.0') format('embedded-opentype'),
    url('../fonts/fontawesome-webfont.woff2?v=4.7.0') format('woff2'),
    url('../fonts/fontawesome-webfont.woff?v=4.7.0') format('woff'),
    url('../fonts/fontawesome-webfont.ttf?v=4.7.0') format('truetype'),
    url('../fonts/fontawesome-webfont.svg?v=4.7.0#fontawesomeregular') format('svg');
    font-weight:normal;
    font-style:normal
}

/* This tag can use the @font-face, because this .any-class rule in same CSS document */
.any-class {
    font-family: 'FontAwesome',
    font-weight: normal;
}

File Name: another-style.css

/* Can this CSS Class use the @font-face in style.css ? */
.any-other-class {
    font-family: 'FontAwesome',
    font-weight: normal;
}

File Name: index.html

<html>
<head>
    <link rel="stylesheet" href="style.css">
    <style>
        /* Can this .custom-class CSS Selector use @font-face in style.css ? */
        .custom-class {
            font-family: 'FontAwesome',
            font-weight: normal
        }
    </style>
</head>
<body>
    <!-- Can this DOM Element use @font-face in style.css? -->
    <p style="font-family: 'FontAwesome'; font-weight: normal;">Hello!</p>
</body>
</html>

Sadly, no the files are different so you wont be able to do this in CSS. You can try out SASS which allows you to create partial files and collectively form a CSS file. — Joykal Infotech
– Joykal Infotech, Commented Dec 29, 2018 at 10:00
@Joykal Infotech: That's not true. It will still work even when they are in separate files, as long as you include them all, whether using link in HTML as shown in the question or using @import in CSS. You don't need Sass for any of this. — BoltClock
– BoltClock, Commented Dec 29, 2018 at 10:18

BoltClock · Accepted Answer · 2018-12-29 10:16:23Z

1

Yes, everything you have here will just work, as long as you include style.css wherever you want to use your web font, e.g. the way you have done using link. Your @font-face rule, like any other CSS rule, does not have to appear in the same stylesheet as the CSS rules that reference it, or in any HTML with inline styles that reference it.

answered Dec 29, 2018 at 10:16

BoltClock

728k165 gold badges1.4k silver badges1.4k bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Are @font-face rules are usable in it's defined CSS File or usable in other CSS files and inline CSS codes?

File Name: style.css

File Name: another-style.css

File Name: index.html

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

File Name: style.css

File Name: another-style.css

File Name: index.html

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related