DarkxPunk Posted February 19, 2016 Share Posted February 19, 2016 (edited) So I am playing around with font-face and everything works fine, I start a new project and literally copy and paste the same font css file, updating the font location for the new fonts. It loads the normal font, but none of the variations when called. See here: @font-face { font-family: 'fira-sans'; src: url('../fonts/firasans-regular-webfont.eot'); src: url('../fonts/firasans-regular-webfont.eot?#iefix') format('embedded-opentype'), url('../fonts/firasans-regular-webfont.woff') format('woff'), url('../fonts/firasans-regular-webfont.ttf') format('truetype'); font-weight: normal; font-style: normal; } @font-face { font-family: 'fira-sans'; src: url('../fonts/firasans-italic-webfont.eot'); src: url('../fonts/firasans-italic-webfont.eot?#iefix') format('embedded-opentype'), url('../fonts/firasans-italic-webfont.woff') format('woff'), url('../fonts/firasans-italic-webfont.ttf') format('truetype'); font-weight: normal; font-style: italic; } @font-face { font-family: 'fira-sans'; src: url('../fonts/firasans-medium-webfont.eot'); src: url('../fonts/firasans-medium-webfont.eot?#iefix') format('embedded-opentype'), url('../fonts/firasans-medium-webfont.woff') format('woff'), url('../fonts/firasans-medium-webfont.ttf') format('truetype'); font-weight: medium; font-style: normal; } @font-face { font-family: 'fira-sans'; src: url('../fonts/firasans-mediumitalic-webfont.eot'); src: url('../fonts/firasans-mediumitalic-webfont.eot?#iefix') format('embedded-opentype'), url('../fonts/firasans-mediumitalic-webfont.woff') format('woff'), url('../fonts/firasans-mediumitalic-webfont.ttf') format('truetype'); font-weight: medium; font-style: italic; } @font-face { font-family: 'fira-sans'; src: url('../fonts/firasans-bold-webfont.eot'); src: url('../fonts/firasans-bold-webfont.eot?#iefix') format('embedded-opentype'), url('../fonts/firasans-bold-webfont.woff') format('woff'), url('../fonts/firasans-bold-webfont.ttf') format('truetype'); font-weight: bolder; font-style: normal; } @font-face { font-family: 'fira-sans'; src: url('../fonts/firasans-bolditalic-webfont.eot'); src: url('../fonts/firasans-bolditalic-webfont.eot?#iefix') format('embedded-opentype'), url('../fonts/firasans-bolditalic-webfont.woff') format('woff'), url('../fonts/firasans-bolditalic-webfont.ttf') format('truetype'); font-weight: bolder; font-style: italic; } @font-face { font-family: 'fira-sans'; src: url('../fonts/firasans-semibold-webfont.eot'); src: url('../fonts/firasans-semibold-webfont.eot?#iefix') format('embedded-opentype'), url('../fonts/firasans-semibold-webfont.woff') format('woff'), url('../fonts/firasans-semibold-webfont.ttf') format('truetype'); font-weight: bold; font-style: normal; } @font-face { font-family: 'fira-sans'; src: url('../fonts/firasans-semibolditalic-webfont.eot'); src: url('../fonts/firasans-semibolditalic-webfont.eot?#iefix') format('embedded-opentype'), url('../fonts/firasans-semibolditalic-webfont.woff') format('woff'), url('../fonts/firasans-semibolditalic-webfont.ttf') format('truetype'); font-weight: bold; font-style: italic; } @font-face { font-family: 'fira-sans'; src: url('../fonts/firasans-light-webfont.eot'); src: url('../fonts/firasans-light-webfont.eot?#iefix') format('embedded-opentype'), url('../fonts/firasans-light-webfont.woff') format('woff'), url('../fonts/firasans-light-webfont.ttf') format('truetype'); font-weight: lighter; font-style: normal; } @font-face { font-family: 'fira-sans'; src: url('../fonts/firasans-lightitalic-webfont.eot'); src: url('../fonts/firasans-lightitalic-webfont.eot?#iefix') format('embedded-opentype'), url('../fonts/firasans-lightitalic-webfont.woff') format('woff'), url('../fonts/firasans-lightitalic-webfont.ttf') format('truetype'); font-weight: lighter; font-style: italic; } What am I missing? If you need the main css file let me know... Edited February 19, 2016 by DarkxPunk Link to comment Share on other sites More sharing options...
davej Posted February 21, 2016 Share Posted February 21, 2016 Maybe try the Google hosted version? <link href='https://fonts.googleapis.com/css?family=Fira+Sans:400,700italic,700,500italic,500,400italic,300italic,300' rel='stylesheet' type='text/css'> <style> h1{font-family: 'Fira Sans', sans-serif;} </style> Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now