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


Tags: css,fonts,google-font-api

Problem :

I'm tried to use Google fonts for my html page.

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

I expect that the name of the font-family is different instead is the same

/* latin */
@font-face {
font-family: 'Montserrat';
font-style: normal;
font-weight: 400;
src: local('Montserrat-Regular'), url (http://fonts.gstatic.com/s/montserrat/v6/zhcz-_WihjSQC0oHJ9TCYPk_vArhqVIZ0nv9q090hN8.woff2) format('woff2');
unicode-range: ..
}

/* latin */
@font-face {
font-family: 'Montserrat';
font-style: normal;
font-weight: 700;
src: local('Montserrat-Bold'), url (http://fonts.gstatic.com/s/montserrat/v6/IQHow_FEYlDC4Gzy_m8fcoWiMMZ7xLd792ULpGE4W_Y.woff2) format('woff2');
unicode-range: ..
}

I tried to do this but with no success.

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

How can I define the two different fonts in my css? Thank you



Solution :

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>


    CSS Howto..

    How to make URL change upon clicking through AJAX loaded menu?

    How to make a simple timer image slideshow using HTML and CSS

    How to hide and show div with button? How to add effect to the button when show the div?

    How to add padding between options in select input?

    How to make a horizontal div scroll bar float like a fixed CSS div

    How to have a video take up the viewport height and width?

    Rails: how to style submit tag with custom css

    I'm having trouble with Safari and CSS. How do I fix the issue without affecting Chrome?

    How to make div disappear when image is placed over it?

    how to arrange 2 images side by side in mobile view?

    How do I make this nested div to show up on top right corner and make text wrap around it?

    How do I center my logo image to another div in CSS horizontally and vertically?

    How to Apply css class on runTime

    How to beautify this nested list with css?

    Why does my progress bar shows full progress value before it start loading

    CSS how to change page content depending on page size (zoom) in responsive design

    How to render a template with dynamic CSS?

    How can I keep the original :focus element with CSS?

    Child div's evenly spaced and flushed to side of parent: how to?

    How to align banner right in Internet Explorer 8

    How can add atribute to css of page on page load event

    How to properly align rows with bootstrap

    How would you go about placing li in different divs?

    How to make a line before and after my h1 tag?

    How do I center a character in a box using CSS?

    How to figure out if CSS transition is about to happen?

    How to disable mask on selected image in the f/ckeditor in webkit, opera browsers?

    How can I get two form fields side-by-side, with each field’s label above the field, in CSS?

    How to change CSS portrait to landscape in iphone?

    how to make css animation smoothly for full-screen page?