astro-fonts
Advanced tools
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
A specialized Astro Component which allows you to control how external fonts from Google's Font API, are utilized within your Astro project.
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
To get started simply grab the component
npm i astro-fonts -D
And import it:
import { Font } from 'astro-fonts'
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? />
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.
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.
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 : stringThis prop is required. Here specify they name of any font that is present on `google-fonts', and the component would acquire it for you.
This step is case-sensitive,where we respect the names as they appear on Google Fonts
weights : number[ ] | stringHere 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? : booleanTo 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? : booleanIf 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.
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.
FAQs
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
We found that astro-fonts demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
PyPI confirms no security flaws were exploited in the Ultralytics supply chain attack and highlights improvements for safer package publishing.
Security News
Research
The Socket Research Team breaks down a malicious wrapper package that uses obfuscation to harvest credentials and exfiltrate sensitive data.
Research
Security News
Attackers used a malicious npm package typosquatting a popular ESLint plugin to steal sensitive data, execute commands, and exploit developer systems.