VueJs - How to add google fonts library with step by step

In this post, How to add google fonts library in Vuejs application with example. It includes *multiple approaches to integrate google font Oswald into vuejs projects.

Other versions available:

• Google fonts in Angular
• ReactJS Integrate google fonts

How to create a Vuejs application?

First, Please make sure that vue cli is installed. vue cli is command line interface for creating vuejs application To install

npm install -g @vue/cli

This installs vue cl in your machine. Running below command to check vue command is installed or not

B:\blog\jswork>vue --version
@vue/cli 4.5.9

Create an application

vue create vue-google-fonts -n


69 packages are looking for funding
  run `npm fund` for details

⚓  Running completion hooks...

📄  Generating README.md...

🎉  Successfully created project vue-google-font.
👉  Get started with the following commands:

 $ cd vue-google-font
 $ npm run serve

This will create a vuejs application vue-google-fonts Basic Application is created with all required files and project structure, ready to start running.

Go to application root folder, start the server using npm start

cd vue-google-font
npm run serve

Vue Applications is running localhost:8080

add google fonts cdn into vuejs application

Let’s see how to add google font cdn in vue application.

include google font Montserrat library using link

link tag includes in the head section of public/index.html

<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@100;200&display=swap" rel="stylesheet">

In the App.vue file, include below styles font-family: Montserrat in style section

<style>
html,body{
  font-family: 'Montserrat', sans-serif;

}
</style>

@import google font in vue components

In this approach, we are going to add google library directly to global stylesheets @import google font url in style section of app.vue for global stylesheet and vue for component based files

you can inspect the output displayed in the browser

local fonts include with font-face declaration

the above two approaches are directly access google font CDN in the vuejs application, with this approach, font CSS and dependent files are copied to vue applicaiton. Download font-family assets from (google font Montserrat)[https://fonts.google.com/specimen/Montserrat?selection.family=Montserrat:wght@100;200#standard-styles] url Zip file is downloaded and extract to src/assets/fonts folder as shown below First declare css @font-face with font name in App.vue

<style>
@font-face {
      font-family: 'Montserrat';
      src: local('Montserrat'), url('./assets/fonts/Montserrat-Light.ttf')  format('truetype'), 
    }
</style>

css properties are configure as follows

.heading{
  font-family: "Montserrat", sans-serif;
}

With this, we are able to host css files and integrate into vuej app.

Conclusion

In this article, we learned different ways to add google font library in vuejs application

• @import google fonts css
• link attribute in index.html
• local css files using @font-face declaration

@import and link attribute approach’s are referring cdn files directly in vuejs components as this loads css files from external url, performance is not good. Finally, hosting css files is good approach in terms of performances, less dependent and maintainability.