CODEWITHSUNDEEP
javascripthtmlcss
Mozmith
Mozmith

Reputation: 73

Finding out which of the fonts is used

I have a paragraph with an inline style like given below:

<p style="font-family:georgia,garamond,serif;">

My question is that is there a way to find out which of the fonts is being used by my page and what is the selection procedure?

Upvotes: 5

Views: 2374

Answers (4)

Kenneth Stoddard
Kenneth Stoddard

Reputation: 1449

Dev Tools

Open dev tools and look for computed styles, you can see which styles are being applied and where...including fonts.

Fonts are defined using the font-family property. Your browser will look at this list of fonts, starting with the first (moving from left to right), and check to see if the font is available either on the users computer or via @font-face at rule. If the font is found, it will load it up, if not, it moves on to the next to try again.

Get computed font with JavaScript

var el = document.getElementById("id");
var style = window.getComputedStyle(el, null).getPropertyValue("font-family");

JSFiddle

See MDN...

Upvotes: 3

Bhargav Chudasama
Bhargav Chudasama

Reputation: 7161

try this one

it will get font name which will use in style 

//using id

var b = document.getElementById("p").style.fontFamily;
console.log(b);

//or using jquery tag selecter

console.log($("p").css('fontFamily'));
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p id="p" style="font-family:georgia,garamond,serif;">

Upvotes: 0

mep
mep

Reputation: 491

The browser will render the fonts in order of how you place them. For example, in your code the first font to be tried would be Georgia, then if that wasn't supported by the device or browser it would move on to trying Garamond, and than lastly it would use any serif font the browser and device could support.

CSS defines a property called font-family that contains an ordered list of fonts. These fonts are supposed to be tried in order, looking both for availability of the font itself, as well as availability of glyphs to draw the current text.1

To which font the browser is using in Chrome hit Crtl + Shift + I and if you click on elements in the html below under style it will show what style is being rendered on the page.

To get the rendered element with javascript see this answer

Article explain font selection by a browser

Upvotes: 1

Difster
Difster

Reputation: 3270

While in your browser, on that page, hit F12. You should see a section for CSS. What you look for exactly depends on your browser though.

Upvotes: 1

Related Questions