Una página web típica generalmente consta de varios elementos diferentes, la mayoría de ellos codificados en diferentes colores y escritos en diferentes fuentes y estilos. En ocasiones, nos encontramos con páginas web tan bellamente diseñadas que nos dan ganas de profundizar en sus atributos; un tema muy elegante o una fuente agradable y profesional, tal vez.

Las personas que conocen las fuentes y están fascinadas con ellas a menudo usan herramientas gratuitas de identificación de fuentes en línea^{(free online font identifier tools)} para ayudar a descubrir fuentes en la web. Estas herramientas en línea requieren que ingrese una URL o cargue una imagen con la fuente mostrada, que luego se inspecciona. En caso de que no quiera pasar por la molestia de aprender a usar una nueva herramienta, esta publicación es para usted. Hoy, discutiremos cómo los usuarios pueden identificar qué fuente está usando una página web en particular sin usar una extensión del navegador, una aplicación o cualquier herramienta en línea.

El procedimiento que discutiremos en este artículo girará en torno a una configuración que ofrecen la mayoría de los navegadores web, a saber, ' Herramientas de desarrollo^{(Developer Tools)} ' o, para ser más específicos, una opción llamada Inspeccionar elemento^{(Inspect Element)} . Aquí, discutiremos cómo se pueden identificar las fuentes en dos navegadores: Chrome , Edge y Firefox .

Identifique las^(Identify) fuentes en una página web usando Inspect Element en Firefox

Visite la página web de la fuente que desea identificar y haga clic derecho en el texto que está escrito en la fuente que le interesa.

De la lista de opciones que aparecen (el menú contextual), haga clic en Inspeccionar elemento^{(Inspect Element)} . Al hacerlo^(Doing) , se abrirán las Herramientas para desarrolladores^{(Developer Tools)} en la parte inferior de la página.

En la esquina inferior derecha de la sección Herramientas de desarrollo^{(Development Tools)} , encontrará un subtítulo llamado Fuentes^(Fonts) , haga clic en él.

Luego le mostrará las propiedades de la fuente que desea ver, como su tamaño, altura de línea, grosor, etc., y también si la fuente está en cursiva o no, aunque eso siempre es evidente.

Si está interesado en saber más sobre la fuente en uso, Firefox también lo tiene cubierto. Si se desplaza hacia abajo en la sección de fuentes y hace clic en 'Todas las fuentes de la página', la pestaña de fuentes se expandirá y se le mostrarán todas las fuentes que se están utilizando en la página web que está navegando en este momento, y también dónde se encuentran. Están siendo usados. No solo eso, sino que también obtienes una vista previa de cómo se ve una fuente en particular. Al pasar el mouse sobre las fuentes en las Herramientas para desarrolladores^{(Developer Tools)} , se resaltarán las secciones de la página web que usan esa fuente.

Identificar una fuente usando las herramientas para desarrolladores^{(Developer Tools)} en Chrome

El proceso es similar al descrito anteriormente. Siga los primeros dos pasos como lo hizo con Firefox para abrir las Herramientas para desarrolladores^{(Developer Tools)} en el lado derecho de la página.

Haga clic en el subtítulo 'Calculado'.

Desplácese^(Scroll) un poco hacia abajo y encontrará información sobre la fuente que le interesa (familia de fuentes, tamaño, etc.)

Desafortunadamente, Chrome no le brinda ninguna información adicional como lo hace Firefox .

Identifique^(Identify) qué fuente^(Font) se usa con Edge Developer Tools

1. borde abierto
2. Haga clic con el botón derecho y seleccione el texto
3. Seleccione Inspeccionar
4. En las Herramientas para desarrolladores^{(Developer Tools)} que se abren, busque en Calculado^(Computed)
5. Verá los detalles de la fuente.

Si no cree que no puede trabajar con las herramientas de desarrollo^{(Developer Tools)} del navegador y que las herramientas en línea le convienen más, hay varias de ellas que funcionan muy bien.

Lea^{(Read next)} a continuación: Cómo encontrar alternativas gratuitas similares a las fuentes pagas^{(find similar free alternatives to paid Fonts)} .

Identify fonts in Chrome, Edge and Firefox using Developer Tools

