The local() function in CSS @font-face is limited to finding only the "regular" and "bold" font styles, not others

Recently, I added some new fonts (specifically Roboto) to my Linux Ubuntu PC and wanted to incorporate them into my CSS using the @font-face rule. However, I encountered an issue when specifying different font weights within the src: ; property as shown in this example:

@font-face {
  font-family: 'Roboto';
  src: local('Roboto'), local('Roboto-Regular'), url('Roboto.ttf') format('truetype');
  font-weight: 400;
}

.

The Issue:

I noticed that only certain font styles/weights such as font-weight: 400 (regular) and font-weight: 600 (bold) were working properly. Any attempt to change it to font-weight: 500 (medium) or others seemed to have no effect.

.

Attempts at Resolving the Issue:

1) Creating a separate @font-face declaration for the medium weight:

@font-face {
  font-family: 'Roboto';
  src: local('Roboto Medium'), local('Roboto-Medium'), url('Roboto-Medium.ttf') format('truetype');
  font-weight: 500;
}

Outcome: The console displayed an error message: 

Failed to decode downloaded font: pathToMySite/css/Roboto-Medium.ttf
, and the styling remained consistent with the regular weight.

2) Checking the installed fonts by listing all available options using the Linux command: fc-list | grep "Roboto", which confirmed the existence of various Roboto font variations.

Results:

lots/of/paths/Roboto-Regular.ttf: Roboto:style=Regular
lots/of/paths/Roboto-Italic.ttf: Roboto:style=Italic
(...)

(multiple paths were listed for different font styles)

3) Verifying the presence of all Roboto variations through the Linux "Fonts" application showcased that all variants were indeed installed and visually distinct from each other.

4) After refreshing the page using CTRL + F5 and ensuring that the browser cache was disabled, the problem persisted.

In conclusion: Despite having all fonts correctly installed on the system, the CSS stylesheet fails to recognize anything beyond the regular and bold font weights, raising questions about their accessibility or correct identification.

If you have any insights or solutions to offer, I would greatly appreciate your input! Thank you for your assistance!

htmlcssfontsfont-facelocal

Answer №1

Avoid using local paths, stick to URLs instead:

@font-face {font-family: 'Regular'; src: url('fonts/Roboto-Regular.ttf'); }
@font-face {font-family: 'Light'; src: url('fonts/Roboto-Light.ttf'); }
@font-face {font-family: 'Medium'; src: url('fonts/Roboto-Medium.ttf'); }
@font-face {font-family: 'Bold'; src: url('fonts/Roboto-Bold.ttf'); }

Apply the font in CSS:

.my_div{
   font-family: Light;
}

Answer №2

After encountering a similar issue, I experimented with different approaches and ultimately discovered a straightforward solution that resolved the problem for me.

  1. To address the issue, I first defined a custom font to be utilized as a fallback option in case the desired font is not available:
@font-face {
  font-family: 'RobotoDL';
  src: url('path/to/Roboto-Medium.woff2') format('woff2'),
       url('path/to/Roboto-Medium.woff') format('woff');
  font-weight: 500;
  font-style: normal;
}
// Ensure to define this for all necessary font-weights and styles
  1. Next, I set the font-family attribute using the primary installed font name but included the custom font as a secondary option to serve as a backup:
* {
  font-family: 'Roboto', 'RobotoDL', Arial, sans-serif;
  // Installed font, custom font, standard fallbacks
}

This setup ensures that:

  • If the user has the primary font installed, the browser will use 'Roboto' without requiring any additional downloads.
  • If the user does not have the primary font installed, the browser will resort to the 'RobotoDL' and proceed to download the specified font files as outlined by the font-face rules.

While researching online, I came across information suggesting that utilizing the font-family property in this manner might bypass the installed font in favor of the fallback options. However, my personal experience contradicted this claim, as I observed the intended font being utilized without any need for downloads. Thus, while there may be potential nuances or factors that could impact this strategy's effectiveness, it certainly proved beneficial in my specific scenario.

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

Alignment Woes in Bootstrap Designs

I'm seeking assistance regarding the alignment of content on my webpage. The content is not aligning properly with the sidebar and footer, and I'm unsure how to proceed. The page should have a left margin to avoid touching the sidebar, and the fo ...

htmlcssbootstrap-4

What could be causing the dropdown menu to not display below its container when the overflow:hidden CSS property is applied to the container element

One issue I'm facing is that the dropdown submenu of my navigation menu does not extend beyond its container element when displayed. My code includes main menu items (HOME, ABOUT, SERVICES, PRODUCTS, and CONTACT) along with submenu items (A, B, C, D, ...

htmlcss

How come the html element doesn't have a default height of 100%?

Is there a reason why the html element is not automatically set at 100% height by default? Can you think of any scenarios where having it take up less than the full height of the window would be beneficial? html { height: 100%; } [Update] I modified th ...

htmlcsslayoutheight

Adjust the column count in mat-grid-list upon the initial loading of the component

