Chrome nie wyświetla czcionki

pytanie zadane 17 lutego 2021 w HTML i CSS przez michalkerson Nowicjusz (120 p.)

Witam, mam pewien problem mianowicie, gdy włączam stronę lokalnie lub gdy wchodzę na nią przez firefoxa wszystko jest w porządku. Natomiast po wejściu na stronę przez chrome (np kiedy jest na hostingu lub przez localhost) to czcionka się nie ładuje.

Tutaj z opery, czyli tak jak ma wyglądać

a tutaj z chrome

<html lang="pl">
	<head>
		<meta charset="utf-8">
		<title>Przepysznie.pl - najlepsze przepisy w internecie!</title>
		<link href="style.css" rel="stylesheet" type="text/css">
		<link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@300&display=swap" rel="stylesheet">
		<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
		<script src="jquery.scrollTo.min.js" type="text/javascript"></script>
		<script>
			jQuery(function($)
				{
				$(document).ready(function(){
				$('body').fadeIn(500);
				});
				}
				);
		</script>
	</head>

	<body>
		<div id="header">
			<div id="logo">
				<h1 id="tytul">Przepysznie.pl</h1>
				<p id="podtytul">Najlepsze przepisy w internecie!</p>
			</div>
			<ul id="lista">
				<li>Start</li>
			</ul>
		</div>
	</body>
</html>

/* Google Fonts */

@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300&display=swap');
/* font-family: 'Open Sans', sans-serif; */

/*Google Fonts */

body {
		font-family: 'Open Sans', sans-serif;
		margin: 0;
}

#logo {
		margin: 0;
		border-radius: 100%;
		width: 400px;
		height: 200px;
		background-color: rgb(200, 200, 200);
		position: absolute;
		left: -120px;
		top: -100px;
		box-shadow: 0px 2px 10px 0px black;
}

#tytul {
	position: relative;
	left: 130px;
	top: 95px;
}

#podtytul {
	position: relative;
	left: 130px;
	top: 70px;
	font-size: 14px;
}

#header {
		height: 60px;
		width: auto;
		background-color: rgb(240, 240, 240);
		box-shadow: 0px 2px 10px 0px black;
}

#lista {
	
}

komentarz 18 lutego 2021 przez Tnifey Pasjonat (24,190 p.)

może to cache, może to to że używasz Open+Sans:wght@300 z google, a w css tego nie uwzględniłeś

font-family: 'Open Sans', sans-serif; font-weight: 300;

2 odpowiedzi

odpowiedź 17 lutego 2021 przez Wiciorny Ekspert (270,170 p.)
edycja 17 lutego 2021 przez Wiciorny

U mnie nawet na chrome się ładuje, pytanie jest co Ci mówi consola jeśli chodzi o style, być może sa nadpisywane ... ?

Druga sprawa najpier wczytujesz style ... a potem dopiero dodajesz zewnętrzny font.

<link href="style.css" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@300&display=swap" rel="stylesheet">

i dlaczego dodajesz rel="stylesheet" do linkowania fontów, wydaje mi sie nie co przestarzałe umieszczanie takiej relacji
Atrybut rel (skrót od relation, czyli powiązanie) wskazuje w jaki sposób plik zewnętrzny wiąże się ze stroną. W tym przypadku wartość atrybutu rel to stylesheet, czyli plik ze stylami.

Swoją drogą czy lokalnie na chromie też jest problem? Generalnie jeśli usuniesz to co napisałem rel="stylesheet"
to oczywiście nadpisane zostana style przez chrome, wiec być może on nie widzi atrybutu, spróbuj na chromie ustawić inny rodzaj relacji np rel="preload"
Jeśli jednak zrobisz to tak jak napisałem powinno działac, czyli najpierw wskazujesz linkowanie fontów potem swój plik css, bo odwołując się do pliku css- i wybranego fontu google nie widzi jeszcze importu tego fontu bo nastepuje on potem
tutaj zamiana

<link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@300&display=swap">
        <link href="style.css" rel="stylesheet" type="text/css">

komentarz 18 lutego 2021 przez michalkerson Nowicjusz (120 p.)

Niestety ale sposób który zasugerowałeś nie działa. Ponadto okazało się że moim znajomym działa normalnie także jest opcja że problem leży po stronie mojego chroma. Jeżeli chodzi o otwieranie lokalne to czcionka wczytuje się prawidłowo.