Issue
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>
Solution
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>
Answered By - Pida
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.