How is it that the browser can determine my preferred font when all of them are labeled as Roboto?

Forgive my lack of expertise, but I have a question to ask...

I've come across many examples that use the following method to load fonts from a local server: 

@font-face {
    font-family: "Roboto";
    src: local(Roboto Thin),
        url("#{$roboto-font-path}Roboto-Thin.woff2") format("woff2"),
        url("#{$roboto-font-path}Roboto-Thin.woff") format("woff");
    font-weight: 100;
    font-style: normal;
}

@font-face {
    font-family: "Roboto";
    src: local(Roboto Medium),
        url("#{$roboto-font-path}Roboto-Light.woff2") format("woff2"),
        url("#{$roboto-font-path}Roboto-Light.woff") format("woff");
    font-weight: 500;
    font-style: normal;

It's interesting that both font-family are named Roboto.

How can I indicate in my styling which version of Roboto font I want to use, Thin or Medium?

In previous projects, I've used font-family: "Roboto Light" when loading fonts externally.

cssfont-face

Answer №1

To incorporate custom fonts into your styling, you can specify the font-weight attribute within the @font-face definition.

For example, assign font-weight: 100; when using the font "Roboto Thin" and font-weight: 500; for "Roboto Medium."

Additionally, by adjusting the font-style within the @font-face, you have the flexibility to set your own custom fonts for bold and italic text styles.

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

Position the float input to the right on the same line as an element

This Angular code contains a challenge where I aim to have text at the start of a column and an input box on the right side of the page, both aligned on the same line. The issue lies in the code which floats the input to the right but disrupts the alignme ...

htmlcssangular

Unlocking the Power of Transition: Effortlessly Submitting a Form Post

After the modal finishes fading out, I want my form to be submitted and sent to the email file "refreshform.php". However, currently after the modal fades out, the form does not submit or post anything to the PHP file for sending the email. It simply fades ...

javascriptphpjqueryhtmlcss

A subtle background image with an overlay of a transparent RGBA gradient

Currently, I am working on designing the header of a website. My goal is to incorporate an image on the right side of the header, overlayed with a gradient color that has a certain level of transparency set using rgba values. Although the image and gradien ...

htmlcss

Button with opaque background over a see-through backdrop

I am having trouble making the button within a semi-transparent caption area over an image non-transparent. Any suggestions on how to achieve this? <div class="col-md-12 landing-container"> <img src="images/pig.jpg" class="main-imag ...

htmlcss

Creating diagonal ribbon designs can add a unique and dynamic touch to any

Can anyone help me figure out how to create a ribbon similar to the image below using CSS? I have managed to make the slanted filled box with text inside, but I am having trouble with the flaps. Check out this CodePen link for reference. ...

htmlcsscss-shapescss-transforms

Learning the Basics of CSS: Understanding the Difference Between Float and Liquid Layout

What sets apart a float layout from a liquid layout? ...

cssterminology

Guidelines for dynamically passing HTML attribute values into a CSS selector using a variable in Protractor

After successfully locating the button on the row using its value stored in the "title" HTML attribute, I am now faced with the task of passing a dynamic value to this attribute. To achieve this, I have declared it as a variable. However, I am unsure about ...

cssprotractor

What is the best way to include a CSS stylesheet in a Wordpress theme?

Is there a way for me to properly load my custom CSS in Wordpress so that the dynamically inputted content on my pages matches the styling of my header and footer? In my functions.php file, I currently have the following code, but it only prints the code ...

csswordpressthemes

Holding off on routing the pathName through the router until the next-page-transitions have been completed

In my current setup, I have two distinct elements at play. Using the code snippet below: className={router.pathname.startsWith("/pagename") ? "menu-active" : ""} I am able to apply the menu-active class to the pagename naviga ...

javascriptcssreactjsnext.jscss-transitions

Tips for successfully passing an image using props in Vuejs without experiencing the issue of disappearing content when there is no image present

Is there a way to make a component that can function with or without an image? Currently, when the component doesn't have an image, other contents and styles disappear. How can I resolve this issue? App.Vue: <template> <div id="app&qu ...

htmlcssvue.js

My HTML table is not printing at full width

Seeking assistance with creating a printable calendar using an HTML table. The calendar prints perfectly on a Mac, but when attempted on Windows in all browsers, it adds a 3" margin at the top regardless of CSS print settings. The client requires the cal ...

htmlcssprintinghtml-table

Expanding Viewports with Dynamic Scrolling Bootstrap Columns

Striving to achieve a specific design in Bootstrap, but hitting roadblocks. The criteria are as follows: No scrolling in the browser window. Display occupying 100% of browser height. Columns for Menu, Left contents, and Right contents must scroll indepen ...

csstwitter-bootstrap

Unable to insert a new module position within the vertex joomla framework

I have successfully added a new module position to the right side of the menu in Joomla 3 using the S5 Vertex framework. The changes were made in index.php as follows: <div id = "s5_newmodule"> <?php s5_module_call('s5_newmodul ...

phpcssjoomlaframeworksposition

Update the Navbar links to smoothly slide along the navigation bar as the width decreases, instead of awkwardly

When in full screen, the Navbar links are displayed horizontally. https://i.stack.imgur.com/0mOLp.png However, when the width changes, they appear like this https://i.stack.imgur.com/2ylgZ.png Is there a way to ensure they shift to the left while maint ...

jqueryhtmlcss

What is the best way to ensure the image and card maintain the same size ratio in React Bootstrap?

One of the challenges I encountered involved a vertically aligned card group containing a card with an image: https://i.stack.imgur.com/w9Jkf.jpg This is the React code snippet that was causing the issue: import React from 'react'; import { ...

cssreactjsbootstrap-4

Can we expect every bullet point to be consistently indented at precisely 1.8em?

Recently, I created a dropdown menu using only CSS. The challenge was to have a horizontal bar of items that can each expand into a vertical menu. However, I wanted the expanded menus to display bulleted lists instead of tertiary menus. By nesting three ul ...

cssbrowserfontscross-browserhtml-rendering

jQuery's AJAX feature fails to identify the newly modified div classes

For my new website, I am developing a simple checklist feature. To handle the check and uncheck requests from users, I'm using jQuery's $.ajax() function. Whenever a user clicks on the check or uncheck buttons, jQuery retrieves the validation tok ...

javascriptjqueryhtmlcssajax

Bootstrap 4 Card Body Spinner Overlay with Flex Alignment

Seeking to center a spinner both vertically and horizontally within a bootstrap 4 card body. Despite trying my-auto, justify-content-center & align-items-center, it seems like I'm missing something. I've double-checked the display types and ...

javascripthtmlcssflexboxbootstrap-4

Is there a substitute for bootstrap select in Rails?

In order to style select tags with Bootstrap, we had to utilize the gem: bootstrap-select However, due to the high volume of options in our data-heavy application, the select dropdowns are causing significant slowdown (loading times, drop down performance ...

cssruby-on-railstwitter-bootstraphtml-select

"Usage of Wildcard in CSS Selectors for customizable path selection

When it comes to identifying elements using CSS selectors, I rely on a combination of path and attribute-based selectors for accurate results. For instance: div[attribute='test'] > div > div > div > span[attribute='test'] ...

htmlcssselenium-webdrivercss-selectors