What is the best way to incorporate regular, light, and bold fonts into your project using links from Google Fonts

I am looking for three specific styles of Ubuntu font without having to download them.

To access these fonts, I inserted this link in the 

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

According to Google's instructions, I should use the following CSS rules to specify these font families: font-family: 'Ubuntu', sans-serif;.

How can I utilize the Ubuntu Light and Ubuntu Bold fonts? It seems different from just using font-weight:bold; or font-weight: 300;.

cssgoogle-fonts

Answer №1

Here is the code snippet you need for the <header> section:

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

In your stylesheet, include this line:

font-family: 'Roboto', sans-serif;

Also, make sure to add the following line:

font-weight: 400

Answer №2

When it comes to font-weight, 300 is considered light, 400 is deemed regular, and 500 falls in the medium category. To incorporate these fonts into your link, follow these steps:

Firstly, add a link to Google Font:

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

Then, update your CSS:

body {
  font-family: 'Ubuntu', sans-serif;
 }
.light {
  font-weight:300; 
 }
.regular{
  font-weight:400; 
}

.medium{
  font-weight:500; 
   }

For a fully functional example, check out this code snippet: https://codepen.io/peker-ercan/pen/bxyEdK

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

Blog Format Featuring Side-by-Side Columns

Is there a way to achieve horizontal columns that don't cut off articles and flow seamlessly into the next column? I want the columns to have varying heights, such as Post A at 60% height, followed by Post B at 40% height, then Post C at 30%, and fina ...

htmlcss

I can't understand why this question continues to linger, I just want to remove it

Is there a valid reason for this question to persist? I'm considering removing it. ...

javascripthtmlcss

Different Ways Split Button Format Can Vary Based on Web Browser

I am encountering a formatting issue with a jQuery splitbutton on my webpage. In order to adhere to my company's design standards, I am essentially converting a link into a button. The functionality works perfectly fine; however, depending on the brow ...

javascriptjqueryhtmlcssinternet-explorer

Revamping Footer Text

Hey there, I'm feeling a bit inexperienced with this question, so after struggling on my own for a while I decided to turn to stackoverflow for help. So, I have a website located at , and at the very bottom of the page there's some copyright inf ...

htmlcsswordpress

The onload function in jQuery is not functioning properly when the page is refreshed

I'm just starting out with jquery and I have a simple project in mind. The idea is to have two pictures stacked on top of each other, but I want the page to start showing the second picture first (at a specific scroll point). Then as the user scrolls ...

javascriptjqueryhtmlcssonload

Making sure to correctly implement email input fields in HTML5: Surprising behaviors observed with the email input type in the Chrome browser

Within the upcoming code snippet, a basic email validation is implemented. An input field's background color will display as white for valid emails and yellow for incorrect values. This functionality operates seamlessly in Firefox; however, in Chrome, ...

javascripthtmlcss

Arrange the footers in the bootstrap card deck to be perfectly aligned at the top

Using bootstrap 4 to showcase cards has been successful, but there is an issue with footers that have varying content lengths. Instead of the footer adjusting its position based on the content, is there a way to keep the tops aligned while pushing the cont ...

htmlcssbootstrap-4flexboxbootstrap-cards

Discovering the HTML element with a particular attribute using jQuery

Is there a way to select an HTML element with a specific attribute, regardless of whether that attribute has a value or not? I have seen similar questions regarding elements with attribute values, but nothing based solely on the existence of the attribute ...

jqueryhtmlcss

What steps can I take to troubleshoot and fix the height of a div/span element?

Here is my HTML code: <div> <span style="display: inline-block;height:20px">20</span> <span style="display: inline-block;"><img src="img/ex.png"/></span> </div> The image I have in the second span is sized at ...

javascriptcss

What is the most effective method for creating a dark background with light text in Bootstrap without using SASS?

I recently created a new website using Bootstrap 5 and set the background color to black (#000000) by adding some CSS styling. However, I noticed that this change had unintended consequences on the appearance of various elements such as drop shadows, modal ...

csslessbootstrap-5dark-theme

Unable to modify SVG color to a white hue

I am currently working on an Angular project where I am utilizing SVG to display some icons. These icons originally have a default grey color, but I want them to change to white when hovered over. Interestingly, while changing the color to red, green, or y ...

htmlcsssvgsass

"Can anyone tell me why my index.html file isn't recognizing the style.css file located in my css directory

In the directory structure below, I have the following files: mywebsite/ ├── css/ │ ├── style.css │ ├── index.html This is my HTML code: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8 ...

htmlcssxampp

Menu with full-width navigation and dropdown options

I am trying to create a navigation menu with a black background that spans the full width of the window. To achieve this, I have placed the ul element inside a div with overflow: hidden; set. However, I am facing issues where hovering over submenus causes ...

htmlcssnavigation

How can I align the text in a dropdown menu to the center on Safari?

How can I center the option text in a drop down menu using CSS? display: block; height: 60px; margin-left: 10%; margin-right: 10%; margin-top: 10px; min-height: 60px; text-align: center; The option text is centered in Firefox browser, but not in Safari. ...

javascripthtmlcsssafari

Why does the styling on my <a> tags in the footer only take effect when I apply padding to the form above?

It seems that when styling the <a> tag for the list in the footer, no changes occur even if correctly applying the style. However, adding padding to the form in the main part of the code causes the links in the footer to show the change. To see this ...

htmlcss

Position a div adjacent to a particular, changing Rails component once jQuery has toggled it

Within my Rails application (which is utilizing Bootstrap's grid system), I am featuring a blog post within the left column. On the right side, I have integrated a jQuery toggle effect to reveal a quick form for user interaction such as leaving commen ...

jquerycssruby-on-rails

Is it possible to add a tooltip to a div without using any JavaScript or JQuery?

I've been working on designing a form that includes tooltips displayed constantly on the right side to assist users in completing their forms. To achieve this, I have separated each part into Divs and added a tooltip for each one. <div title="This ...

javascripthtmlcss

Page not found: unique error on alternate route

My website has different paths and pages in hbs format, such as root, help, and 404. The problem arises when I navigate to localhost:3000/wrong, the site displays correctly, but when I try localhost:3000/help/wrong, the CSS is not applied to the 404 page b ...

cssnode.jsexpresshandlebars.js

Ways to crop a background image from the bottom left and right using CSS

I'm attempting to replicate the background image found at https://i.stack.imgur.com/nYDet.jpg My attempts to use clip-art on this image have been unsuccessful in achieving that shape. .hero-section { height: 740px; background: linear-gradient( ...

htmlcss

The event listener function is not functioning properly on images generated by JavaScript

I'm currently working on placing multiple images on a grid in the center of the page and would like to include a function that triggers when each individual image is clicked. The images are dynamically created using JavaScript and inserted into the do ...

javascripthtmlcss