Hey there! Let's break down what's causing your font problems and get Roboto working correctly for you.

What's Wrong With Your Current Code #

You've got two key issues here:

1. Conflicting & redundant imports: You’re using @import to load Roboto’s 400/400i/500/500i variants, then redefining the same Roboto font-family with @font-face rules. This creates confusion for the browser and unnecessary duplicate requests.
2. Incorrect src in @font-face: The URLs you’re using in @font-face point to Google Fonts’ CSS files, not the actual font assets (like WOFF2 files). Browsers can’t parse CSS files as font sources, which is why you’re seeing the default system font instead of Roboto.

Solution 1: Use Only @import (Simplest Approach) #

Since you already imported the needed Roboto variants via @import, you don’t need extra @font-face rules. Instead, just map the bold weight to Roboto’s 500 variant directly in your CSS. This way, whenever you use font-weight: bold, the browser will use Roboto Medium (500) instead of the default Roboto Bold (700).

/* Import the Roboto variants you need */
@import url('https://fonts.googleapis.com/css?family=Roboto:400,400i,500,500i');

/* Set Roboto as your base site font */
body {
  font-family: 'Roboto', sans-serif;
}

/* Map "bold" to Roboto 500 */
strong,
b,
[font-weight="bold"],
.bold-text {
  font-weight: 500;
}

/* Map bold-italic to Roboto 500i */
strong em,
b em,
.bold-italic-text {
  font-weight: 500;
  font-style: italic;
}

Solution 2: Proper @font-Face Setup (No @import) #

If you prefer to use @font-face directly for more granular control, you need to point to actual font asset URLs (not Google’s CSS links). You can grab these valid URLs by opening your Google Fonts @import link in a browser—Google generates the correct @font-face code with optimized font sources.

Here’s a working example:

/* Roboto Regular (400) */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: local('Roboto'), local('Roboto-Regular'),
       url(https://fonts.gstatic.com/s/roboto/v30/KFOmCnqEu92Fr1Mu4mxKKTU1Kg.woff2) format('woff2');
}

/* Roboto Italic (400i) */
@font-face {
  font-family: 'Roboto';
  font-style: italic;
  font-weight: 400;
  src: local('Roboto Italic'), local('Roboto-Italic'),
       url(https://fonts.gstatic.com/s/roboto/v30/KFOkCnqEu92Fr1Mu51xIIzI.woff2) format('woff2');
}

/* Map "bold" to Roboto Medium (500) */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: bold;
  src: local('Roboto Medium'), local('Roboto-Medium'),
       url(https://fonts.gstatic.com/s/roboto/v30/KFOlCnqEu92Fr1MmEU9fBBc4.woff2) format('woff2');
}

/* Map "bold italic" to Roboto Medium Italic (500i) */
@font-face {
  font-family: 'Roboto';
  font-style: italic;
  font-weight: bold;
  src: local('Roboto Medium Italic'), local('Roboto-MediumItalic'),
       url(https://fonts.gstatic.com/s/roboto/v30/KFOjCnqEu92Fr1Mu51TjASc6CsE.woff2) format('woff2');
}

/* Use Roboto across your site */
body {
  font-family: 'Roboto', sans-serif;
}

Pro Tip #

Stick with Solution 1 if you can—it’s simpler, and Google Fonts handles cross-browser compatibility and font file optimization for you. If you go with Solution 2, double-check the font URLs periodically (Google sometimes updates their asset paths).

内容的提问来源于stack exchange，提问作者Ivaalo