Loading custom fonts using @font-face will only happen as the last step

Within my project.less file, I have declared several fonts to load:

@font-face {
    font-family: 'Myriad Set Pro';
    src: url(/assets/fonts/Myriad-Apple-Text/myriad-set-pro_medium.woff) format('woff');
    //font-style: normal;
    font-weight: medium;
}
@font-face {
    font-family: 'Myriad Set Pro';
    src: url(/assets/fonts/Myriad-Apple-Text/myriad-set-pro_text.woff) format('woff');
    //font-style: normal;
    font-weight: normal;
}
@font-face {
    font-family: 'Myriad Set Pro';
    src: url(/assets/fonts/Myriad-Apple-Text/myriad-set-pro_thin.woff) format('woff');
    //font-style: normal;
    font-weight: thin;
}
@font-face {
    font-family: 'Myriad Set Pro';
    src: url(/assets/fonts/Myriad-Apple-Text/myriad-set-pro_extrathin.woff) format('woff');
    //font-style: normal;
    font-weight: extrathin;
}

However, only the last declared font seems to be loading correctly. This results in all fonts on my application appearing as extrathin, even when their weight should be different. If I rearrange the order and place the medium font declaration last, then all fonts will display as medium.

Upon inspection in the Chrome network console, it is evident that only one font gets loaded at a time.

javascripthtmlcssfonts

Answer №1

After conducting local testing, it has become clear that the issue lies with the assigned values for the "font-weight" properties.

The following values are not recognized:

  • medium
  • thin
  • extrathin

Replacing these with appropriate weights should resolve the issue.
http://www.w3schools.com/cssref/pr_font_weight.asp

The 'normal' setting appears to be functioning correctly, and it is worth noting that in my testing (using chrome), the browser consistently loads the last declared value...

Answer №2

They all share the same name, which means that in typical cascading style sheet fashion, the final declaration takes precedence.

Therefore, if you want to make changes and adjust font styles...

@font-face {
    font-family: 'Myriad Set Pro Medium';
    src: url(/assets/fonts/Myriad-Apple-Text/myriad-set-pro_medium.woff) format('woff');
    font-style: normal;
    font-weight: normal;
}
@font-face {
    font-family: 'Myriad Set Pro Normal';
    src: url(/assets/fonts/Myriad-Apple-Text/myriad-set-pro_text.woff) format('woff');
    font-style: normal;
    font-weight: normal;
}
@font-face {
    font-family: 'Myriad Set Pro Thin';
    src: url(/assets/fonts/Myriad-Apple-Text/myriad-set-pro_thin.woff) format('woff');
    font-style: normal;
    font-weight: normal;
}
@font-face {
    font-family: 'Myriad Set Pro Extra Thin';
    src: url(/assets/fonts/Myriad-Apple-Text/myriad-set-pro_extrathin.woff) format('woff');
    font-style: normal;
    font-weight: normal;
}

If you require different font files for each style (thin, normal, extra thin, etc), it is necessary to specify the actual font name instead of relying solely on the font-weight property. Font-weight will only select predefined weights within the same font file.

So in the CSS code, rather than adjusting the font-weight, you should modify the font-family.

.p { font-family: 'Myriad Set Pro Normal'; }
h1 { font-family: 'Myriad Set Pro Medium'; }
.caption { font-family: 'Myriad Set Pro Thin'; }

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

Is there a way to enclose a set of elements that are aligned to the

I am facing an issue with a container div that contains multiple items. The container requires a border, but the problem arises when I float the elements left within the container, as it seems to disrupt the flow of the elements. Adding a border to the co ...

css

Creating a dynamic date input in Angular

I am working on creating a custom date-field component using ngx-bootstrap's datepicker, in order to globalize functionality and configurations. However, I am facing difficulty in capturing the value of the Date object in the input field. In my date- ...

htmlangulartypescriptngx-bootstrap

Create a JavaScript function without attaching it to the global window object

Can someone please help me with defining a function and using it inside Jquery within the $(document).ready block? function addLeadingZero(number) { return (number < 10 ? '0' : '') + number } I'm not confident that I ha ...

javascriptjquerywindow

Tips for restricting access to specific routes in VueJS using Store state

Once a user is authorized, their user type is saved to the state. Based on this type, I need to dynamically show or hide specific routes. src/store/index.js: import Vue from "vue"; import Vuex from "vuex"; import getters from "./getters"; import user from ...

javascriptvue.jsvuejs2

What is the best way to establish a limit on the number of characters that can be entered into an input field in a React form?

Currently, I am creating a tool to check the strength of passwords based on their length. However, I am unsure of how to precisely determine if a password falls within specific length ranges such as "between 5 and 10 characters" or "between 20 and 30 cha ...

javascriptreactjs

