As part of a school project requirement, I had to utilize a fonts folder instead of directly linking to Google Fonts. Here is my implementation:
@font-face{
font-family: 'Open Sans';
src: url('../fonts/OpenSans-Regular.eot');
src: url('../fonts/OpenSans-Regular.ttf') format('truetype'),
url('../fonts/OpenSans-Regular.eot?#iefix') format('embedded-opentype'),
url('../fonts/OpenSans-Regular.woff'), format('woff'),
url('../fonts/OpenSans-Regular.svg'), format('svg');
font-style: normal;
font-weight: normal;
}
I have similar code blocks for the bold and italic versions. It seems like I am on the right track with this approach.
@media (min-width: 769px){
body{
font-family: 'Open Sans', Helvetica, Verdana, sans-serif;
}
}
Removing the ../ from the URLs did not resolve the issue, and neither did removing the @media query. Any suggestions or tips on what could be causing the problem?
I am using Chrome, so it should ideally work at least for me.