Hayley is Coding
Hayley is Coding

Hayley is Coding

Does Anyone Know What Font This Is?!

Does Anyone Know What Font This Is?!

Hayley is Coding 's photo
Hayley is Coding
Oct 8, 2020

3 min read

Subscribe to my newsletter and never miss my upcoming articles

We've all come across an amazing font on a website where we're left wondering - What font is THAT?

Well, wonder no more! It's pretty easy to find out what it is.

This is how it's done:

1) Open the website in Google Chrome.

2) Highlight the word (the one with the font that you like) and right-click.

3) Choose Inspect from the drop-down menu.

Chrome DevTools will show up, thus allowing us to view the source code of that page.

Screen Shot 2020-10-08 at 11.06.16 pm.png

Chrome DevTools is a set of web developer tools built directly into the Google Chrome browser. You can also view the source code if you're using another browser, but Chrome is user-friendly and powerful.

4) Click Computed (next to Styles on the right-hand side of the source code).

Screen Shot 2020-10-08 at 11.53.18 pm.png

5) Type what you're looking for into the Filter box.

So if you're looking for the font, you can start typing in 'font-family'.

Screen Shot 2020-10-08 at 11.53.59 pm.png

You will then see the font that you're looking for!

In the image above, we can see that the font is Source Sans Pro.

Told you it was easy, right?

Here is a quick gif if you'd like to see this in action:

record.gif

Temporarily Editing the Source Code of a Website

We can even temporarily edit the font (or any other styles) of a website.

This is useful for when we're creating our own sites because we can test out various CSS property values right in the browser!

We can then head over to our code editor and edit our code accordingly.

I like to use Chrome DevTools to test out padding and margin values when creating a new website as it is a huge time-saver.

To edit the code, select the element using the method above and then click on 'element.style' on the right side of your source code window (as seen in the image below).

Screen Shot 2020-10-06 at 10.16.33 pm.png

Then, start typing the new CSS property value.

Here is a quick gif to see this in action:

1v8TSggjFK.gif

Note, this is only a temporary change so you can't 'break the website!

Give it a try on some websites that you love :)

Editing the HTML

Up to this point, we have only spoken about CSS - but we can even edit the HTML!

I had some fun editing Donald Trump's tweet below. ;)

Screen Shot 2020-10-06 at 9.41.29 pm.png

I guess this is a good time to say:

Don't believe everything that you read!

Alternative Methods

1) One of my fellow students at AltCampus (the online software developer bootcamp that I'm currently enrolled in) also mentioned that ChromeDevTools has an experimental CSS feature where you can see a CSS summary of a website directly in Chrome DevTools.

Follow this tutorial to learn how to enable it in your Chrome DevTools.

2) One of the co-founders of AltCampus (@nnnkit) also shared this method with me:

a) Click the arrow button on the top left of the Chrome DevTools window.

Screen Shot 2020-10-06 at 10.06.21 pm.png

b) Click the element on the webpage itself.

c) Right-click on the HTML code of that element and click 'copy styles'.

d) You can then paste that style into 'console' and transfer it to your code editor!

Here is another gif to see this in action:

YOkq0LDdRO.gif

How to Find Fonts On Images

Something to note is that the above methods don't work if the font is part of an image on the website.

Finding out what font is being used on an image can be tricky, but these sites can help:

whatfontis.com

fontsquirrel.com

Happy coding! :)

Did you find this article valuable?

Support Hayley is Coding by becoming a sponsor. Any amount is appreciated!

Learn more about Hashnode Sponsors
Share this