[css] Using Lato fonts in my css (@font-face)

I'm trying to get these fonts and add them to my css:

lato bold italic 24, lato regular 14, lato bold 14, lato light 14, lato light italic 16 

I found these fonts in this site: http://www.fontsquirrel.com/fonts/lato

I downloaded it. there are some files there (ttf), and add it to the folder fonts in my mvc project.

I want the ability to define:

<div style="font-family: lato-bold italic; font-size: 24px;">lato bold italic font</div> <div style="font-family: lato-regular; font-size: 14px;">lato regular font</div> 

so I read I have to do something like:

@font-face {      font-family: lato-bold;     src: url("~/fonts/Lato-Bol.ttf"); } 

and then something like:

<div style="font-family: lato-bold; font-size: 14px;">lato bold font</div> 

but it doesn't work..

there are a lot of answers here:


but I don't have otf files..


I want to save the fonts files in my mvc and not link them via google fonts

any help appreciated!

This question is related to css asp.net-mvc font-face

The answer is

Font Squirrel has a wonderful web font generator.

I think you should find what you need here to generate OTF fonts and the needed CSS to use them. It will even support older IE versions.

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 asp.net-mvc

Using Lato fonts in my css (@font-face) Better solution without exluding fields from Binding Vue.js get selected option on @change You must add a reference to assembly 'netstandard, Version= How to send json data in POST request using C# VS 2017 Metadata file '.dll could not be found The default XML namespace of the project must be the MSBuild XML namespace How to create roles in ASP.NET Core and assign them to users? The model item passed into the dictionary is of type .. but this dictionary requires a model item of type How to use npm with ASP.NET Core

Examples related to font-face

Using Lato fonts in my css (@font-face) Specifying Font and Size in HTML table Why does this "Slow network detected..." log appear in Chrome? How can I fix the 'Missing Cross-Origin Resource Sharing (CORS) Response Header' webfont issue? Using custom fonts using CSS? Right mime type for SVG images with fonts embedded Why should we include ttf, eot, woff, svg,... in a font-face Using fonts with Rails asset pipeline Applying a single font to an entire website with CSS Use multiple custom fonts using @font-face?