Using @font-face to include several files for different font-weight variations

I have a collection of font files that I want to assign to specific font weights.

@font-face {
    font-family: "custom-font";
    src: url("font300.eot");
    src: url("font300.eot?#iefix") format("embedded-opentype"),
        url("font300.woff2") format("woff2"),
        url("font300.woff") format("woff"),
        url("font300.ttf") format("truetype"),
        url("font300.svg#font-300") format("svg");
    font-weight: 300, normal;
    font-style: normal;
}

@font-face {
    font-family: "custom-font";
    src: url("font500.eot");
    src: url("font500.eot?#iefix") format("embedded-opentype"),
        url("font500.woff2") format("woff2"),
        url("font500.woff") format("woff"),
        url("font500.ttf") format("truetype"),
        url("font500.svg#font500") format("svg");
    font-weight: 500, bold;
    font-style: normal;
}

Is it possible to map font-weight to numbers and bold/normal without duplicating the entire font-face block?

Which font types are necessary for web use? Can any be omitted? (eot, woff2, woff, ttf, svg)

Thank you.

cssfontsfont-face

Answer №1

There's no need to manually assign font-weight values as they automatically map to corresponding numbers. Check out the details at https://developer.mozilla.org/de/docs/Web/CSS/font-weight. So, just define the rule for either the number or the shorthand.

The choice of font types depends on which clients you aim to support. For compatibility details of each format, refer to:

EOT: http://caniuse.com/#feat=eot

WOFF: http://caniuse.com/#feat=woff

WOFF2: http://caniuse.com/#feat=woff2

SVG: http://caniuse.com/#feat=svg-fonts

TTF/OTF: http://caniuse.com/#feat=ttf

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

Tips for aligning my icon in the middle when I collapse my sidebar

Seeking assistance on centering the hamburger icon on my sidebar. Currently, when I adjust the width of the sidebar, the icon is not centered at all. Does anyone have a solution for achieving this? I attempted using justify-content: center in the main clas ...

css

Switching effortlessly between Fixed and Relative positioning

As I work on creating a unique scrolling experience, I aim to have elements stop at specific points and animate before returning to normal scroll behavior once the user reaches the final point of the page. Essentially, when div X reaches the middle of the ...

javascripthtmlcss

Creating a centered transparent rectangle of a specific width using HTML

I am working on a page layout similar to this FIDDLE body { margin:0 auto; max-width: 800px; padding:0 0 0 0; text-align:left; background-color:#FFFFFF; background-image: url('http://freeseamlesstextures.com/images/40-dirty-pa ...

htmlcss

Achieve perfect alignment of an HTML table by positioning it precisely 36 pixels away from the right edge of the window

I'm struggling to achieve a table that is precisely 36px away from both the left and right edges of the browser window, regardless of CSS. While I can easily set the left margin, getting the exact right margin seems impossible as the `margin-right` CS ...

htmlcsscss-tables

Is it possible to dynamically load a CSS link using jQuery in a unique way? Perhaps through the use of $.ajax or another method?

As I have been using jQuery to load various resources like scripts, HTML, XML, and JSON through AJAX, a thought struck me - is it feasible to use jQuery to load or remove CSS files or links when changing the theme of a website? If this is indeed possible, ...

cssajaxdynamicjquery

Creating transparent overlay boxes with CSS grid

I'm working on a design where I need to display text information over an image. The challenge is aligning the text properly, especially when the screen size changes due to using a grid system (1140). Currently, I have a div with transparent background ...

cssoverlaytransparent

Fluid design: prevent alteration in body width caused by vertical scrollbar

I have successfully implemented a liquid layout for my website by setting the body tag width to 100%. <html> <head> </head> <body> <div id="container"> some content </div> </body> body { mar ...

htmlcss

Difficulty in placing the logo within the navigation menu

Currently working on developing a website and encountering challenges with positioning the logo within the navigation bar. A test version of the site can be found at The logo is not centered properly in its designated space, especially in smaller browser ...

htmlcssnavbar

Text animation that rises smoothly within a concealed overflow region

I'm currently trying to replicate the effect seen in this example: Specifically, I am referring to the text that reads "CREATIVE AGENCY FOR DARING BRANDS" Although it appears simple, I am having trouble figuring out how to achieve it. I primarily wo ...

jquerycss

Guide to customizing the CSS styles of various components within a Material UI Dialog

Let's take a look at this snippet for creating a Material Dialog in code: <Dialog open={this.props.open} onClose={this.props.closeAtParent} PaperProps={{ style: { minHeight: '75vh', minWidth: '75vw', ...

cssreactjsmaterial-ui

Issues arise with Bootstrap's navbar dropdown menus, rendering them inoper

Currently I am developing a bootstrap website using the "Butterfly" template. Everything is functioning properly except for the navbar when viewed on mobile devices. The dropdown menu fails to open on mobile devices, and I suspect it might be related to th ...

htmlcsstwitter-bootstrapdrop-down-menunavbar

Exploring techniques for creating realistic dimensions in CSS

My goal is to create a responsive website that accurately displays an object with specified dimensions, such as a width of 100mm, regardless of the user's screen resolution. However, I am facing challenges in achieving this consistency across all devi ...

javascripthtmlcssunits-of-measurementppi

Using NextJs to pass a prop as a className

I'm having difficulty figuring out how to pass a prop to a className, and I'm questioning whether it's even possible. For instance, if the prop category is passed into the function as "category1", can I use styles.category in the ...

htmlcssreactjsnext.js

Create a styled-components component that renders a cross inside a recognizable object surrounded by borders

Currently developing an Object Recognition app and aiming to add a border around the object along with a cross that indicates the center. The border has been successfully implemented, but having trouble creating the cross. The plan is to add two more boxes ...

javascriptcssreactjsstyled-componentstensorflow.js

What is causing the issue with my CSS keyframe animation not functioning correctly when using `animation-direction: reverse`?

Exploring the use of animation-direction: reverse to streamline my CSS keyframe animation process. An interesting scenario arises when a container div is clicked, toggling an "active" class using jQuery to trigger the animation in either forward or backwar ...

csscss-animations

Adjust the background color of Bootstrap 4 checkboxes

I'm trying to figure out how I can modify the background color of a Bootstrap 4 checkbox in this specific scenario. .custom-control-label::before, .custom-control-label::after { top: .8rem; width: 1.25rem; height: 1.25rem; } <link rel="style ...

htmlcssbootstrap-4

Looking for assistance in reducing the vertical spacing between divs within a grid layout

Currently, I am in the process of developing a fluid grid section to showcase events. To ensure responsiveness on varying screen resolutions, I have incorporated media queries that adjust the size of the div elements accordingly. When all the divs are unif ...

javascriptcssgrid

Troubleshooting a problem with the Bootstrap dropdown menu

Can anyone assist with an issue regarding Bootstrap 4.4.1? I am facing a problem where two consecutive dropdown links+menus are not displaying correctly. The second dropdown menu is showing the content of the previous link instead of its own, even though t ...

cssbootstrap-4

Tips for concealing lengthy text within a select box and automatically wrapping it when displayed as an option

Is there a way to conceal lengthy text within a select box and display it only when the option is selected? I want to hide long text in a select box options, but have some sort of signal to show that more text is available. Is there a javascript solution ...

javascripthtmlcsstextdrop-down-menu

Positioning an image/carousel at the bottom of multiple without the need for alignment

I'm in the process of creating a single-page website with sections stacked on top of each other, including a section where divs are stacked both next to and on top of each other. Within this section, there is a container div that holds 5 divs named bo ...

htmlcssbootstrap-5