What is the process for adjusting the usWeightClass value in a TTF font's OS/2 section

I've got the Dosis font that I want to incorporate as a webfont in one of my projects. Converting the TTF files to WOFF using the Font Squirrel Webfont Generator is nothing new. However, when I do this, I encounter an error message in the Firefox console:

downloadable font: OS/2: bad weight: 250 (font-family: "dosis" style:normal weight:200 stretch:normal src index:0) source: http://example.com/fonts/dosis-extralight.woff2

The error is clear, and I understand the issue, but I'm unsure how to change the weight value from 250 to 200 without altering the font further. Attempts with FontForge resulted in a completely different TTF file than the original. Even trying to modify the file with a HEX editor left me puzzled by its content.

After experimenting with the Adobe Font Development Kit for OpenType, I compared the results using WinMerge. Deciphering whether this poses an issue or not remains a challenge.

cssfontstruetypewoff

Answer №1

  1. Ensure that the ttx command-line tool is available on your system. If not, proceed to steps 2-3; if it is, skip to step 4.

  2. Take a look at this Open Source tool, which is compatible with multiple platforms, by visiting its Github repository.

  3. Find the tool ttx in the appropriate folder for your operating system: Tools/osx, Tools/linux, or Tools/win.

  4. Enter the command ttx -h.

  5. Follow the provided instructions.

In summary: Execute 

ttx -v -o dosis.xml Dosis-Medium.otf
. Make changes to the XML file generated. Run 
ttx dosis.xml -o Dosis-Medium-modified.otf
. Test the modified Dosis-Medium.otf font file.

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

The importance of timing in @keyframes animations

I was experimenting with a fun project that involved creating a timer using just HTML and CSS. But I'm curious, why do I need to add a delay to my 100s animation in order to synchronize it properly with the 10s animation? .second::before { anima ...

cssanimationcss-animations

Invoke a function using the output of a different function

There is a function whose name is stored in the value of another function, and I need to invoke this function using the other one. The function I need to call is popup() random() = 'popup()' if ($.cookie('optin-page')) { } I attemp ...

javascriptjqueryhtmlcss

CSS has detected an invalid value for the property across all components. Please

Need help reverting the style of a child element back to default and receiving an error message saying "Invalid Property Value". HTML: <div class="dropdown locale-selector"> <button class="btn btn-secondary " type="button" id="dropdownMenuBut ...

htmlcssbootstrap-4

What is the best way to ensure that this image is responsive and not overly tiny when viewed on Internet Explorer

Check out my website: Here's a snapshot of the problem: I've been struggling to make my image responsive and prevent it from shrinking on IE 8. The webpage functions well on most modern browsers except for IE 8. I want it to display properly ac ...

htmlcssinternet-explorer-8responsive-design

How can I combine addClass with fadeIn/fadeOut in JavaScript?

Can the addClass and fadeIn functions be combined in JS? Although I'm not very experienced with JS, I'm working on a script where the div container changes background color by fading in and out on text hover. I've created a CodePen to demo ...

javascriptjquerycssanimation

Load images in advance for hover effects on active selectors within the specified CSS file paths

Currently, I have opted not to utilize css sprites. While I acknowledge that it is the most efficient solution, time constraints prevent me from implementing it at this moment. I am seeking a method to preload all images for hover and active selectors. ...

javascriptjqueryhtmlcss

Adjust the transparency of a radio button when it is selected

Looking at my HTML, I have the following structure: <label class="fakeRadio active"> <input type="radio"> </label> This is the CSS style I am using: .fakeRadio input[type=radio]:checked + .fakeRadio.active { opacity:0.5; } I&a ...

cssradio-buttonchecked

Is anyone experiencing difficulties with IOS 8.3 when trying to assign colors to Font Awesome icons using content?

I'm encountering an issue on IOS 8.3 where I click a checkbox and the arrow color should be green, but it shows up as black instead. Is there a bug fix for this in IOS or is it simply not supported? Here is my SASS/css code: input[type="checkbox"] ...