Dynamic image swapping using JSON key in Angular

Trying to display different icons based on a property that contains specific words. If the property includes "Health Care" or "Health Care .....", I want to show one image, otherwise another. I've tried using ng-show but my syntax seems off. Any sugge ...

javascripthtmlangularjsjsonimage

Passing data from child to parent in Angular using EventEmitter

I have integrated a child grid component into my Angular application's parent component, and I am facing an issue with emitting data from the child to the parent. Despite using event emitter to transmit the value to the parent, the variable containing ...

javascriptangulareventemitter

Tips for sending information to an Express API through AJAX

While working on a website using Express and EJS, I encountered an issue with calling an API via AJAX. The problem arises when passing two values to the AJAX data upon button click, resulting in errors. Despite trying various solutions, I'm still stru ...

javascriptnode.jsjsonajaxexpress

Combining Paper.JS Canvas with VivaGraphJS Graph: Capturing Interactions

I find myself in a unique and challenging position. Utilizing VivaGraph JS for rendering Conceptual Graphs on the web using SVG as my main graph DOM element. While creating edges between nodes, I incorporated a piece of code from Paper.JS which leverages ...

javascriptjquerysvgpaperjsvivagraphjs

Tips for achieving uniform spacing between three buttons in a horizontal alignment using bootstrap 3

Is there a way to make buttons enclosed in a <div> with class="row" and each button having class="span4" only as wide as the text it contains, centered at 25%, 50%, and 75% of the width of the screen? [aaa] [bbb] [ccc] not [ aaa ][ bbb ][ ccc ] ...

htmlcsstwitter-bootstraptwitter-bootstrap-3

`Is it possible to implement the geocode function multiple times within a single post request using npm node-geocoder?`

I've been struggling to develop a function returnCoords(par1) that allows users to input text and convert it to coordinates using the node-geocoder npm. Despite my efforts, the function returns undefined. I attempted to resolve this using async and aw ...

javascriptnode.jsfunctiongeocodegeocoder

Retrieving rows from a MySQL table that contain a specified BIGINT from an array parameter

I've encountered a problem with mysql while using serverless-mysql in TypeScript. It seems like my query might be incorrect. Here is how I am constructing the query: export default async function ExcuteQuery(query: any, values: any) { try { ...

javascriptmysqltypescript

Avoiding memory leaks in Node.js with Express framework

Dealing with memory leaks in nodejs (express.js) has been a challenge for me. I followed various tutorials online, but unlike the examples provided, identifying the source of the leak in my code has not been straightforward. Through the use of Chrome Dev T ...

javascriptnode.jsexpressmemory-leaksgoogle-chrome-devtools

Create a web page utilizing the React library

After creating a function that is working well, I encountered an issue when trying to implement the following code: const successPage = () => { firebase.auth().onAuthStateChanged((user) => { if(user) { console.log("calling su ...

javascriptreactjsfirebasegoogle-cloud-firestore

Utilizing NLP stemming on web pages using JavaScript and PHP for enhanced browsing experience

I've been exploring how to incorporate and utilize stemming results with JavaScript and PHP pages on web browsers. After running node index.js in the VS Code terminal, I was able to retrieve the output word using the natural library: var natural = re ...

javascriptnode.jsbrowsernlpstemming

Exploring Jasmine and Karma for testing Angular 5 HTTP requests and responses

I am brand new to the concept of Test-Driven Development (TDD) and I am currently in the process of debugging a complex Angular 5 application for the company I work for. The application is functioning without any issues, but now I need to incorporate test ...

javascriptangularjasminekarma-jasmine

Can you explain the concept of embedding the Chrome V8 engine in Node.js?

As I dive into the world of MEAN, a question arises: When learning about node.js, it is mentioned that node.js is powered by the Chrome V8 engine. This leads me to wonder if node.js is only compatible with specific browsers. Can someone explain why node. ...

javascriptnode.jsexpress

Stop removing event triggers when the close button on toastr is clicked

Incorporating toastr.js into my application has presented a unique challenge. When a user submits a form, I want to display a toast notification and provide them with a brief window of time to close the toast by clicking a button before sending the data to ...

javascriptangulartoastr

CSS Scroll Transitions

I'm currently exploring ways to create div scroll wipes similar to the ones shown in this example. Has anyone successfully achieved this effect using CSS rather than JavaScript? I've been searching for solutions but haven't come across any ...

htmlcssscrollmagic

The feature of interpolation within attributes has been eliminated. Please use either v-bind or the colon shorthand in its place

I am struggling to grasp how I can pass a value to Vue using HTML. I keep encountering this error message: Interpolation inside attributes has been removed. Use v-bind or the colon shorthand instead. Edit: I am trying to pass the value "country" to the Vu ...

htmlvue.js