What are the CSS for these Fonts?

Hey All,

I really like a Font type and style and wanted to know what are the CSS for creating the headline Fonts on this page?
https://www.chsfreewifi.com/

I am referring to the Text: FREE WIFI IN LOWCOUNTRY PUBLIC PARKS

1- What Font type is this?
2- How do we create the very thick Font for Text: LOWCOUNTRY in that text

Thanks,

What do your browsers dev tools show as the font-family?

2 Likes

Check out the attachment to find all the answers. :winky:

economica-example.zip (16.8 KB)

coothead

Dev tools combined with view source will tell you everything you want to know, including where to get the font.

2 Likes

Mit, how do you use the Dev Tools, on Chrome lets say, to find the exact info about Font details!
Thanks.

Right-click on the item you want to inspect. The HTML will be shown in the dev tools, with the associated CSS in a separate panel.

1 Like

These screen captures are of the Top page here using Chrome with the dev tools docked at the bottom. I have been using dev tools for quite a long time and yet there are a still lot of features I haven’t begun to try yet, The more I explore the more amazed I am with what’s possible.

Anyway, go to a page and right-click over what you’re interested in. The context menu will open

click on “Inspect” and the dev tools will open

the element clicked on will be in the left pane with its HTML highlighted. Its CSS will be in the right pane under “Styles”. By scrolling the pane you will be able to see various selectors and rules. A rule that does not have a line through it is one that is not getting overwritten and is the rule that is in effect. eg. in this case
font-family: Helvetica,Arial,sans-serif;

However, that is the font stack. By looking under “Computed” which of those my browser is using can be seen

In my case, it’s Arial

IMHO dev tools are invaluable. the HTML can be edited, CSS rules can be added, removed, changed etc. and the page will display with those changes. Safe to do because the changes happen only in the browser. And if you find something you like you can make the changes in the actual source files for your page.

The dev tools can also be used to look at resource loading times, debug JavaScript, and as I posted a whole lot more than I’ve ever tried. Give the dev tools some of your time and I think you will be as impressed as I am with what can be done.

1 Like

’ totally agree and believe a new sticky Topic could be raised to help Noobies benefit by sharing how to learn the intricacies of this powerful tool - which is also available in all the popular browsers.

1 Like

Coot, thanks for providing this detail.

Mitti, Thanks for this Intel. FYI, I went to Chrome/Inspect for this SitePoint page we are on, and after 30 Minutes of looking at it just gave up :slight_smile:
It is going to take much time to figure it out, which time I dont have now. But ASAP I need to delv into this as you noted.
Thanks again.

It’s what I’m here for. :biggrin:

coothead

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.