Discovering the font-family of a Specific Text
The original question is✤:
"How can I identify the font used to display “MAPLE SYRUP” here?"
✤Link provided by me
The response from Bill Fransen✣ is accurate but lacks specifics for beginners, while the answer from Mikhail Chernysh✲ is helpful but doesn't offer an explanation and doesn't pinpoint the exact font used for "MAPLE SYRUP".
✣ Refer to Method 1
✲ Refer to Method 2
Method 1
Utilizing Developer Tools in the Browser.
The brief slideshow example below demonstrates usage in Chrome. The HTML and JavaScript are purely for illustrative purposes. View in full page mode for better understanding.
$(".bx").bxSlider();
<link rel="stylesheet" href="https://cdn.jsdelivr.net/bxslider/4.2.12/jquery.bxslider.css">
<main class="bx">
<section>
<img src="https://i.ibb.co/n0V40Wq/inspect.png">
</section>
<section>
<img src="https://i.ibb.co/jGXqn7k/developertools.png">
</section>
<section>
<img src="https://i.ibb.co/6NMn7Gx/stylestab.png">
</section>
<section>
<img src="https://i.ibb.co/hZM3N5d/computedtab.png">
</section>
</main>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/bxslider/4.2.12/jquery.bxslider.min.js"></script>
Method 2
Using JavaScript
In this scenario, the font employed for text rendering is sourced from fontCDN.com (similar to Google Fonts). As there was no Avenir Next font on any font CDNs, I opted for Avenir. You can still download the files and host them yourself.
Details are annotated in the code example
/**
* It finds the CSS propertyValues of each propertyName given that is
* computed on a given DOM Object (HTMLElement) or pseudo-element (CSS `::selector`).
* @param {Object<DOM>} node - HTMLElement referenced as a DOM Object.
* @param {String<selector>} pseudoElement - Pseudo-element of node, if there is none,
* null is required.
* @param {Array<spread>} properties - One or more CSS propertyNames.
* @returns {Object} - An Object literal -- each propertyName of properties
* is a key and it's corresponding propertyValue is
* assigned as it's value.
*/
const findStyles = (node, pseudoElement, ...properties) => {
const cS = getComputedStyle(node, pseudoElement);
const aA = properties.map(prop => {
let pV = cS.getPropertyValue(prop);
return [prop, pV];
});
return Object.fromEntries(aA);
}
const foot = document.querySelector("footer");
const fS = findStyles(foot, null, "font-family", "font-size", "line-height");
console.log(JSON.stringify(fS));
/**
* Alternate method to access CDNFonts
*/
/* @import url('https://fonts.cdnfonts.com/css/avenir');
*/
:root {
font: 2.25ch/1.15 'Avenir';
}
<!DOCTYPE html>
<html>
<head>
<!--
Primary method to access CDNFonts
-->
<link href="https://fonts.cdnfonts.com/css/avenir" rel="stylesheet">
<!--
Inline CSS goes inside <style>
↙️ -->
<style></style>
</head>
<body>
<HEADER>
<header>
<h1><H1> Masthead</h1>
<p><P> Deck</p>
</header>
<MAIN>
<main>
<h2><H2> Headline</h2>
<p><P> Subhead</p>
<ARTICLE>
<article>
<p><P> Copy</p>
</article>
</main>
<FOOTER>
<footer>
<address>
<ADDRESS> <a href="mailto:<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="abd1ced99b9bc5ceebc5dec7c785c5cedf">[email protected]</a>"><A> Email zer00ne</a>
</address>
</footer>
<!--
It's common practice to place all <script>s before the
closing </body> tag.
Load external JavaScript before the inline JavaScript
-->
<script src="https://website.com/path/to/script.js"></script>
<!--
Inline JavaScript goes inside <script>
↙️ -->
<script></script>
</body>
</html>