Using Roboto Typeface in Cascading Style Sheets

I am currently working on implementing the "Roboto" font in my Prestashop website. The design files I received are in .psd format, and the graphic designer used fonts "Roboto Medium" and "Roboto Regular". To clarify, if I want to use Roboto Normal, can I simply apply the following CSS:

font-family: "Roboto";
font-weight: 400;

And if I wish to use Roboto Medium, should I use:

font-family: "Roboto";
font-weight: 500;

In simple terms, are font weights 400 and 500 equivalent to Roboto Normal and Roboto Medium?

cssfonts

Answer №1

Ensure that your CSS rules are properly closed.

font-family: "Roboto";
font-weight: 400;

Affirmative, your font weights are accurate.

font-weight: 400; //normal
font-weight: 500; //medium
font-weight: 700; //bold

We recommend reading this article on the usage of font-weight, as it may not always function as expected depending on the font. However, based on information from Google Fonts, you should have no issues using these weights.

Answer №2

Initially, I found this a bit confusing as well.

A client had specific font requirements outlined in their style guide, which included using "Roboto", "Roboto Medium", "Roboto Light", and so on.

While browsing Google's font site ( ), I noticed they display the "Roboto" font along with variations like "Medium," "Light," and others.

However, it wasn't immediately clear that this involved two CSS settings. At first, I thought it could be done like this:

* {font-family: 'Roboto Light', 'Roboto Medium', 'Roboto', etc}

But after some experimentation and research, I learned that it actually requires two settings: one to specify the core "family" and another for the variation or "weight," as shown here:

.Roboto{font-family:'Roboto';font-weight:400;} /* 400 is industry standard for normal */

.RobotoLight{font-familiy:'Roboto';font-weight:300;} /* 300 is industry standard for normal */

.RobotoMedium{font-family:'Roboto';font-weight:500;} /* 500 is industry standard for normal */

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the process for connecting CSS to an HTML page?

In my project, I have an index.html file and a style.css file. Currently, I am using inline CSS in my HTML file but now I want to utilize an external stylesheet. Inside my index.html file, just before the closing </head> tag, I have added the followi ...

htmlcss

Arrange four Divs next to each other with flexbox styling

I've been struggling with aligning my cards side by side. They are a series of divs nested in lists under a <ul> Changing the positioning is not resolving the issue, and I'm hesitant to alter the display as it's crucial for responsive ...

javascripthtmlcssresponsive-designuser-experience

The value of the HTML input control vanishes once padding is added