My goal is to implement a mat-grid-list of images with a dynamic number of columns based on the screen size. Everything works perfectly except for one small glitch – when the grid first loads, it defaults to 3 columns regardless of the screen size until ...

javascriptcssangulartypescriptangular-material

Stop tooltips from appearing on hyperlinks in Internet Explorer

Is there a solution to disabling the pesky tooltips that appear in the bottom left corner of IE when hovering over links? Alternatively, is there a method to customize the text that appears instead of the default tooltip when hovering over a link (I attem ...

htmlinternet-explorertooltip

Having trouble retrieving POST data with NodeJS/Express and an HTML form?

I have encountered an issue in my application where I am unable to extract the posted data from req after performing an action pointing to a nodejs endpoint. Despite successfully executing the action, when attempting to access the posted data from req, I a ...

javascripthtmlnode.jsexpress

Using jQuery to Convert CSV Data into an HTML Table

I've been exploring the incredible jquery.csvtotable.js plugin for converting csv files to html tables. One question that has been on my mind is how can I allow users to select a .csv file using a browse button that isn't a server-side control? ...

c#jqueryhtmlcsv

Is there a way to customize the font in my ListView items?

I am facing a challenge in creating a custom design for my list view, and I am unsure of how to proceed. I am using a SQL database within my list view. Please excuse my language barrier as I am German and not very fluent in English. Here is the code snippe ...

javaandroidsqllistviewfonts

How can Rails resize images for display on views?

Is there a way to resize an existing image to specific dimensions without creating multiple versions? Currently, I am using Carrierwave and Rmagick to upload images to my Amazon S3 storage bucket. It generates two versions of the image: the original and a ...

ruby-on-railscssimage-processing

Display the title tag when hovering over an image

Hey there! I'm looking to display the title tag of an image directly inside the image itself. Here's an example to illustrate what I mean: http://jsfiddle.net/51csqs0b/ .image { position:relative; width:200px; height:200px; } .ima ...

phpjqueryhtmlcsswordpress

What is the best way to arrange two images next to each other using HTML and CSS in order to effectively utilize a specified width?

I am trying to display two different images side by side within a DIV element that is exactly 800px wide. The images may have varying widths and heights, with some being wider than tall and others taller than wide. I have attempted to place both images i ...

htmlcssimage

Troubleshooting issue with changing class based on input values

It appears that there is an issue with the functionality when switching values on page load. Initially, I was able to make it work for a single switch, but now that there are multiple switches on the page, toggling affects all of them. How can I modify it ...

javascriptjquerycss

The requested resource at http://js:port/socket.io/1/ could not be located (Error 404

Having trouble connecting with Socket.io. This is the server-side code: function chatserver(){ var express = require('express'), app = express(), server = require('http').createServer(app).listen(app.get('port'),function ...

javascripthtmlnode.jssocket.io

What are the dimensions for maximum picture width and height in the Bootstrap 4 grid class col-4? Additionally, can you provide some tips on minimizing image bl

Hey there! I am trying to arrange 3 screenshots in 3 separate columns in one row, resembling steps 1, 2, and 3. I want them all to have the same size. Can you advise on the maximum width and height I should use before they start getting stretched or comp ...

htmlcssbootstrap-4

Collaborate on sharing CSS and TypeScript code between multiple projects to

I am looking for a solution to efficiently share CSS and TS code across multiple Angular projects. Simply copy-pasting the code is not an ideal option. Is there a better way to achieve this? ...

cssangulartypescriptshare

Expanding the full width of the bootstrap navbar

Let's cut to the chase - I'm working with Bootstrap 4 and trying to make my navbar fill the entire width (excluding margins). I know this question has been asked before, so I checked out a post here which suggested using the .nav-fill class, but ...

htmlcssbootstrap-4

When the only source is available, the image undergoes a transformation

Is there a way to dynamically adjust the height of an image using JQuery or JavaScript, but only when the image source is not empty? Currently, I have an image element with a fixed height, and even when there is no source for it, Chrome still reserves sp ...

javascriptjqueryhtmlcss

Is there a way to dynamically change the source of an image based on different screen sizes using Tailwind CSS?

Currently, I am utilizing the next/Image component for setting an image and applying styling through tailwindcss. However, I have encountered a roadblock at this juncture. My Objective My goal is to dynamically change the src attribute of the image based ...

javascriptcssreactjsnext.jstailwind-css

CSS styling not functioning properly

After spending a considerable amount of time on this issue... <div id="pager" style="top: 5px; position: relative; " class="pager" > <form> <img src="http://tablesorter.com/addons/pager/icons/first.png" alt="first" class="first" ...

htmlcsstablesorter

Creating a Dynamic Layout with Varying Items in an Array Using PHP

Suppose I provide you with an array of objects, where x represents the number of objects. How would you achieve the following using a grid system (bootstrap, foundation, etc.)? Loop over the array and generate something similar to: https://i.sstatic.net/ ...

phphtmlarrayszurb-foundation