[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:

http://stackoverflow.com/questions/13463072/css-font-face-not-working-in-firefox 

but I don't have otf files..

p.s.,

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


Well, you're missing the letter 'd' in url("~/fonts/Lato-Bol.ttf"); - but assuming that's not it, I would open up your page with developer tools in Chrome and make sure there's no errors loading any of the files (you would probably see an issue in the JavaScript console, or you can check the Network tab and see if anything is red).

(I don't see anything obviously wrong with the code you have posted above)

Other things to check: 1) Are you including your CSS file in your html above the lines where you are trying to use the font-family style? 2) What do you see in the CSS panel in the developer tools for that div? Is font-family: lato crossed out?


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.


Questions with css tag:

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 Font Awesome 5 font-family issue Failed to load resource: the server responded with a status of 404 (Not Found) css CSS class for pointer cursor How and where to use ::ng-deep? Styling mat-select in Angular Material What is the difference between CSS and SCSS? iPhone X / 8 / 8 Plus CSS media queries Change arrow colors in Bootstraps carousel Bootstrap 4 Dropdown Menu not working? Add class to an element in Angular 4 CSS Grid Layout not working in IE11 even with prefixes Search input with an icon Bootstrap 4 Bootstrap 4 - Inline List? Centering in CSS Grid Bootstrap 4, how to make a col have a height of 100%? Equal height rows in CSS Grid Layout Bootstrap 4: Multilevel Dropdown Inside Navigation Align the form to the center in Bootstrap 4 Customize Bootstrap checkboxes How to style a clicked button in CSS How can I get the height of an element using css only display: flex not working on Internet Explorer force css grid container to fill full screen of device How does the "position: sticky;" property work? bootstrap 4 row height Prevent content from expanding grid items Bootstrap 4 File Input CSS hide scroll bar, but have element scrollable CSS grid wrapping Bootstrap 4 Change Hamburger Toggler Color How can I make Bootstrap 4 columns all the same height? How to hide collapsible Bootstrap 4 navbar on click Bootstrap 4 Center Vertical and Horizontal Alignment Cannot read property 'style' of undefined -- Uncaught Type Error How to window.scrollTo() with a smooth effect Vertical Align Center in Bootstrap 4 How to implement a Navbar Dropdown Hover in Bootstrap v4? CSS change button style after click What is correct media query for IPad Pro? How do I specify row heights in CSS Grid layout?

Questions with asp.net-mvc tag:

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=2.0.0.0 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 localhost refused to connect Error in visual studio ASP.NET 5 MVC: unable to connect to web server 'IIS Express' How to use SqlClient in ASP.NET Core? Pass Model To Controller using Jquery/Ajax How can I make my string property nullable? Could not find a part of the path ... bin\roslyn\csc.exe CS1617: Invalid option ‘6’ for /langversion; must be ISO-1, ISO-2, 3, 4, 5 or Default How to remove error about glyphicons-halflings-regular.woff2 not found Adding ASP.NET MVC5 Identity Authentication to an existing project ASP.NET Web API : Correct way to return a 401/unauthorised response Effectively use async/await with ASP.NET Web API The page cannot be displayed because an internal server error has occurred on server Calling Web API from MVC controller Rendering partial view on button click in ASP.NET MVC Bootstrap fixed header and footer with scrolling body-content area in fluid-container Display List in a View MVC Phone Number Validation MVC How to get 'System.Web.Http, Version=5.2.3.0? How to call controller from the button click in asp.net MVC 4 How to extend available properties of User.Identity How to pass multiple parameters from ajax to mvc controller? @Html.DisplayFor - DateFormat ("mm/dd/yyyy") How to get DropDownList SelectedValue in Controller in MVC MVC web api: No 'Access-Control-Allow-Origin' header is present on the requested resource How to add/update child entities when updating a parent entity in EF Return HTML from ASP.NET Web API Jquery Ajax, return success/error from mvc.net controller There is no ViewData item of type 'IEnumerable<SelectListItem>' that has the key country System.web.mvc missing How to get JSON object from Razor Model object in javascript error CS0103: The name ' ' does not exist in the current context How to return a file (FileContentResult) in ASP.NET WebAPI Return JsonResult from web api without its properties Using a PagedList with a ViewModel ASP.Net MVC How to call MVC Action using Jquery AJAX and then submit form in MVC? onchange event for html.dropdownlist How to update a claim in ASP.NET Identity? Make sure that the controller has a parameterless public constructor error @Html.DropDownListFor how to set default value Razor MVC Populating Javascript array with Model Array

Questions with font-face tag:

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? Make Adobe fonts work with CSS3 @font-face in IE9 Unicode character for "X" cancel / close? How to add an Access-Control-Allow-Origin header Use multiple @font-face rules in CSS Why is @font-face throwing a 404 error on woff files? @font-face src: local - How to use the local font if the user already has it? Using .otf fonts on web browsers CSS @font-face not working with Firefox, but working with Chrome and IE How to add multiple font files for the same font? Preloading @font-face fonts? How to add some non-standard font to a website?