htmlioscss

Can anyone share tips on how to ensure that text placed over an image can adapt and respond effectively

I'm facing some difficulty in ensuring that my text remains responsive alongside the image it's paired with, especially on mobile view. This is how the module appears in desktop/tablet view: https://i.sstatic.net/85mik.jpg And here is its appe ...

htmlcsstwitter-bootstrapresponsive

An SVG with a single enigmatic path/shape featuring a perplexing left margin or empty space. Not contained within an

I created a unique shape in Illustrator and adjusted the artboard to fit the shape perfectly, eliminating any excess white space. I double-checked this process to ensure accuracy. Upon opening the design in Chrome and inspecting it, I noticed that when ho ...

csssvg

Tips for organizing child cards within a parent card using Bootstrap

I'm trying to set up my child card within the parent card to look like the image provided. I'm using Bootstrap 4 and the card_deck class. https://i.sstatic.net/ihWrb.png However, I'm facing difficulties in getting the layout to match the p ...

htmlcsstwitter-bootstrapbootstrap-4

Hide the menu even if the user clicks outside of it or anywhere on the webpage

I have a menubar code that is functioning correctly. However, I would like to make an enhancement. Currently, when I click outside of the menubar, it does not hide or close. I want the menubar to be hidden when I click anywhere on the webpage while the men ...

javascriptjqueryhtmlcss

Issue with banner not appearing after importing HTML document

On my website, I have a picture banner at the top that I got from a web service. To make editing easier, I import the header.html code into the home.html file. The banner displays perfectly when I run header.html, but not when I run home.html. When I inspe ...

javascripthtmlcss

CSS: Set the left position to 250px with the added feature of hiding any overflow

I am currently working on a sidebar that can be shown or hidden using JavaScript with CSS animations. To achieve this effect, I need to position the content div (#main) using left: 250px;. #main { left: 250px; position: relative; overflow: hidden; } ...

csstwitter-bootstrap

Starting letter and word in jekyll articles and pages

How can I customize the appearance of the first letter and word in my posts and pages on a Jekyll blog? I want to achieve a design similar to this: https://i.sstatic.net/LX8kq.png To accomplish this, I have used the following CSS style along with span ta ...

htmlcssjekyllliquid

how to change visibility with Javascript

As I work on creating a menu using HTML and JavaScript, I've designed it to be a grid layout with 3 rows and 2 columns. The menu contents are also structured in a grid format. When the screen width is reduced, the layout changes to a single row and co ...

javascripthtmlcss

React's Material-UI AppBar is failing to register click events

I'm experimenting with React, incorporating the AppBar and Drawer components from v0 Material-UI as functional components. I've defined the handleDrawerClick function within the class and passed it as a prop to be used as a click event in the fun ...

javascripthtmlcssreactjsmaterial-ui

Creating dynamic text bubble to accommodate wrapped text in React using Material-UI (MUI)

I am currently developing a chat application using ReactJS/MUI, and I have encountered an issue with the sizing of the text bubbles. The bubble itself is implemented as a Typography component: <Typography variant="body1" sx={bubbleStyle}> ...

htmlcssreactjstypescriptmaterial-ui

Upon transitioning to Bootstrap 4, the grid columns automatically wrap

I currently have a table-like display created using the bootstrap grid classes. The body rows on this table are filled dynamically with JavaScript. Depending on the application state, the table is either hidden or shown. I have two divs, one with an ID con ...

htmlcsstwitter-bootstrapbootstrap-4

The words streaked across the page like shooting stars, leaving

On my website, I'm facing an issue with text overflowing off the page when the podcast listing page is viewed on a small screen: https://i.sstatic.net/ZAR6Z.png I stumbled upon this helpful Stack Overflow answer that suggests using a specific CSS cl ...

htmlcss