How to Use Font-Family with Same Name

How to use font-family with same name?

Use different weights.

Give the first one a weight of 200 and the second one a weight of 300. Then, you can use the two:

font-family: 'Montserrat', sans-serif;
font-weight: 200 /* for the first one */ 
/* or font-weight: 300; for the second one */

EDIT: After the OP specified the weights

You can give the following attributes to the second (bold) one:

font-weight: bold;
font-weight: 700; /* fallback */

and the following to the first (regular) one:

font-weight: 300; 

Now, to use the bold one:

font-family: 'Montserrat', sans-serif;
font-weight: bold; /* or 700 */

and to use the normal one, switch the font-weight:

font-weight: 300;

There you go! :)

Mr_Green, fresh out of Google's Font CSS:

A basic analogy to describe how the font-weight rule works

When you describe a font with a name, imagine (in the most abstract of the explanations) that you create an object; but, when you create multiple font-rules with the same name, imagine you create an array. Now, to access and array, you have to use its index. The index here is the font-weight. So, to access different weights (technically, fonts), you use the weight. Continuing the analogy of the array above, you have to manually
define the index, it's not automatically done.

I think this makes it a little more clear.

Google font locally with different weights but with the same name

Even though the font files are different, you don't need to set a different font-family for each variation of the font. You can just set one font-family, and specify the different variations in the different @font-face properties.

You should define each @font-face with the same font-family name, like so:

@font-face {
    font-family: 'Opens Sans';
    src: url("/fonts/OpenSans-Regular.ttf");
    font-style: normal;
    font-weight: 400;
}
@font-face {
    font-family: 'Opens Sans';
    src: url("/fonts/OpenSans-Italic.ttf");
    font-style: italic;
    font-weight: 400;
}
@font-face {
    font-family: 'Opens Sans';
    src: url("/fonts/OpenSans-Bold.ttf");
    font-style: normal;
    font-weight: 600;
}

Note that each different font file has a separate @font-face with different properties that correspond to the specific font file, but they have the same font-family. You can then use the font in your css like so:

body {
    font-family: 'Open Sans', sans-serif;
    font-weight: 400;
}
.bold {
    font-family: 'Open Sans', sans-serif;
    font-weight: 600;
}
.italic {
    font-family: 'Open Sans', sans-serif;
    font-style: italic;
}

The other properties in your css classes (font-weight, font-style, etc) will determine which @font-face is used.

Google font - how to specific font-family If they have the same name?

This is working, but you are missing the point (.) in front of the two on CSS. See the following snippet:

.one {  font-family: 'Montserrat';  font-size: 11px;  font-weight: 700;}.two {  font-family: 'Montserrat';  font-size: 11px;  font-weight: 400;}

<link href='http://fonts.googleapis.com/css?family=Montserrat:400,700' rel='stylesheet' type='text/css'><span class="one">This is text on "one" with weight 700</span><br/><span class="two">This is text on "two" with weight 400</span>

Can I define multiple Font-Family names for the same font?

Yes, you can do this.

Because font-family is the key, and you can set many font face with different name and same Font, But it's not common to use it in this way!!

Set matplotlib font by family name when there are multiple fonts with same name

That is a really good question. I will provide the way I found the solution to that specific problem. In order to reproduce it we first have to download the given fonts from here (I downloaded the version 10 regular and the 17 version regular to see a clearer difference). Once installed we can check if our new font is found by matplotlib:

from matplotlib import font_manager

font_manager.font_manager.findSystemFonts(fontext='otf') # Matplotlib associates with
# the .otf extension two more extensions viz. '.ttc' and '.ttf', as can be obtain over
# font_manager.get_fontext_synonyms('otf')

Once you have found your specified path to your .otf file, we can use the font_manager to make that specific version our selected font.

# This will create an object which contains your file and give it a custom name
# Here is the idea of this: https://stackoverflow.com/questions/35668219/how-to-set-up-a-custom-font-with-custom-path-to-matplotlib-global-font
fe = font_manager.FontEntry(
    fname='C:\\Users\\<your_user_name>\\AppData\\Local\\Microsoft\\Windows\\Fonts\\latin-modern-roman.mroman10-regular.otf',
    name='10erLatin')
font_manager.fontManager.ttflist.insert(0, fe) 
mpl.rcParams['font.family'] = fe.name

Lets plot it so that we can later see whether it worked or not.

import numpy as np
from pathlib import Path

import matplotlib as mpl
# import PyQt5
# mpl.use('Qt5Agg') # I want to plot it inline ;)
import matplotlib.pyplot as plt

mpl.rcParams['font.family'] = fe.name
mpl.rcParams['font.weight'] = '400'
mpl.rcParams['font.style'] = 'normal'
mpl.rcParams['font.variant'] = 'normal'
mpl.rcParams['mathtext.fontset'] = 'custom'
mpl.rcParams['mathtext.default'] = 'it'
mpl.rcParams['mathtext.rm'] = fe.name + ':normal'
mpl.rcParams['mathtext.it'] = fe.name + ':italic'
mpl.rcParams['mathtext.bf'] = fe.name + ':bold'

mpl.rcParams['xtick.labelsize'] = 8
mpl.rcParams['ytick.labelsize'] = 8
mpl.rcParams['axes.titlesize'] = 10
mpl.rcParams['axes.labelsize'] = 10

x = np.linspace(0,2*np.pi,100)
y = np.sin(x)

fig1 = plt.figure(figsize=(3, 3*(9/16)), dpi=300)
ax1 = fig1.gca()
ax1.plot(x, y, c='r', linewidth=1.0, zorder=20)
ax1.set_xlabel(r'$x\ label$')
ax1.set_ylabel(r'$y\ label$')
fig1.tight_layout(pad=0.15)
plt.show()

Lets change it up to the 17 version of the regular font.

fe = font_manager.FontEntry(
    fname='C:\\Users\\<your_user_name>\\AppData\\Local\\Microsoft\\Windows\\Fonts\\latin-modern-roman.mroman17-regular.otf',
    name='17erLatin')
font_manager.fontManager.ttflist.insert(0, fe) 
mpl.rcParams['font.family'] = fe.name

Again, lets plot it (used the exact same code as above to create that plot, just executed the given code beforehand).

If my hindsight is not too bad, then the text changed globally. There are some other functions which might be useful to look at, however, they are really hidden in the source code. Please let me know, if you run into problems.

How to add multiple font files for the same font?

The solution seems to be to add multiple @font-face rules, for example:

@font-face {
    font-family: "DejaVu Sans";
    src: url("fonts/DejaVuSans.ttf");
}
@font-face {
    font-family: "DejaVu Sans";
    src: url("fonts/DejaVuSans-Bold.ttf");
    font-weight: bold;
}
@font-face {
    font-family: "DejaVu Sans";
    src: url("fonts/DejaVuSans-Oblique.ttf");
    font-style: italic, oblique;
}
@font-face {
    font-family: "DejaVu Sans";
    src: url("fonts/DejaVuSans-BoldOblique.ttf");
    font-weight: bold;
    font-style: italic, oblique;
}

By the way, it would seem Google Chrome doesn't know about the format("ttf") argument, so you might want to skip that.

(This answer was correct for the CSS 2 specification. CSS3 only allows for one font-style rather than a comma-separated list.)

---

Related Topics