Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
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
- Host: GitHub
- URL: https://github.com/code-beaker/whatfont-web-production
- Owner: Code-Beaker
- Created: 2024-08-02T02:08:56.000Z (5 months ago)
- Default Branch: main
- Last Pushed: 2024-08-04T03:31:53.000Z (5 months ago)
- Last Synced: 2024-08-04T04:32:29.934Z (5 months ago)
- Topics: website, whatfont
- Homepage: https://whatfont-web-code-beaker.netlify.app/
- Size: 1.21 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
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