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.
How to add google fonts library in Vuejs application with example
Other versions available:
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
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
npm run serve
Vue Applications is running localhost:8080
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
font-family: 'Montserrat', sans-serif;
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
add google library directly to global stylesheets
you can inspect the output displayed in the browser
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
src: local('Montserrat'), url('./assets/fonts/Montserrat-Light.ttf') format('truetype'),
css properties are configure as follows
font-family: "Montserrat", sans-serif;
With this, we are able to host css files and integrate into vuej app.
In this article, we learned different ways to add google font library in vuejs application
different ways to add google font library in vuejs application
@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.