Import google fonts, font awesome into a Laravel application

In many laravel applications you may need to use different google fonts, fontawesome icons. It is always better to use them by importing them into your project rather than using them from their libraries. Here I will show you how to import them into a laravel project.

Read Also: Create New Laravel 7 Project With Scaffolding

In your project if the bootstrap scaffolding is done the following files will be created already.

• app.scss file at resources/sass/
• app.css file at public/css/
• app.js file at public/js/

Import Google Fonts Into Laravel Application

First we will see how to import required google fonts into laravel application. Visit the https://fonts.google.com site, you can see many fonts there as shown below.

Click on any font you want to import, here i have selected to import "Caveat" font. After selecting the font you can see all the styles that font supports. Now click on + Select this style for all the font styles you want to import. After selection click on Embed which appears on the right of your screen, there you can see 2 options <link>, @import select "@import". Now copy the below link from "@import" to ";". Please see the screenshot for your reference.

Now come to your project and open the file app.scss at resources/sass/ and append the code to it by pasting the above copied link as like shown below and save it.

// Google Font canveat
@import url('https://fonts.googleapis.com/css2?family=Caveat:wght@400;700&display=swap');

Now run the following command, which rebuild the app.css and app.js files.

npm run dev

If the import is successful the following message will apprear on your terminal and you can use those imported fonts in your application.

Import Fontawesome Icons Into Laravel Application

Download and save the "Fontawesome" free icons usig npm (Node Package Manager) by executing below command at your terminal from your project location.

npm install --save @fortawesome/fontawesome-free

After successful download a message will be displayed about "added packages" and "composer.json" will be updated accordingly. If you want to install pro icons visit this link.

Now come to your project and open the file app.scss at resources/sass/ and append the follwoing code and save it.

//Fontawesome
@import  "node_modules/@fortawesome/fontawesome-free/scss/fontawesome.scss";
@import  "node_modules/@fortawesome/fontawesome-free/scss/brands.scss";
@import  "node_modules/@fortawesome/fontawesome-free/scss/regular.scss";
@import  "node_modules/@fortawesome/fontawesome-free/scss/solid.scss";

Its time import Fontawesome icons and build app.css file. For this run the below command at your terminal.

npm run dev

If the import is successful the following message will apprear on your terminal and you can use Fontawesome icons in your application.

Thank you for reading this post and hope it is helpful for you. See the demo link below, where I could use google fonts and fontawesome icons by following the above steps.