npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

astro-fonts

v0.2.6

Published

A Specialized Astro Font Component, letting you utilise any of the fonts availble to you using Google Fonts. This lets you to download font files to the local filesystem or use the fonts remotely. This Font component is your one-stop shop for all your Fon

Downloads

23

Readme

Astro-UI: Fonts Component

Astro-UI: Fonts Component

A specialized Astro Component which allows you to control how external fonts from Google's Font API, are utilized within your Astro project.

Project Status: WIP - Out for Testing

This project is currently released for testing amoungst the wider community, any issues should be raised via github, alternatively if you seek advice please reach out through the Astro discord channel

Getting Started

To get started simply grab the component

npm i astro-fonts -D

And import it:

import { Font } from 'astro-fonts'

How to use

You can use this component within the <head> of your Layout or Components, simply by declaring the element in the following manner:

<Font family="Roboto" weights={[400,500,700,900]} local? || remote? />

Props

export interface Props{
    family: string;
    weights?:number[] | string;
    local?:boolean;
    remote?:boolean;
}

Then let the component control the use of the font within your project.


How it works

The component makes a request to Google's API directly and retrieves all the meta information and font files in the background for the Font.family that you specify.

It then applies this in one of two ways to your project, the default manner is where, a companion stylesheet would be generated within your public/assets/fonts/ directory. If this file does not exist, one will be made for you.

The generated stylesheet would contain @font-face style rules pertaining to the importing of the requested font. It would also link this to your projects page using <link as="stylesheet">. Allowing you to declare the use of the fonts elsewhere in your project.

Downloading Fonts

You can opt to choose to save the font-files to the filesystem. by applying the local prop to the <Font family="..." local/> would instruct the component to download the files alongside their companion stylesheet.

Saving you the laborious hassle of downloading and setting up the @font-face' style rules for yourself.


family : string

This prop is required. Here specify they name of any font that is present on `google-fonts', and the component would acquire it for you.

NB:

This step is case-sensitive,where we respect the names as they appear on Google Fonts


weights : number[ ] | string

Here you can specify the many different weights for your font as you wish to include.

By default the component would request only a weight of only '400', however any value passed in as a prop would override this default behavior.

weights="400" |{[400,600,900]}

local? : boolean

To instruct the component to download the fonts as to serve them from the filesystem instead of calling the font files via a network request.

Simply apply the property: local to the component.

<Font family="Roboto" weights={[400,700,900]} local />

In this example a total of 3 font files would be downloaded and saved on to the filesystem, one for each of the respective font weights and their corresponding styles.

The @font-face rule set would also be amended to reflect the location of the font files.


remote? : boolean

If you wish to only have your font files served remotely you can do so by specifying the: remote prop on the Component.

This would instruct the component to not save anything to the filesystem instead only print to the <head> the corresponding <link href="..."> elements in its place.


Credits

This Component was originally inspired by by FredKSchott's live stream, whereby he wanted to create this particular type of component, given the introduction and the subsequent follow-up visit by another Astro Core Maintainer: jonathantneal during his later demonstration.

It was only fitting to see how far one could take their idea.

v0.1.0 - build was designed upon the ideas from both Fred and Jon. This version utilized google-webfont-helper API to retrieve the font files from a respectable location.

Fellow community member: Lostra had then proposed a completely novel method for which the font component should derive the data directly from Google.

This lead to Lostra developing a custom CSS parser, and a extremely efficient, quick and reliable method of retrieving and allocating fonts from Google.

This newer version of the 'Astro-Font Component', is based on his new mechanism and design. It is highly scalable throughout your project. It is extremely performant, ie:

"It can now download 15 different fonts all in local mode, each with 4 weights, with times seen between 250-550ms dev mode! and similar in Builds.

I would also like to give special mentions to Rafid Muhymin and to Chuy for their assistance with debugging and testing.

Further more, Lostra has demonstrated exceptional skill with creating this latest form, my sincerest and deepest thanks goes out to him for his efforts and labour on this project.