Import Google fonts, font awesome in to a Laravel application

In many laravel applications you may need to use different google fonts, font awesome 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.

We proceed further assuming that you are aware to create a new laravel project and created also. If not please follow the below link.

Create a new Laravel 7 project with bootstrap scaffolding and authentication

Import Google Fonts

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.

Now the required google fonts are imported in to your Laravel application.

Import Font awesome Icons

Step-1 Download Font awesome using npm

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.

Step-2 Add Import path to app.scss file

Now come to your project and open the file app.scss at resources/sass/ and append the following 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";

Step-3 Import Fonta wesome Icons in to app.css file

Its time import Fonta wesome 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 appear on your terminal and you can use Font awesome 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 font awesome icons by following the above steps.

Demo