4

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?

Mozmith
  • 63
  • 6

4 Answers4

3

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...

Kenneth Stoddard
  • 1,409
  • 11
  • 13
1

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.

Toastrackenigma
  • 7,604
  • 4
  • 45
  • 55
Difster
  • 3,264
  • 2
  • 22
  • 32
  • 1
    OP probably wants to find out this information using JavaScript, so that he can use it within his application in some way. Also, F12 only works in Internet Explorer - for example Chrome on Mac is Cmd+Shift+I – Toastrackenigma Jul 29 '17 at 03:36
  • I probably shouldn't be answering questions when I'm sick. LOL But F12 works just fine for me in Chrome. – Difster Jul 29 '17 at 03:38
  • Ah, it's a great way to spend the time though :P Maybe F12 works on Chrome on Windows - I didn't know that. – Toastrackenigma Jul 29 '17 at 03:42
  • F12 works on most browsers independent of your OS.CTRL+SHIFT+I is the same as just pressing F12.@Toastrackenigma – Mozmith Jul 29 '17 at 03:59
1

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

mep
  • 431
  • 1
  • 4
  • 15
  • 1
    And how to determine what of specified are used? This doesn't answer the question. – Vadim Ovchinnikov Jul 29 '17 at 03:41
  • Edited it to give info on how to do it in JS and within chrome – mep Jul 29 '17 at 03:47
  • It doesn't answer the question still because if you run `window.getComputedStyle(document.querySelector("p"))["font-family"]` for OP's code it will return whole array `georgia,garamond,serif`, not rendered font name! – Vadim Ovchinnikov Jul 29 '17 at 03:50
  • Vadim Ovchinnikov is right.it shows all the font families.i also used other methods.but it gave me the same results.can you be a little more precise?@FattySalami – Mozmith Jul 29 '17 at 03:52
  • yes it is there.under rendered styles in inspector.a good solution but can i find it dynamically using javascript? – Mozmith Jul 29 '17 at 03:56
  • Your right look at the second answer on this link. [link](https://stackoverflow.com/questions/884177/how-can-i-determine-what-font-a-browser-is-actually-using-to-render-some-text) it explains how to see the font being used in chrome, firefox and safari – mep Jul 29 '17 at 03:56
  • This answer is old so I would think there is a better way now but [link](https://stackoverflow.com/questions/2664045/how-to-get-an-html-elements-style-values-in-javascript) explains how to get the style with JS – mep Jul 29 '17 at 03:58
0

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;">
Bhargav Chudasama
  • 6,928
  • 5
  • 21
  • 39
  • I am sorry Bhargav.I dont want to use any 3rd party libraries.Would appreciate i you provide something in Vanilla – Mozmith Jul 29 '17 at 06:04