How to self host google fonts in Astro, React, Svelte, Vue

Published On

Self hosting google fonts comes with advantages like no having to rely on 3rd party and also you can speed up your website and it helps with some privacy concerns.

Self hosting is really easy and simple. In this tutorial I am going to use font source which is open source package which provides free fonts from various sources including google fonts to include in the project.

Step 1: Choose the font

The first step is to choose the font you want to use. I am choosing Jakarta Plus sans which is a variable font and Roboto font which is not a variable font. This is for demonstration purpose so that you get idea of installing and using both the fonts.

Step 2: Installing Font

This step is similar for all the frameworks.

terminal 
npm install @fontsource/roboto
# installing variable fonts
npm install @fontsource-variable/plus-jakarta-sans

Self Hosting Google Fonts in Astro

After installing, import the files in your main layout file so that it is available throught the project.

Firstly we will see installing non variable font. Now to import we will have to import the css of every font weight we are going to use. For example

terminal 
---
import '@fontsource/roboto/400.css';
import '@fontsource/roboto/500.css';
import '@fontsource/roboto/600.css';
import '@fontsource/roboto/700.css';
---

To use variable font we just have to import one file

terminal 
---
import '@fontsource-variable/plus-jakarta-sans';
---

Now create a css file in your desired directory inside the src folder. I am creating a global.css in src directory only.

src/global.css 
body {
  font-family: 'Plus Jakarta Sans Variable', sans-serif;
}
/* or */
body {
  font-family: 'Roboto', sans-serif;
}

Now import the css file in your main layout

src/components/layout.astro 
---
import '@fontsource-variable/plus-jakarta-sans';

import "@fontsource/roboto/400.css";
import "@fontsource/roboto/500.css";
import "@fontsource/roboto/700.css";

# please change the path according to

# where your layout and css file is

## import "./app.css"

Self Hosting Google fonts in Svelte

I am using sveltekit for creating a sveltekit application. Install the desired font as mentioned in step 2: installing font.

Create a css file in your src folder.

src/app.css 
body {
  font-family: 'Plus Jakarta Sans Variable', sans-serif;
}
/* or */
body {
  font-family: 'Roboto', sans-serif;
}

now import the fonts and css file in your +layout.svelte file inside src/routes

src/routes/+layout.svelte 
<script>
import '@fontsource-variable/plus-jakarta-sans';

import "@fontsource/roboto/400.css";
import "@fontsource/roboto/500.css";
import "@fontsource/roboto/700.css";

# please change the path according to

# where your layout and css file is

import "../app.css"
</script>

Self Hosting Google fonts in React

I have vite react setup. Now firstly install the font as demonstrated in step 2.

Now modify the index.css file and add the font to the body you want to use.

src/index.css 
body {
  font-family: 'Plus Jakarta Sans Variable', sans-serif;
}
/* or */
body {
  font-family: 'Roboto', sans-serif;
}

Now import the css file and fonts files in the main.tsx

src/main.tsx 
import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App.tsx'

import "@fontsource-variable/plus-jakarta-sans";
import "@fontsource/roboto/400.css";
import "@fontsource/roboto/500.css";
import "@fontsource/roboto/700.css";

import "./index.css";

ReactDOM.createRoot(document.getElementById('root')!).render(

  <React.StrictMode>
    <App />
  </React.StrictMode>,
)

Self Hosting Google fonts in Vue

I have created a basic vue app using the vue cli. As usual install font package from the fontsource.

I have deleted all the contents of assets/main.css file. Add these lines to it.

src/assets/main.css 
body {
  font-family: 'Plus Jakarta Sans Variable', sans-serif;
}
/* or */
body {
  font-family: 'Roboto', sans-serif;
}

Now import the css and font files in main.ts

src/main.ts 
import './assets/main.css'
font-family: 'Plus Jakarta Sans Variable', sans-serif;
import '@fontsource/roboto/400.css';
import '@fontsource/roboto/500.css';
import '@fontsource/roboto/700.css';

import { createApp } from "vue";
import { createPinia } from "pinia";

import App from "./App.vue";
import router from "./router";

const app = createApp(App)

app.use(createPinia())
app.use(router)

app.mount('#app')

Conclusion

So finally you will be able to self host google fonts and hence will be able to increase the speed and privacy of your website.