Swifie

Package made by a swiftie developer, use the Taylor Swift's album fonts in your projects, includes font files and css files to import them easily.

Instalation

npm i swiftie

Quick Start

If you're using a library or framework like React, import this fonts is as easy as import the css file with the name of the album of the font that you want:

// For folklore font
import "swiftie/folklore.css"

// For Lover font
import "swiftie/lover.css"

const App = () => {
    return (
        <>
            <div className="font-folklore">
                folklore
            </div>

            <div className="font-lover">
                Lover &lt;3
            </div>
        <>
    )
} 

See that the classes font-* are included when you import a font family, this is to make easier the use of the fonts.

Import All Quick

To import all fonts just copy this

import "swiftie/taylor-swift.css"
import "swiftie/fearless.css"
import "swiftie/speak-now.css"
import "swiftie/red.css"
import "swiftie/1989.css"
import "swiftie/reputation.css"
import "swiftie/lover.css"
import "swiftie/folklore.css"
import "swiftie/evermore.css"
import "swiftie/fearless-tv.css"
import "swiftie/red-tv.css"
import "swiftie/midnights.css"

All Fonts

In the next table you can see more information about the files, classes and font-family names of all the fonts.

To use a font, import the file using the File Name, and then reference the Font Family Name in a css class, OR use the class in a class attribute to automatically apply it.

| Album | File Name | Font Family Name | class | |--------------|------------------|------------------|---------------------| | Taylor Swift | taylor-swift.css | "Taylor Swift" | "font-taylor-swift" | | Fearless | fearless.css | "Fearless" | "font-fearless" | | Speak Now | speak-now.css | "Speak Now" | "font-speak-now" | | RED | red.css | "Red" | "font-red" | | 1989 | 1989.css | "1989" | "font-1989" | | reputation | reputation.css | "Reputation" | "font-reputation" | | Lover | lover.css | "Lover" | "font-lover" | | folklore | folklore.css | "Folklore" | "font-folklore" | | evermore | evermore.css | "Evermore" | "font-evermore" | | Fearless TV | fearless-tv.css | "Fearless TV" | "font-fearless-tv" | | RED TV | red-tv.css | "Red TV" | "font-red-tv" | | Midnights | midnights.css | "Midnights" | "font-midnights" |