SyntaxFix

[css] How to embed fonts in CSS?

I used Ataturk's font like this. I didn't use "TTF" version. I translated orginal font version ("otf" version) to "eot" and "woof" version. Then It works in local but not working when I uploaded the files to server. So I added "TTF" version too like this. Now, It's working on Chrome and Firefox but Internet Explorer still defence. When you installed on your computer "Ataturk" font, then working IE too. But I wanted to use this font without installing.

@font-face {
    font-family: 'Ataturk';
    font-style: normal;
    font-weight: normal;
    src: url('font/ataturk.eot');
    src: local('Ataturk Regular'), url('font/ataturk.ttf') format('truetype'), 
    url('font/ataturk.woff') format('woff');
}

You can see it on my website here: http://www.canotur.com

Examples related to css

• need to add a class to an element • Using Lato fonts in my css (@font-face) • Please help me convert this script to a simple image slider • Why there is this "clear" class before footer? • How to set width of mat-table column in angular? • Center content vertically on Vuetify • bootstrap 4 file input doesn't show the file name • Bootstrap 4: responsive sidebar menu to top navbar • Stylesheet not loaded because of MIME-type • Force flex item to span full row width

Examples related to fonts

• How to import a new font into a project - Angular 5 • Font Awesome 5 font-family issue • How do I change the font color in an html table? • How to add fonts to create-react-app based projects? • Changing fonts in ggplot2 • Webpack "OTS parsing error" loading fonts • Failed to decode downloaded font • Proper MIME type for .woff2 fonts • Link a .css on another folder • How can I fix the 'Missing Cross-Origin Resource Sharing (CORS) Response Header' webfont issue?