Menu
I'm trying to render my website and I takes a lot of time in Google Chrome, but in Mozilla works perfectly. The console shows the error
GET file://fonts.googleapis.com/css?family=RobotoDraft:300,400,500,700,400italic net::ERR_FILE_NOT_FOUND
I tried to import directy in the CSS and in the HTML this:
@import url(http://fonts.googleapis.com/css?family=Roboto:400,400italic,500,500italic,700,700italic,900,900italic,300italic,300,100italic,100);
body {
font-family: 'Roboto', sans-serif;
}
But it still doesn't work, it throws the same error.
Here is the full HTML code of my website:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> </meta>
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width"></meta>
<title>Sign in</title>
<style>
@import url('https://fonts.googleapis.com/css?family=Roboto&display=swap');
</style>
<!-- JQuery Mobile -->
<link rel="stylesheet" href="./jquery/jquery.mobile-1.4.5.css"></link>
<!-- Project CSS -->
<link rel="stylesheet" href="./css/style.css"></link>
<!-- NativeDroid2 CSS -->
<link rel="stylesheet" href="./bower_components/nativeDroid2/css/nativedroid2.css"></link>
</head>
<body>
<div data-role="main" class="ui-content">
<form method="post">
<div class="img-container">
<img src="img/logo_gemott.png" alt="No es pot carregar la imatge" height="110" width="350">
</div>
<div>
<h2>Registre</h2>
<hr>
<label for="mail"><b>Correu electrònic</b></label>
<input type="text" placeholder="Introduir correu electrònic..." name="mail" required>
<label for="psw"><b>Contrasenya</b></label>
<input type="password" placeholder="Introduir contrasenya..." name="psw" required>
<div class="center-text">
<p>Al registrar-te, acceptes els <a href=#>termes de privacitat</a></p>
<p>Ja estàs <a href="login.html">registrat?</a></p>
</div>
</div>
<a href="javascript:registry()" class="ui-btn ui-btn-raised clr-primary">Registrar-me</a>
<div class="img-container" id="uab-logo">
<img src="img/UAB.jpg" alt="No es pot carrerar la imatge" height="150" witdh="150">
</div>
</form>
</div>
<!-- JQuery -->
<script type="text/javascript" src="jquery/jquery-2.2.4.js"></script>
<!-- Project Js -->
<script type="text/javascript" src="js/app.js"></script>
<!-- JQuery Mobile -->
<script type="text/javascript" src="jquery/jquery.mobile-1.4.5.min.js"></script>
<!-- NativeDroid2 Js -->
<script type="text/javascript" src="bower_components/Waves/dist/waves.js"></script>
<script type="text/javascript" src="bower_components/nativeDroid2/nd2settings.js"></script>
<script type="text/javascript" src="bower_components/nativeDroid2/js/nativedroid2.js"></script>
</body>
</html>
301
asked Sep 05 '25 17:09
The standard way to import a Google Font, is placing a link tag in the head section of your HTML:
<link href="https://fonts.googleapis.com/css?family=Roboto&display=swap" rel="stylesheet">
At least in the past, using @import was problematic when including larger files (font files are quite large) because browsers waited tor the file to download before continuing to render the page.
Your description gives the impression things have improved with Firefox, but not with Chrome.
So I suggest you include the link tag in your HTML file's head, remove the style tag and also remove the line starting with @import from your CSS.
As the OP reported an error message, I'm attaching a short example:
<html>
<head>
<link href="https://fonts.googleapis.com/css?family=Roboto&display=swap" rel="stylesheet">
<style>
body {
font-family:'Roboto'
}
</style>
</head>
<body>
<h1>Test</h1>
</body>
</html>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
