Google Font Not Working With CSS?

Brett Carwile picture Brett Carwile · Aug 2, 2016 · Viewed 14.1k times · Source

I was working on an html page, got halfway through, and decided to start styling somethings. . . All of my styling worked fine! That is until I tried to get a Google Font. I followed all of the instructions and inserted everything into css correctly. However, when I view the page on Chrome, it only displays the "fallback" generic sans-serif font. Here is my css:

#page-first-open {
	border: 1px solid black;
	width: 1000px;
	height: 500px;
	text-align: center;
	margin: auto;
	position: relative;
	top: 50px;
	
}

@import url(https://fonts.googleapis.com/css?family=Raleway);

#page-first-open p {
	font-size: ;
	font-family: 'Raleway', sans-serif;
	
}
<!DOCTYPE html>
	<html>
		<head>
			<link rel="stylesheet" type="text/css" href="test.css">
			<script>
			</script>
			<title>User Test</title>
		</head>
		<body>
			<div id="wrapper">
				<div id="page-first-open">
					<p>Hello, and welcome to this page. . .<br>
					If you don't mind me asking, <br>
					What is your name (or what you'd like to be called)?</p>
				</div>
			</div>
		</body>
	</html>

Could someone please tell me what I am doing wrong (If I a doing it wrong), or point me in the right direction of getting it to work?

Answer

user2486937 picture user2486937 · Aug 2, 2016

Try to put your import on the top of your file, before any declaration.