Posted 6 days ago. Visible to the public.

CSS: How to find out the rendered font in chrome

The rendered font often depends on the local font your system provides, therefore you often find a rule like below in the computed style for an element:

Copy
font-family: Menlo,Monaco,Lucida Console,Liberation Mono,DejaVu Sans Mono,Bitstream Vera Sans Mono,Courier New,monospace,serif

This means if your system has a font named Menlo, it will render the text with this font. Otherwise it will try Monaco and so on. For the last two fallback options the system is free to use any monospace font or if not present any serif font. At least one serif font should be present on any system.

A side effect is the rendering of a different font on a different system, meaning the font changes e.g. between Linux and Windows. With chrome you can show the actual rendered font in the tab "Elements" > "Computed". Below all computed styles you will see a separated section with the name "Rendered Fonts":

Image

Note: If you want to force a desired font on all systems you normally embed a webfont. This could still lead to some problems e.g. because of IE security settings.

makandra has been working exclusively with Ruby on Rails since 2007. Our laser focus on a single technology has made us a leader in this space.

Owner of this card:

Avatar
Emanuel De
Last edit:
6 days ago
by Emanuel De
Attachments:
Screenshot_from_2018-12-06_10-05-52.png
About this deck:
We are makandra and do test-driven, agile Ruby on Rails software development.
License for source code
Posted by Emanuel De to makandra dev
This website uses cookies to improve usability and analyze traffic.
Accept or learn more