Using Google Fonts in Your Web Projects

WebUsing Google Fonts in Your Web Projects

Using Google Fonts in Your Web Projects

5 mins Read

Build with Radial Code

Radial Code Enterprise gives you the power to create, deploy and manage sites collaboratively at scale while you focus on your business. See all services.

Contact sales

Find and Select a Font on Google Fonts

Visit Google Fonts.
Browse or search for a font that fits your project's style.
Click on the desired font to view its details and available styles.
Choose the styles and weights you need by clicking "Select this style".

Integrating Google Fonts into Your Project

Embedding the Font:

After selecting your font, an “Embed” option will appear. Click it to reveal the embed code.
Copy the provided HTML link and paste it into the section of your HTML file:

<link href="https://fonts.googleapis.com/css2?family=FONT_NAME:wght@400;700&display=swap" rel="stylesheet">

Replace FONT_NAME with the actual name of the font you've chosen, and adjust the weights as needed.

Applying the Font in CSS:

In your CSS, set the font-family property to use the new Google Font:

body {
  font-family: 'FONT_NAME', sans-serif;
}

Ensure FONT_NAME matches the font you selected.

Refreshing the Page:

Save your changes and reload your webpage to see the Google Font in action.

By following these steps, you can add a touch of personality to your website with custom fonts from Google Fonts.

Custom Font Integration Example

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Using Google Fonts</title>
    <link rel=”stylesheet” href=”style.css”>
</head>
<body>
    <h1 class=”ff_roboto”> Hello, World! </h1>
</body>
</html>

Import Google Fonts using the @import rule at the top of your CSS file.

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

.ff_roboto {
  font-family: 'Roboto', sans-serif;
}

Using React:

In your React component file (e.g., App.js), import React and any additional CSS files you need.

import React from 'react';
import './App.css'; // Importing the CSS file where we'll apply the font family

Define your React component as a function.

function App() {
  return (
     <div className="App" >
       <h1 className="header">Hello, World! </h1>
     </div >
  );
}

Import Google Fonts using the @import rule at the top of your CSS file.

Import Google Fonts using the @import rule at the top of your CSS file.

Using Tailwind CSS:

Add the Google Fonts <link> tag to the public/index.html file inside the <head> section.
Configure Tailwind CSS to use the Google Font by extending the theme in your

tailwind.config.js file.
module.exports = {
  theme: {
    extend: {
      fontFamily: {
        'roboto': ['Roboto', 'sans-serif'],
      },
    },
  },
  plugins: [],
};

Use the font family in your Tailwind CSS classes.

function App() {
  return (
     <div className="App">
       <h1 className="font-roboto text-xxl font-bold">Hello, World! </h1>
     </div >
  );
}

Interested in Coading? Join Us Now.