Ce projet vous montre comment utiliser des fonts localement dans vos applications Laravel, avec ViteJS et Tailwind CSS

Overview

Laravel - use local fonts with Tailwind CSS and Vite

Ce projet est né d'un constat: vous êtes souvent nombreuses et nombreux à galérer pour utiliser des polices stockée en local dans vos projets Laravel avec Tailwind CSS et Vite.

Parmis vous, il y en a qui abandonnent et qui cèdent aux sirènes du CDN de Google Fonts quand d'autres usent de pratiques obscures pour arriver à leurs fins (les paths qui pointent vers le rep ./public, on vous a vu le faire, c'est pas bien!)

Introduction

Nous allons partir du principe que vous avez déjà un projet Laravel auquel vous voulez ajouter votre propre sélection de polices que vous voudriez stocker en local. Ou bien vous pouvez tout simplement cloner ce projet, auquel cas il faudra au préalable lancer les commandes suivantes pour installer les dépendances nécessaires :

composer install
npm install
npm run dev

Sélectionner, télécharger et stocker des polices

Pour un souci de simplicité, nous allons utiliser une police issue de Google Fonts. Prenons par exemple la police DM Serif Display, non seulement parce qu'elle est jolie mais aussi parce qu'elle ne contient qu'une seule graisse (400, afin de ne pas alourdir notre exemple).

Comment la télécharger? Bon, Google Font propose un magnifique lien "Download Family", mais nous allons plutôt nous "simplifier" la vie et passer par un service tiers nommé Google Webfonts Helper afin de non seulement récupérer un zip avec les fichiers de la police désirée mais aussi le CSS qui va bien avec.

Utilisons ce lien pour reprendre notre police DM Serif Display. Vous verrez qu'il y a 4 étapes successives, que vous adapterez en fonction de vos envies :

  1. Select charsets Nous utiliserons le charset par défaut Latin

  2. Select styles Nous utiserons le style par défaut regular

  3. Copy CSS L'idéal serait que vous gardiez le paramètre par défaut Best Support. Dans notre exemple, nous allons nous contenter d'utiliser Modern Browser afin de nous alléger cette documentation. Le plus important ici est de bien paramétrer l'option Customize folder prefix (optional) qui est bien souvent votre plus grande source de problème. Initialement configurée sur ../fonts/, nous allons remplacer cela par ./, ni plus, ni moins. Ne copiez pas le CSS tout de suite, nous allons le faire après.

  4. Download files Rien de compliqué, il faut cliquer sur le gros bouton bleu pour récupérer une archive Zip de la police sélectionnée, décompresser l'archive, la renommer pour obtenir un nom plus "propre", comme par exemple dm-serif-display et d'aller le placer dans le dossier ./resources/fonts de votre app Laravel, que vous aurez préalablement créé si il n'existe pas encore.

Malheureusement, le service Google Webfonts Helper n'inclut pas dans l'archive Zip le fichier CSS contenant le @font-face, nous allons devoir le créer nous même. Pour cela, créer un fichier nommé dm-serif-display.css dans le répertoire ./resources/fonts/dm-serif-display et collez-y le code CSS fourni à l'étape 3. Enregistrer votre fichier. Nous n'en avons pas terminé pour autant...

Paramétrer Tailwind CSS

A ce niveau, nous allons estimer que vous avez déjà installé Tailwind CSS, et si malgré tout ce n'était pas encore le cas, je ne vais rien vous apprendre de plus que ce qu'il est écrit dans la documentation officielle pour l'installer correctement dans votre projet Laravel.

Techniquement, vous devriez avoir un fichier app.css dans votre répertoire ./resources et qui doit contenir les lignes suivantes :

@tailwind base;
@tailwind components;
@tailwind utilities;

Nous allons ajouter en haut de ce fichier la ligne suivante :

@import '../fonts/dm-serif-display/dm-serif-display.css';

Vu que le path est un problème récurrent, je vous explique ce que l'on fait ici. L'arborescence de notre dossier ./resources est, grosso modo, la suivante :

resources
|- css
|    |- app.css
|- fonts
|    |- dm-serif-display
|          |- dm-serif-display-v10-latin-regular.woff
|          |- dm-serif-display-v10-latin-regular.woff2
|          |- dm-serif-display.css
|- js
|- views

Donc pour importer dans le fichier app.css le contenu de notre fichier dm-serif-display.css, nous devons remonter d'un dossier .. (puisque nous sommes dans le dossier css), aller dans le dossier /fonts puis dans le sous-dossier /dm-serif-display, ce qui nous donne bien le path ../fonts/dm-serif-display/dm-serif-display.css utilisé dans l'import.

