Can somebody explain how I should use @font-face for my site?


Tags: html,css,webfonts

Problem :

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.



Solution :

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';
}

JSFiddle Demo.


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;
}

    CSS Howto..

    How can I use ellipses in a fluid width table without making each column the same size?

    CSS - How to set an elements height as a % of a container with auto height?

    How to get all images(overlapping allowed) in one line using css?

    How to center without losing it's function

    how to hover after calling jquery animate()

    How can I make my form field have a background image?

    how to link stylesheet in css

    How to provide a stylesheet for rendering PDFs?

    How to make hover css menu fade in and out?

    How to select an item that is into another item using CSS?

    How to manually override CSS @media queries?

    jQuery-Based Dropdown Shows Gap Outside of Firefox

    How to disable a YUI MenuBarItem from markup

    How to position CSS Ribbon to go over one table cell

    How To Have Margin For Background Image?

    how to remove table border line?

    How to pass JavaFX variable into CSS style?

    2 divs aligned side by side, how to make right div fill width 100%?

    How to change button CSS attributes

    PHP databases - don't want to show javascript code

    How to select ids which contain special characters?

    Rails 4 - how to write a helper method

    How to hide the information, just only show when button is clicked html, css. javascript?

    How do you modify the modal height without removing the slide effect in Bootstrap Twitter?

    How to make a div one on the top and one on the bottom touching

    how to add mutiple values to jquery code

    CSS Rotation and Styling - how to?

    how to fire a jquery child function at the start of parent animation

    How to reach 'this' element in the .css part in Jquery

    AngularJS - how to show an alert when the length of an array is zero and hide the default behavior?