Mozilla nie wyświetla czcionek z Google

pytanie zadane 27 grudnia 2017 w HTML i CSS przez kirazare Nowicjusz (120 p.)

Witam wszystkich,

Tak, jak w temacie Mozilla nie wyświetla czcionek pobranych od Google. Żeby było ciekawiej sytuacja ma miejsce nie na komputerze, na którym napisałem kod, a na drugim (na obu zainstalowana jest Mozilla). W Chromie - zarówno na jednym, jak i drugim komputerze - wszystko działa w porządku. Gdzie może tkwić problem?

Zaznaczę, że sprawdzałem dokładnie, co na ten temat piszą na Google Fonts. Próbowałem już również podpinać czcionki w CSS przez fontface. Wrzucam kod, jak podpinam czcionki w html:

<head>
<link href="https://fonts.googleapis.com/css?family=Amatic+SC|Enriqueta|Source+Sans+Pro:200,400,600&amp;subset=latin-ext" rel="stylesheet">
</head>

i css:

@import url('https://fonts.googleapis.com/css?family=Amatic+SC|Enriqueta|Source+Sans+Pro:200,400,600&subset=latin-ext');

/*Amatic_SC*/

	@font-face {
	font-family: 'Amatic SC', cursive;
	src: url("style/Amatic_SC/AmaticSC-Regular.ttf") format("truetype");
	font-style: normal;
	font-weight: normal;
}

/*Enriqueta*/

	@font-face {
	font-family: 'Enriqueta', serif;
	src: url("style/Enriqueta/Enriqueta-Regular.ttf") format("truetype");
	font-style: normal;
	font-weight: normal;
}

/*Source Sans Pro*/
	@font-face {
	font-family: 'Source Sans Pro', sans-serif;
	src: url("style/Source_Sans_Pro/SourceSansPro-ExtraLight.ttf") format("truetype");
	font-style: normal;
	font-weight: 200;
}
	@font-face {
	font-family: 'Source Sans Pro', sans-serif;
	src: url("style/Source_Sans_Pro/SourceSansPro-Regular.ttf") format("truetype");
	font-style: normal;
	font-weight: 400;
}
	@font-face {
	font-family: 'Source Sans Pro', sans-serif;
	src: url("style/Source_Sans_Pro/SourceSansPro-SemiBold.ttf") format("truetype");
	font-style: normal;
	font-weight: 600;
}

Próbowałem dodać nawet linijkę do css'a:

ul li {
    font-family: 'Source Sans Pro', sans-serif;
    font-family: 'Enriqueta', serif;
	font-family: 'Amatic SC', cursive;
}

Ale i to nie działa.

Jakieś pomysły?

1 odpowiedź

odpowiedź 27 grudnia 2017 przez adrian17 Ekspert (344,860 p.)

Mozilla

W sensie Firefox? :D

U mnie na Chromie i FF na dwóch różnych maszynach wszystko wygląda poprawnie:

https://jsfiddle.net/53sLj3ex/

Dałbyś screenshota przeglądarki, gdzie to nie działa? Najlepiej od razu ze screenami devtoolsów (konsoli i/lub inspektora z zaznaczonym ostylowanym tekstem)

komentarz 27 grudnia 2017 przez kirazare Nowicjusz (120 p.)

A czy może to być kwestia samych ustawień przeglądarki? Np. zabezpieczeń?
I czy jest możliwość przetestowania strony - jak będzie wyglądać na innych komputerach - gdy jeszcze nie znajduje się na serwerze?

Oto problem:

Jak widać, czcionki nachodzą na siebie i wychodzą poza divy. Jest to jednak kwestia związana z tym, że Mozilla nie ładuje czcionek, które podałem wcześniej i zamienia je na domyślne.