How to Use Font-Family Lato

How to use font-family lato?

Please put this code in head section

<link href='http://fonts.googleapis.com/css?family=Lato:400,700' rel='stylesheet' type='text/css'>

and use font-family: 'Lato', sans-serif; in your css. For example:

h1 {
    font-family: 'Lato', sans-serif;
    font-weight: 400;
}

Or you can use manually also

Generate .ttf font from fontSquiral

and can try this option

    @font-face {
        font-family: "Lato";
        src: url('698242188-Lato-Bla.eot');
        src: url('698242188-Lato-Bla.eot?#iefix') format('embedded-opentype'),
        url('698242188-Lato-Bla.svg#Lato Black') format('svg'),
        url('698242188-Lato-Bla.woff') format('woff'),
        url('698242188-Lato-Bla.ttf') format('truetype');
        font-weight: normal;
        font-style: normal;
}

Called like this

body {
  font-family: 'Lato', sans-serif;
}

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

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?

Lato Font using @font-family not appearing

I was able to get a Google font for Lato. It seems that using a font from your computer is a problem with Mozilla Firefox :( have to edit about:config

want to use lato light - font weight not changing

In order to be able to use a particular font-weight you first have to load it.

Practical solution:

Replace your <link> tag importing Lato with this one:

<link href="https://fonts.googleapis.com/css?family=Lato:300,400,700" rel="stylesheet">

Please note the family:Lato:300,400,700 part. Change it to suit the font-weight needs of your project. If you use Latin Extended subset, you'll also need to add it in, by changing the link to

<link href="https://fonts.googleapis.com/css?family=Lato:300,400,700&subset=latin-ext" rel="stylesheet">

---

You can dig deeper and serve the font files from your server but, overall, that's not recommended in terms of page speed.

* { font-family: 'Lato' } with js

You'll need to append a style element to do this reasonably. (To do it unreasonably, spin through every element on the page and set it via .style. See below.)

It's easy enough to do:

var style = document.createElement("style");
style.type = "text/css";
style.appendChild(
    document.createTextNode("* { font-family: 'Lato' }")
);
document.head.appendChild(style);

Of course, all the normal CSS rules apply. An element with a more-specific rule setting font-family, or a .style property setting it, will still use that more-specific setting.

This has the advantage that it applies to new elements added after you've done it as well as existing elements.

---

If you wanted to visit every element on the page to set .style.fontFamily explicitly on each, the quick-and-dirty version on modern browsers is:

Array.prototype.forEach.call(document.getElementsByTagName("*"), function(el) {
    el.style.fontFamily = "Lato";
});

getElementsByTagName("*") will access the browser's list of all elements in the document, if it already has one; and build it if not. (This is in contrast to querySelectorAll, which is required to always build a new one.) Then we loop over it by borrowing forEach from Array.prototype. (See the "array-like objects" part of my answer here for details.)

Lato Fonts in Matplotlib Plots

With that font, it is better to install all of the family (or at least the main styles). Keep in mind that Lato is a sans-serif font and since you want to use it as the default font for all the plot (for just one script), it should be in the sans-serif family option.

import matplotlib as mpl
import numpy as np
import matplotlib.pyplot as plt

print(mpl.rcParams['font.sans-serif'])

# Just write the name of the font
mpl.rcParams['font.sans-serif'] = 'Lato'
print(mpl.rcParams['font.sans-serif'])

plt.figure()
plt.plot(range(0,50,10))
plt.title('Font test', size=32)

plt.figure()
x = np.linspace(0, 6.5)
y = np.sin(x)
plt.plot(x, y)
plt.title(r'Just a plot of the function $f(x) = \sin(x)$', size=18)

plt.show()

As you can see the change in the title, ticks, and if you put some legends, you will see the font there.

Lato with font-weight 300 uses hairline instead of light variant

CSS weights are not a formal, real thing in font land, they're just a convention that only CSS uses, and has no effect on weights indicated by fonts as part of a font family. Those values are the usWeightClass in the OS/2 table of OpenType fonts, and can be any number between 0 and 65355, with the numbers being purely based on what the designers/foundry means them to have.

So, looking at the Lato fonts, we see the following weights:

• Regular: OS/2.usWeightClass = 400
• Light: OS/2.usWeightClass = 300
• Thin: OS/2.usWeightClass = 275
• Hairline: OS/2.usWeightClass = 250

If you want the CSS to do "the right thing" when you set font weight in CSS, you have to map those CSS font weight to a real resource (which can have a completely different actual font weight) using @font-face rules:

/* Four different rules, for CSS weights 100, 200, 300, 400, same font name */

@font-face {
  font-family: Lato;
  font-weight: 100;
  src: local("Lato Hairline"),
       url("...latohairline.woff2") format(WOFF2);
}

@font-face {
  font-family: Lato;
  font-weight: 200;
  src: local("Lato Thin"),
       url("...latothin.woff2") format(WOFF2);
}

@font-face {
  font-family: Lato;
  font-weight: 300;
  src: local("Lato Light"),
       url("...latolight.woff2") format(WOFF2);
}

@font-face {
  font-family: Lato;
  font-weight: 400;
  src: local("Lato Regular"),
       url("...latoregular.woff2") format(WOFF2);
}

And now your CSS, when using the font family "Lato", will use the correct resource (according to you) based on the CSS font-weight property.

html, body {
  font-family: Lato;
}

h1 {
  font-size: 150%;
  font-weight: 200;
}

p {
  font-weight: 400;
}

...

(2019 edit: changed the font-face to use woff2, because that's the only format you should use by now).

CSS Font Face declarations

Yes. Note that the font-style differs, so the fonts will be applied to their respective font styles (first to normal, second to italic)

---

Related Topics