Mais tout ceci ne suffit pas pour exploiter notre nouvelle police avec Tailwind CSS. Nous allons devoir éditer le fichier tailwind.config.js qui est à la racine de votre projet Laravel et y ajouter une nouvelle FontFamily en étendant le thème :

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./resources/**/*.blade.php",
    "./resources/**/*.js",
    "./resources/**/*.vue",
  ],

  theme: {
    extend: {
      fontFamily: {
        "dm-serif": ["DM Serif Display", "serif"],
      },
    },
  },

  plugins: [],
};

De la sorte, vous aurez désormais une nouvelle classe nommée font-dm-serif (Tailwind génère automatiquement la classe en concaténant font-[nom de la clé de la font family que vous venez de créer])

Et maintenant?

Il ne vous reste plus qu'à lancer dans votre terminal favori la commande npm run dev ou npm run build et d'utiliser dans vos vues Blade la classe font-dm-serif.

Bonus

Il semblerait que le SSR (server-side rendering) ne soit plus trop à la monde, le CSR (Client-side rendering) devenant de plus en plus populaire grâce à Vue.js, React ou Angular (ou la techno du moment qui a la plus forte hype). Pour autant, il n'est pas mort. -bottom-3

Laravel a introduit avec la branche 7.x les Anonymous Components dans Blade et c'est, à mon sens, le meilleur moyen de créer du code plus lisible et facilement réutilisable. Dans ce projet, j'ai créé quelques composants Blade qui, je l'espère, vous inspireront pour vos prochains projets et que vous laisserez de côté la "vieille mais honorable" syntaxe Blade pour générer vos layouts et composants :)

You might also like...
Dompdf - Simple Dompdf package for Laravel

Dompdf - Simple Dompdf package for Laravel

Projet réalisé dans le cadre de l'apprentissage des API et d'API Platform

Bilemo BileMo est une entreprise offrant toute une sélection de téléphones mobiles haut de gamme. Vous êtes en charge du développement de la vitrine d

Easily replace Google Fonts with Bunny Fonts.

=== Replace Google Fonts with Bunny Fonts === Contributors: antonioleutsch Donate link: https://paypal.me/antonioleutsch Tags: google fonts, bunny fon

Tailwind UI is a Tailwind CSS component library designed by the authors of Tailwind CSS
Tailwind UI is a Tailwind CSS component library designed by the authors of Tailwind CSS

Tailwind UI is a Tailwind CSS component library designed by the authors of Tailwind CSS. This is a Winter CMS plugin that provides a custom, TailwindUI-based skin for the backend.

Botble plugin comment is a comment  plugin for Botble CMS
Botble plugin comment is a comment plugin for Botble CMS

Botble plugin comment This is a plugin for Botble CMS so you have to purchase Botble CMS first to use this plugin.

Rah comment spam - Comment anti-spam plugin for Textpattern CMS

rah_comment_spam Packagist | Issues | Donate Rah_comment_spam provides customizable anti-spam tools for Textpattern CMS’ comment system. Set minimum a

Arc admin comment preview - Simple Textpattern plugin that adds a comment preview to admin

arc_admin_comment_preview This is a Textpattern plugin for adding comment previews to the admin comment edit pages. Requirements Textpattern 4.0.8+ In

Ce projet est volontairement overkill et fait usage d'une débauche de techno, uniquement dans un objectif récréatif !

Projet OverKill Projet réaliser dans le cadre d'une série pour la chaine Youtube YoanDev. Ce projet est volontairement overkill et fait usage d'une dé

Assets Manager for
Assets Manager for "Vitewind" Theme, will inject CSS and JS assets for "Vitewind" theme to work properly with viteJS in development and production

Vitewind Manager plugin 💨 Windi CSS and ⚡️ Vite, for 🍂 OctoberCMS & ❄️ WinterCMS Introduction This is a helper plugin for 💨 Vitewind theme, don't i

Permet de vous de ne pas perdre des gigots pour chaque monde

About [FR] Permet de vous de ne pas perdre des gigots pour chaque monde [ENG] Allows you not to lose legs for each world Informations # _

 	L'organisation
L'organisation "nous les femmes " vous demande de lui réaliser une application qui permettra de gérer l'ensembles des organisations partenaires.

OSC-Femme Architecture du projet Modèle-vue-contrôleur ou MVC est un motif d'architecture logicielle destiné aux interfaces graphiques lancé en 1978 e

O-CONGO est un projet open source qui donne accès à la liste complète et officielle des toutes les provinces

O-CONGO est un projet open source qui donne accès à la liste complète et officielle des toutes les provinces, villes et communes de la République Démocratique du Congo (RDC), dans un premier temps.

Nebula is a minimalistic and easy to use administration tool for Laravel applications, made with Laravel, Alpine.js, and Tailwind CSS.

