Using Google Fonts in Your Web Projects

Web Using Google Fonts in Your Web Projects

Using Google Fonts in Your Web Projects

3 min 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 <head> 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.

Examples of Different Font Styles and Weights

Here's how you can apply various styles and weights using the "Roboto" font:

@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');
.ff-roboto{
    font-family: 'Roboto', sans-serif;
}

Examples:

<p class="ff-roboto">This is normal text.</p>

Ensure you link the styles.css file in your HTML document to use these styles.

Apply these styles in your CSS like this:

Certainly! Here's the updated HTML code with the CSS classes renamed to follow the ff-roboto naming convention:

And the corresponding styles.css file should be updated as follows:

.fw-normal {
    font-weight: 400;
}
.fw-bold {
    font-weight: 700;
}

Incorporate these classes into your HTML elements to apply the corresponding font styles:

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Font Styles Example</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <p class="ff-roboto fw-bold">This is normal text.
</body>
</html>

Make sure to save these styles in a separate file named styles.css and link it in your HTML document as shown above.

Conclusion

Using Google Fonts to improve your website's look is easy and can really make it pop. Even if you're new to HTML, React, or Tailwind CSS, adding custom fonts can make your site look great. Be sure to check out all the different styles and weights each font offers so you can get just the right look for your design. Follow this guide, and you'll be on your way to making a website that grabs people's attention. Just remember to read the font licenses to make sure you're using them right and respecting the creators. Now, go have fun trying out various fonts and give your website a unique touch!