├── .editorconfig
├── .gitignore
├── .prettierrc
├── LICENSE.md
├── README.md
├── composer.json
├── resources
└── views
│ └── font-face.blade.php
└── src
├── Console
└── Commands
│ └── WebfontsAddCommand.php
├── Facades
└── Webfonts.php
├── PreloadWebfonts.php
├── Webfonts.php
└── WebfontsServiceProvider.php
/.editorconfig:
--------------------------------------------------------------------------------
1 | root = true
2 |
3 | [*]
4 | charset = utf-8
5 | end_of_line = lf
6 | insert_final_newline = true
7 | indent_style = space
8 | indent_size = 2
9 | trim_trailing_whitespace = true
10 |
11 | [*.md]
12 | trim_trailing_whitespace = false
13 |
14 | [*.php]
15 | indent_size = 4
16 |
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | /vendor
2 | composer.lock
3 |
--------------------------------------------------------------------------------
/.prettierrc:
--------------------------------------------------------------------------------
1 | {
2 | "semi": false,
3 | "singleQuote": true,
4 | "trailingComma": "es5"
5 | }
6 |
--------------------------------------------------------------------------------
/LICENSE.md:
--------------------------------------------------------------------------------
1 | MIT License
2 |
3 | Copyright (c) Brandon Nifong
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy
6 | of this software and associated documentation files (the "Software"), to deal
7 | in the Software without restriction, including without limitation the rights
8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # Laravel Webfonts
2 |
3 | 
4 | 
5 | 
6 |
7 | Laravel Webfonts allows you to easily download, install, and preload over 1500 Google fonts locally in your Laravel project.
8 |
9 | 
10 |
11 | ## Features
12 |
13 | - 🔍️ Search and install over 1500 Google fonts from the public [google-webfonts-helper](https://github.com/majodev/google-webfonts-helper) API.
14 | - ⚡️ Automatically generate `@font-face` CSS `at-rules` when installing fonts using CLI.
15 | - 🧑💻 Supports [Vite](https://vitejs.dev/) out of the box with zero configuration.
16 | - ⚡️ Provides an easy-to-use `@preloadFonts` Blade directive to preload fonts found in the Vite manifest.
17 | - 🚀 Automatically injects font preload markup into `wp_head` on WordPress sites running [Acorn](https://github.com/roots/acorn).
18 |
19 | ## Requirements
20 |
21 | - [PHP](https://secure.php.net/manual/en/install.php) >= 8.1
22 | - [Composer](https://getcomposer.org/download/)
23 | - [Laravel](https://github.com/laravel/laravel) >= 10.0
24 |
25 | ## Installation
26 |
27 | Install via Composer:
28 |
29 | ```sh
30 | $ composer require log1x/laravel-webfonts
31 | ```
32 |
33 | ## Usage
34 |
35 | If you already have fonts locally installed in your project, skip to [Preloading Fonts](#preloading-fonts).
36 |
37 | ### Adding Fonts
38 |
39 | Laravel Webfonts provides a very easy way to install new webfonts to your project using command line:
40 |
41 | ```sh
42 | artisan webfonts:add
43 | ```
44 |
45 | By default, installing a font will trigger the following things to happen:
46 |
47 | - Download the font archive to a temporary directory in local storage.
48 | - Extract the font archive.
49 | - Move downloaded fonts to `resources/fonts`.
50 | - Clean up the temporary directory.
51 | - Generate and prepend `@font-face` at-rules to a `fonts` stylesheet.
52 |
53 | The fonts stylesheet will reside at the root of your stylesheet directory located in `resources/`. If the font stylesheet does not already exist, it will be created using the most common stylesheet extension (css, scss, ...) found among your styles.
54 |
55 | By default, the `resources/css` and `resources/styles` directories are automatically scanned for existing files to find the appropriate place to write the fonts stylesheet.
56 |
57 | The generated `@font-face` at-rules will look like this:
58 |
59 | ```css
60 | @font-face {
61 | font-display: swap;
62 | font-family: 'Roboto';
63 | font-style: normal;
64 | font-weight: 400;
65 | src: url('../fonts/roboto-v30-latin-regular.woff2') format('woff2');
66 | }
67 |
68 | @font-face {
69 | font-display: swap;
70 | font-family: 'Roboto';
71 | font-style: italic;
72 | font-weight: 400;
73 | src: url('../fonts/roboto-v30-latin-italic.woff2') format('woff2');
74 | }
75 | ```
76 |
77 | Adding additional fonts will cause them to be prepended to the existing `fonts` stylesheet.
78 |
79 | ### Importing Fonts
80 |
81 | When fonts are installed for the first time, a `fonts` stylesheet is created in your project's stylesheet folder. In a vanilla Laravel project, this is typically `resources/css/fonts.css`.
82 |
83 | You must import the generated `fonts` file into your project's primary stylesheet (e.g. `app.css`). If you're using Tailwind, it would look something like:
84 |
85 | ```css
86 | @import 'fonts';
87 |
88 | @tailwind base;
89 | @tailwind components;
90 | @tailwind utilities;
91 | ```
92 |
93 | ### Preloading Fonts
94 |
95 | > [!NOTE]
96 | > If you are using WordPress alongside [Acorn](https://github.com/roots/acorn), you can ignore this section as preloading is automatically handled for you inside of `wp_head` if an asset manifest containing valid fonts is detected.
97 |
98 | Laravel Webfonts primary functionality while in production is to provide a simple way to preload your locally hosted webfonts.
99 |
100 | This is done by reading the compiled `woff2` fonts from your Vite manifest and generating the appropriate markup for you to place inside of `