Nebula Nebula is a minimalistic and easy to use administration tool for Laravel applications, made with Laravel, Alpine.js, and Tailwind CSS. Nebula m

 Manage self-hosted Google Fonts in Laravel apps
Manage self-hosted Google Fonts in Laravel apps

This package makes self-hosting Google Fonts as frictionless as possible for Laravel users. To load fonts in your application, register a Google Fonts embed URL and load it with the @googlefonts Blade directive.

🔌  Convert Bootstrap CSS code to Tailwind CSS code
🔌 Convert Bootstrap CSS code to Tailwind CSS code

Tailwindo This tool can convert Your CSS framework (currently Bootstrap) classes in HTML/PHP (any of your choice) files to equivalent Tailwind CSS cla

Swap Google Fonts Display

Swap Google Fonts Display

🍃 In short, it's like Tailwind CSS, but for the PHP command-line applications.
🍃 In short, it's like Tailwind CSS, but for the PHP command-line applications.

Termwind Termwind allows you to build unique and beautiful PHP command-line applications, using the Tailwind CSS API. In short, it's like Tailwind CSS

🍃Termwind allows you to build unique and beautiful PHP command-line applications, using the Tailwind CSS API
🍃Termwind allows you to build unique and beautiful PHP command-line applications, using the Tailwind CSS API

Termwind allows you to build unique and beautiful PHP command-line applications, using the Tailwind CSS API. In short, it's like Tailwind CSS, but for the PHP command-line applications.

Plateforme de la communauté Devscast dans le but d'apprendre, échanger et réseauter

Devscast Community Platform The Devscast Community Platform is for those who want to impact the community by creating content around their passions, s

Owner
Fred Christian
I'm a strange mix between scary webdev, serial gamerz, hungry geek and awesome dude. Be careful.
Fred Christian
A DOMPDF Wrapper for Laravel

DOMPDF Wrapper for Laravel Laravel wrapper for Dompdf HTML to PDF Converter Require this package in your composer.json and update composer. This will

Barry vd. Heuvel 5.6k Dec 3, 2022
Adobe XDでデザインしてSVGでエクスポートしたテンプレートをもとに、A4サイズの帳票をHTMLで出力する機能のPHP(Laravel)による実装例です

svg-paper-example Adobe XDでデザインしてSVGでエクスポートしたテンプレートをもとに、A4サイズの帳票をHTMLで出力する機能のPHP(Laravel)による実装例です。 こちらで実際に動くデモが見られます ?? 実装内容についての詳細は こちらのブログ記事 で解説していま

Takashi Kanemoto 20 Nov 18, 2022
Generate PDFs in Laravel with Mpdf.

Laravel Mpdf: Using Mpdf in Laravel for generate Pdfs Easily generate PDF documents from HTML right inside of Laravel using this mpdf wrapper. Importa

Carlos Meneses 262 Dec 1, 2022
A Laravel package for creating PDF files using LaTeX

LaraTeX A laravel package to generate PDFs using LaTeX · Report Bug · Request Feature For better visualization you can find a small Demo and the HTML

Ismael Wismann 66 Nov 10, 2022
DOMPDF module for Laravel 5

pdf-laravel5 DOMPDF module for Laravel 5. Export your views as PDFs - with css support. Instalation Add: "vsmoraes/laravel-pdf": "^2.0" To your compo

Vinicius Moraes 88 Jul 25, 2022
Generate PDF invoices for your customers in laravel

What is Invoices? Invoices is a Laravel library that generates a PDF invoice for your customers. The PDF can be either downloaded or streamed in the b

Erik C. Forés 385 Nov 21, 2022
Rapidly Generate Simple Pdf, CSV, & Excel Report Package on Laravel

Laravel Report Generators (PDF, CSV & Excel) Rapidly Generate Simple Pdf Report on Laravel (Using barryvdh/laravel-dompdf or barryvdh/laravel-snappy)

Jimmy Setiawan 509 Dec 5, 2022
Laravel package to convert HTML to PDF, supporting multiple drivers.

eve/pdf-converter A Laravel package to help convert HTML to PDF. Supports multiple drivers. Requirements and Installation eve/pdf-converter requires L

eve.io 11 Feb 15, 2022
⚡️ MIRROR — A feature-rich Laravel wrapper for the WeasyPrint Document Factory.

WeasyPrint for Laravel A feature-rich Laravel wrapper for the WeasyPrint Document Factory. This package requires Laravel 8.47+ running on PHP 8+ in or

Mike Rockétt 6 Jul 18, 2022
Browsershot wrapper for Laravel 5

Browsershot wrapper for Laravel 5 This package takes advantage of Google Chrome's Headless mode to take screenshots and generate PDFs from websites, v

VECO 108 Jul 25, 2022