Mam problem z localhostem, po przerzuceniu folderu do htdocs i wpisaniu w pasku wyszukiwania adresu localhost/www strona wyświetla się bez webfontów.

Dodam, że webfonty działają jeśli odpalę plik index.html bezpośrednio z folderu htdocs. Jak rozwiązać ten problem? Pracuje na systemie operacyjnym mac OS Sierra, a XAMPP mam w wersji 7.1.8.0

Na pierwszym zrzucie ekranu widać jak mi się to wyświetla, a na drugim jak chciałbym żeby się wyświetlało ;)

Tutaj kod z index.html

 <!DOCTYPE HTML>
<html lang="pl">
<head>
	<meta charset="utf-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
	<title>Bartosz Łuczak - Portfolio</title>
	<meta name="description" content="Stworzę dla Ciebie wyjątkową stronę www. Zatrudnij programistę webowego: PHP, javaScript, HTML, CSS, MySQL, WordPress, Joomia, Drupal" />
	<meta name="keywords" content="zamów, stronę, www, tworzenie, programista, portfolio, php, javasrcipt, html, css, mysql, wordpress, joomia, drupal" />
	<link rel="stylesheet" href="style.css" type="text/css" />
	<link rel="stylesheet" href="./css/fontello.css" type="text/css" />
	<link href="https://fonts.googleapis.com/css?family=Josefin+Sans|Lato&amp;subset=latin-ext" rel="stylesheet">
	<script src="timer.js"></script>
</head>

<body onload="odliczanie(); ">
	<div id="container"> 

		<div class="rectangle">
			<a href="zatrudnij-programiste-webowego" class="tilelinkhtml5"><div id="logo">Bartosz Łuczak</div></a>
			<div id="zegar">12:00:00</div>
			<div style="clear: both;"></div> 
		</div>

		<div class="square">
			<div class="tile1">
				<a href="kim-jestem" class="tilelink"><i class="icon-user"></i><br />Kim jestem?</a>
			</div>	
			<a href="oferta-tworzenie-stron-www" class="tilelinkhtml5">
				<div class="tile1">
					<i class="icon-laptop"></i><br />Co oferuję?
				</div>
			</a>
			<div style="clear: both;"></div>
			
			<div class="tile2">
				<a href="cv-programista-php-javascript" class="tilelink"><i class="icon-graduation-cap"></i><br />Curriculum Vitae</a>
			</div>
			
			<div class="tile3">
				<a href="kontakt-programista-php" class="tilelink"><i class="icon-mail"></i><br />Kontakt ze mną</a>
			</div>
			
			<div style="clear: both;"></div>
			
			<div class="tile4">
				<i>Talk is cheap. Show me the code!</i><br />- Linus Torvalds, twórca Linuxa
			</div>
		</div>  
		
		<div class="square">
			<div class="tile5">
				Kim jestem? <br /><br />
				Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec lacinia, nisl eu rutrum congue, enim neque convallis dolor, et interdum sem tortor at dolor. Duis ullamcorper aliquet augue quis bibendum. Integer sodales blandit turpis non malesuada. Nam sodales molestie diam. Lorem ipsum dolor sit amet, consectetur adipiscing elit. 	
			</div>
			<div class="yt">
				<a href="http://youtube.com" target="_blank" class="sociallink"><i class="icon-youtube"></i></a> 
			</div>
			<div class="fb">
				<a href="http://facebook.com" target="_blank" class="sociallink"><i class="icon-facebook"></i></a>
			</div>
			
			<div class="gplus">
				<a href="http://plus.google.com" target="_blank" class="sociallink"><i class="icon-gplus"></i></a>
			</div>
			<div class="tw">
				<a href="http://twitter.com" target="_blank" class="sociallink"><i class="icon-twitter"></i></a>
			</div>
			<div style="clear: both;"></div>
		</div>
		
		<div style="clear: both;"></div>
		<div class="rectangle">2017 &copy; Bartosz Łuczak - programista webowy zaprasza do współpracy! <i class="icon-mail-alt"></i> [email protected]</div>	
	</div>
</body>
</html>

Zastanawiam się też nad tym czy problem nie polega na źle skonfigurowanym XAMPPie.
Prosiłbym o pomoc w rozwiązaniu tego problemu. Z góry dzięki!