I am in need of some assistance with CSS in formatting the text box for BID VALUE (input element) (See in Image 1) Image 1 The product link can be found here When I try to widen the text box using padding, the text value inside the box disappears (seems ...

htmlcsswordpress

Issue with the Navigation in CSS and jQuery

I'm struggling to understand a problem with the desktop navigation on this website, specifically in Safari on certain pages. The issue seems to only occur on Safari for Windows, Mac Desktop, and Mac Laptop. Interestingly, the navigation works perfect ...

jqueryhtmlcsssafarinavigation

Struggling to access the height attribute from a CSS file

Hey there. I'm pretty confident that the solution to my query is quite simple. So, I have a .css file with this particular code snippet: div.site { text-align:center; border:2px solid #4b6c9e; padding:1px; margin-top:10px; font-size:medi ...

javascriptjqueryhtmlcss

Stylesheets do not have the capability to support template tags

Imagine you have created a stylesheet in Django within the static files and everything is working smoothly. However, when trying to use the following line, an error occurs: .PostProfilePic { width: 50px; height: 50px; border-radius: 50%; background ...

pythonhtmlcssdjangodjango-templates

Customize your Jquery UI Calendar with Changing Background Images for Each Month!

How can I change the background of jQuery UI datepicker based on the selected month? I have created 12 classes, each representing a month, and the selected month already has the background. I tried using "onChangeMonthYear: function(year, month, inst) { ...

javascriptjqueryhtmlcssjquery-ui-datepicker

Animating Elements with CSS and HTML

Struggling with my website project, specifically creating a login page. The issue arises when resizing the browser, causing elements to look misaligned and chaotic. Before: view image here After: view image here /* Bordered form */ form { margin-l ...

htmlcss

Adding a translucent overlay on top of a background image within a div, while keeping the text on top

Here is the current code that I am working with: <div class="square"> <div id="wrapper"> <h2>Text</h2> <h3>Text</h3> </div> </div> .square { padding: 10px; width: 150px; height ...

htmlcssimagebackgroundhover

Change the width of the webpage inside the iframe

I am working with an iframe that has a fixed width and height of 400px. I want to load a web page in the iframe, but I need to adjust the width of the source to fit my iframe perfectly. The height is not an issue as I can add a scrollbar if needed. Here ...

javascriptjqueryhtmlcssiframe

The Drop-down menu with carousel in Bootstrap is experiencing difficulties displaying its sub-menu items

I am currently facing an issue where the sub-menu items are hidden behind the content in a bootstrap carousel. Despite everything else working fine, this particular problem is causing a headache. JSFiddle: https://jsfiddle.net/Saneesh/pwmyvsw6/65/ Is th ...

jqueryhtmlcsstwitter-bootstrapcarousel

``Why Ionic 3 Popover Sizes Should Adapt to Different Screen

Currently in my Ionic 3 project, I am utilizing a popover with a set height using the following code snippet: editOpty(rw){ let popover = this.editOptyPopup.create(EditOptyPopoverComponent, rw, { cssClass: 'edit-opty-popover'}); popover ...

cssangulartypescriptsassionic3

HTML template with three columns where the content spills over the edges, despite having a visible border and a height of 100%

I have a wrapper containing 3 divs: <div id="wrapper"> <div id="leftbar"> Lorem ipsum dolar sit amet </div><!--LEFTBAR--> <div id="middle"> Lorem ipsum dolar sit amet </div><!--middle--> <div id="rightbar"&g ...

htmlcss

Adaptable placement of background across screen widths

I am facing an issue with three buttons that have the same height and width, text, and background icons on the right. On small screens or when there is only a single word in the button, I want to move the icons to the bottom center of the button. Is there ...

htmlcss

React eliminates all white spaces

Presented here is a compilation of various span elements: <span>1</span> <span>2</span> <span>3</span> <span>4</span> <span>5</span> Accompanied by the CSS style for these elements: span{ bac ...

javascriptcssreactjs

CSS/Jade/HTML: struggling to get boxes to align properly on the same line

I'm currently working with a Jade template that looks like this: extends layout block content h2 Characters and Portraits div(id="portraitsBox") - var portraits = ["Clown-Fox", "Dragon-Bear", "Fish-Bear", "Deer-Wolf", "Salamander-Ant", "Sid ...

cssnode.jstemplatespugcascade

Designing Interactive Circular Dates on Website

Currently, I am working on a webpage using HTML, CSS, JavaScript, and PHP. The goal is to design a page that features 7 circles representing the current date and the next 6 days. Users should be able to click an arrow to navigate to the following 7 days. ...

javascriptphpjqueryhtmlcss

Guide to customizing color themes using Twitter Bootstrap 3

Recently, I dove into the world of Twitter Bootstrap 3 without any prior experience with earlier versions. It's been a learning curve, but I managed to set up a WordPress theme using it as the framework. All my elements are in place, but they all see ...

htmlcsswordpresstwitter-bootstraptwitter-bootstrap-3

Is there a way for me to detect if the user has manipulated the CSS or JavaScript in order to alter the look of my website?

Is there a way to determine if someone is utilizing script or CSS extension tools? For instance, if they have adjusted alignments, applied display: none; to multiple elements, or utilized jQuery's .hasClass to manipulate divs. ...

javascriptjquerycssgoogle-chrome-extension

Text transitions in a gentle fade effect, appearing and disappearing with each change

I want to create a smooth fade in and out effect for the text within a div when it changes or hides. After researching on Google and Stack Overflow, I found that most solutions involve adding a 'hide' CSS class and toggling it with a custom func ...

javascriptcss