我正在尝试学习网页设计，目前我正在学习HTML和CSS。我想使用@import将google的sans-serif字体嵌入到我的CSS文件中，并将其放在CSS文件的顶部，以便更改HTML页面的字体。但是在使用各种网络浏览器（Chrome，IE，Opera等）保存并打开Index.html文件后，我看不到任何字体更改。但是，当我将我的HTML和CSS代码粘贴到http://codepen.io在线编辑器中时，就会出现更改，并且可以看到字体更改。
我使用以下代码将CSS文件链接到了Index.html文件：
<head>
<link re="stylesheet" type="text/css" media="screen" href="CSS/screen.css">
</head>
而我的CSS文件仅包含以下代码：
@import url('https://fonts.googleapis.com/css?family=Open+Sans:300,300i,700,700i');
body {font-family: 'Open Sans', sans-serif;
font-size: 16px;
font-weight: 300;
color: #555;
margin: 0;
padding: 0;}
这是我的HTML和CSS文件：
https://drive.google.com/file/d/1nPvXFAYIYWQOM4YtZ7-iEtkUPXX8LsxP/view?usp=sharing
代码有什么问题吗？我的Windows设置是否有问题？ 任何帮助都将受到高度赞赏。