A typical web page generally consists of several different elements with most of them coded in different colorѕ and written in different fonts and styles. Sometimes, we cоme acrosѕ web pages so beautіfully designed that they make us want to delνe dеep into their attributеs; a very elegant theme or a nice, profеssional font, perhaps.

People who know their way around fonts and are fascinated by them often use free online font identifier tools to help discover fonts on the web. These online tools require you to enter a URL or upload an image with the font showcased, which is then inspected. In case you don’t want to go through the hassle of learning to use a new tool, this post is for you. Today, we will discuss how users can identify what font a particular web page is using without using a browser extension, an application, or any online tools.

The procedure that we will be discussing in this article will revolve around a setting that most web browsers offer, namely ‘Developer Tools,’ or to be specific, an option called Inspect Element. Here, we will discuss how fonts can be identified in two browsers – Chrome, Edge and Firefox.

Identify fonts on a webpage using Inspect Element in Firefox

Visit the web page of the font of which you want to identify and right-click on the text that is written in the font you are interested in.

From the list of options that show up (the context menu), click on Inspect Element. Doing so would open the Developer Tools on the bottom of the page.

On the bottom right corner of the Development Tools section, you will find a subhead named Fonts, click on it.

It will then display for you the properties of the font you wanted to look into like its size, line height, weight, etc., and also whether or not the font is in italics or not, though that is always apparent.

If you are interested to know more about the font in use, Firefox has you covered with that too. If you scroll down the fonts section and click on ‘All fonts on the page,’ the fonts tab will expand and you will be shown all the fonts that are being used on the web page you are browsing at the moment, and also where they are being used. Not just that, but you also get a preview of how a particular font looks. Hovering your mouse over the fonts in the Developer Tools will highlight the sections of the web page that use that font.

Identify a font using Developer Tools in Chrome

The process is similar to the one described above. Follow the first two steps as you did with Firefox to open the Developer Tools on the right side of the page.

Click on the ‘Computed’ sub-head.

Scroll down a bit and you will find information about the font you’re interested in (font’s family, size, etc.)

Unfortunately, Chrome doesn’t provide you with any additional information like Firefox does.

Identify which Font is used using Edge Developer Tools

1. Open Edge
2. Right-click and select the text
3. Select Inspect
4. In the Developer Tools that open, look under Computed
5. You will see the Font details.

If you don’t think you can’t work around with browser Developer Tools and that online tools would suit you better, there are several of them that work very well.

Read next: How to find similar free alternatives to paid Fonts.

Related posts

• Cómo descargar un Font de un Website usando Developer Tools

• Site Data claro para determinado sitio en Chrome or Edge usando Developer Tools

• Cómo cambiar el Default Font en Chrome, Edge, Firefox browser

• Desactive Developer Tools en Edge usando Registry or Group Policy

• Caja Fix Blurry File Open dialog en Google Chrome and Microsoft Edge

• Cómo sincronizar Tabs entre Edge, Chrome and Firefox browsers

• Habilitar Adobe Flash Player en Chrome, Edge, Firefox, IE, Opera

• Eliminar todo el Saved Passwords a la vez en Chrome, Firefox, Edge

• Cómo bloquear las solicitudes de Web Notification en Chrome, Firefox, Edge Browser

• Cómo cambiar default browser: Chrome, Firefox, Edge EN Windows 10

• Cómo abrir Local Files en Chrome, Firefox y Edge

• Cómo cambiar la página de inicio en Chrome, Firefox, Opera, navegadores Edge

• Desactivar, habilitar Cookies en Chrome, Edge, Firefox, Opera, IE navegadores

• Borrar Cookies, Site Data, Cache para sitio web específico: Chrome Edge Firefox

• ¿Es seguro guardar contraseñas en Chrome, Firefox or Edge browser?

• Habilitar DNS sobre HTTPS en Firefox, Chrome, Edge, Opera, Android, iPhone

• Cómo deshabilitar Geolocation en Firefox, Chrome, y Edge

• Seguridad, Privacy, Cleaning Herramientas para Edge, Firefox, Chrome, Opera

• Cómo traducir un Web page en Chrome, Firefox and Edge

• Share Button Plugins para Chrome, Firefox and Edge browsers