I'm using Amatic Bold for my website which fortunately happens to be a part of Google Fonts (https://www.google.com/fonts#UsePlace:use/Collection:Amatic+SC).
As I understand, I'm supposed to put this in the head of each of my html pages:
<link href='http://fonts.googleapis.com/css?family=Amatic+SC:700' rel='stylesheet' type='text/css'>
such as index.html, downloads.html etc.
And then am I also supposed to put the @font-face in each of my four .css files? For example I have a main .css and then one for my nivo-slider etc. So would I put the @font-face in each .css? I'm also not sure the exact code I need to put in. I've googled @font-face with Google Fonts but each person seemed to type the code differently than the other whether it was the formatting or the content. I just want everybody to be able to see Amatic Bold when they visit my site despite not having it installed on their machines.
Not sure how down-voting works here but if this is a stupid question then sorry? I just started web-design the day before this post and every tutorial for webfonts seemed to be different. I felt like deleting the question but somebody might find this in the future and hopefully it clarifies for them.
There is no need to use @font-face when using Google Fonts. They did it for you, just include the CSS file:
<link href='http://fonts.googleapis.com/css?family=Amatic+SC' rel='stylesheet' type='text/css'>
And use the font-family in your CSS:
h1 {
font-family: 'Amatic SC';
}
If you open the CSS file, you'll see this:
/* latin */
@font-face {
font-family: 'Amatic SC';
font-style: normal;
font-weight: 400;
src: local('Amatic SC Regular'), local('AmaticSC-Regular'), url(http://fonts.gstatic.com/s/amaticsc/v6/DPPfSFKxRTXvae2bKDzp5BJtnKITppOI_IvcXXDNrsc.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
}