Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/code-beaker/whatfont-web-production

[Unofficial] Website for the WhatFont browser extension
https://github.com/code-beaker/whatfont-web-production

website whatfont

Last synced: about 1 month ago
JSON representation

[Unofficial] Website for the WhatFont browser extension

Awesome Lists containing this project

README

        

# WhatFont

WhatFont lets you inspect the typography of a website and provide information on the different fonts used.

## Table of contents

- [WhatFont](#whatfont)
- [Table of contents](#table-of-contents)
- [What Can It Do?](#what-can-it-do)
- [Download for Chrome](#download-for-chrome)
- [Download for Firefox](#download-for-firefox)
- [About the website](#about-the-website)
- [Performance](#performance)
- [Desktop](#desktop)
- [Mobile](#mobile)
- [Tools and Tech](#tools-and-tech)
- [Tools](#tools)
- [Testing devices - Smartphones](#testing-devices---smartphones)
- [Languages](#languages)
- [Others](#others)

## What Can It Do?

This extension will let you inspect the fonts used on a website. Not just that,

- `font-weight` or thickness of the font
- `font-size` or size of the font
- `font-style` (italic, oblique, normal, etc.)

### Download for Chrome

Download the extension for Chrome from the Official [Chrome Webstore](https://chromewebstore.google.com)

### Download for Firefox

Download the add-on from [Mozilla Addons](https://addons.mozilla.org) website.

### About the website

The website was designed and developed by Tharun Raj(Code-Beaker). It's not official yet.

> [!NOTE]
> This is just a _demo-like_ website. It is not a part of the official browser extension.

### Performance

See how this website performs on Google SpeedInsights.

#### Desktop

Performance on desktops and laptops
![Desktop](image.png)

#### Mobile

Performance on mobile phones
![Mobile](image-1.png)

## Tools and Tech

Everything used to build this website including the software/tools and different languages.

### Tools

Software and tools.

![Visual Studio Code](https://img.shields.io/badge/Visual%20Studio%20Code-0078d7.svg?style=for-the-badge&logo=visual-studio-code&logoColor=white)

![Windows](https://img.shields.io/badge/Windows-0078D6?style=for-the-badge&logo=windows&logoColor=white)

![Ubuntu](https://img.shields.io/badge/Ubuntu-E95420?style=for-the-badge&logo=ubuntu&logoColor=white)

![Brave](https://img.shields.io/badge/Brave-FB542B?style=for-the-badge&logo=Brave&logoColor=white)

![Firefox](https://img.shields.io/badge/Firefox-FF7139?style=for-the-badge&logo=Firefox-Browser&logoColor=white)

- [Parcel Bundler](https://parceljs.org)

The source files are bundled using **Parcel** for better performance.

#### Testing devices - Smartphones

Smartphones on which the website was tested

- Samsung Galaxy A13
- Realme 1
- Realme 11x 5G
- Samsung Galaxy M30
- Xiaomi Mi A3

### Languages

Languages used to build the website

![HTML5](https://img.shields.io/badge/html5-%23E34F26.svg?style=for-the-badge&logo=html5&logoColor=white)

![CSS3](https://img.shields.io/badge/css3-%231572B6.svg?style=for-the-badge&logo=css3&logoColor=white)

![JavaScript](https://img.shields.io/badge/javascript-%23323330.svg?style=for-the-badge&logo=javascript&logoColor=%23F7DF1E)

### Others

Images, icons and other resources

- **[Undraw](https://undraw.co)** for illustrations
- **[Bootstrap Icons](https://icons.getbootstrap.com)** for the icons
- **[Google Fonts](https://fonts.google.com)** to locally host the fonts