Combining Different Fonts in a Single CSS File

Is there a way to incorporate multiple fonts in a CSS file? I attempted the following method, but it's not producing the desired outcome.

@font-face {
    font-family: 'Inspira_Reg';
    src: url('http://myfonturl.com');
}

@font-face {
    font-family: 'Inspira_Bold';
    src: url('http://myfonturl.com');
}

@font-face {
    font-family: 'Inspira_Italic';
    src: url('http://myfonturl.com');
}

@font-face {
    font-family: 'Inspira_Medium';
    src: url('http://myfonturl.com');
}

To apply the font, I am setting the font-family property within the CSS IDs as shown below:

#titleSection {
   margin: 25px 5px auto auto;
   font-size: 11px;
   text-align:left;
   font-family: 'Inspira_Reg';
   color: black;
}

Despite following this method, the font doesn't seem to be recognized and defaults to Arial. I am using Google Chrome's latest version and the font types are TTF files.

Thank you, Dan.

htmlcssgoogle-chromefontstruetype

Answer №1

The @font-face rule enables the loading of custom fonts on a website. When included in a stylesheet, this rule prompts the browser to fetch the font from its hosting location and display it according to the CSS specifications.

To ensure cross-browser compatibility, it appears that @font-face necessitates multiple definitions. As illustrated in a resource from a CSS-tricks article:

@font-face {
  font-family: 'MyWebFont';
  src: url('webfont.eot'); /* IE9 Compat Modes */
  src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('webfont.woff2') format('woff2'), /* Super Modern Browsers */
       url('webfont.woff') format('woff'), /* Pretty Modern Browsers */
       url('webfont.ttf')  format('truetype'), /* Safari, Android, iOS */
       url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
}

Another option to consider is using @import (to be placed at the beginning of the CSS file):

For instance:

@import url(http://fonts.googleapis.com/css?family=Open+Sans);

This can then be utilized as:

font-family: 'Open Sans', sans-serif;

Multiple fonts can be handled by importing them at the outset of the CSS file and specifying the font-family attribute. To explore a variety of fonts and further details, refer to Google Fonts

Answer №2

everything looks great, but make sure to use the local address of your font. Here's a comprehensive example for you:

<!DOCTYPE html>
<html>
<head>
<style> 
@font-face {
   font-family: myFirstFont;
   src: url(sansation_light.woff);
}

div {
   font-family: myFirstFont;
}
</style>
</head>
<body>

<div>
With CSS3, websites can now utilize fonts other than the standard "web-safe" fonts.
</div>

<p><b>Note:</b> Internet Explorer 8 and older versions do not support the @font-face rule.</p>

</body>
</html>
make sure to save your font in the html folder and implement the provided code :)

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 Clash of Backdrop Modals and Dropdown Menus

Looking for a solution to ensure that the datetimepicker stays in place when a user scrolls, even after opening the Modal backdrop with the "Open" button? The challenge lies in maintaining the position fixed for the modal while preventing the datetimepic ...

htmlcssdrop-down-menubootstrap-modaldatetimepicker

Determining the repetition and placement of background images when employing multiple backgrounds

Is it possible to apply two background images to the same div? I want one image to repeat along the x-axis and the other to appear only once. I've tried using multiple background images, but I'm not sure how to target specific rules for each bac ...

cssbackgroundbackground-image

Altering data in a concealed dynamic HTML form

I have a hidden form on my webpage that gets populated dynamically when a button is clicked. I want to be able to change the values within this form dynamically. Initially, the form looks like this: <form id="zakeke-addtocart" method="pos ...

htmljqueryajax

Having trouble adding your own styling to bootstrap-4 using a custom CSS file?

Here is the code I used to connect my two stylesheets, with the custom css file being linked second as per what I believe is the correct way to do it. <!doctype html> <html> <head> <link rel="stylesheet" type="text/css" href=" ...

htmlcssflaskbootstrap-4styling

Is there a way to manipulate the color of this Unicode character in Edge without altering the font? (The current code functions correctly in Firefox.)

Is there a way to adjust the following code to ensure the Unicode character with HTML code ◼ prints in red in both Firefox and Edge browsers? Currently, it displays in red in Firefox but in black in Edge. <html> <body> <span style=" ...

htmlcss

Enhancing jQuery Rating Plugin

Currently, I am working on customizing the jQuery Bar Rating System Plugin. You can view an example of the plugin by visiting this link: . The rating system on my end will resemble Example D. Rather than having the plugin based on user input, my goal is to ...

javascriptjqueryhtmlxslt

A step-by-step guide on using Javascript to transform images into text

Hey there! I'm looking for some help to convert an image into text. The idea is that when someone uploads an image and hits the "Submit" button, the text from the image should display in a textarea below. However, the code I've been working on do ...

javascripthtmltesseract.js

Achieve button highlighting by hovering over the card - Bootstrap 5

Is there a way to make a button focus when hovering over a card in Bootstrap from any place on the card? Currently, the button only focuses when directly hovered over. I want to achieve the effect shown in the second image after hovering over any part of t ...

htmlcsstwitter-bootstrapbootstrap-5

What is the best way to implement JavaScript for loading and removing content based on button clicks on a webpage?

I'm in need of a vanilla JavaScript solution (I know JQuery options exist, but I want to stick to vanilla JS for now)? Currently, I am using a simple page as a testing ground for my ongoing project. The page consists of two buttons that load HTML pag ...

javascripthtmldom

If I choose a different option from the dropdown list, I would like a textbox to appear

Hey there, I have a list of industries and one of the options is "Other". When a user clicks on "Other", a text box should appear for them to specify. I'm struggling to make this work using Django AJAX. Any help would be appreciated! <div class ...

htmldjango

What steps can I take to ensure the proper formatting of the `select` input on Mac OS?

How can I maintain consistent formatting for my form across different operating systems? Currently, the form looks good on Windows, but I want to ensure that the select input appears consistently on Mac OS, iOS, and Android devices as well. The image bel ...

htmlcssmacosdrop-down-menucross-browser

Personalize the Bootstrap 4 CDN option

Is there a mistake in my code or am I just missing something when trying to override Bootstrap 4 CSS/SCSS? I tested it on W3Schools and it worked, but it doesn't seem to be working elsewhere. Additionally, I prefer to serve different CSS files to user ...

cssbootstrap-4cdn

Adding a three-dimensional perspective to an HTML5 canvas without utilizing CSS3 or WebGL

Here is a canvas I am working with: http://jsbin.com/soserubafe Here is the JavaScript code associated with it: var canvas=document.getElementById("canvas"); var ctx=canvas.getContext("2d"); var w = canvas.width; var h = canvas.height; var cw=canvas. ...

javascriptcsshtmlcanvas3d

Tracking the number of images and adjusting the counter as the user scrolls

I am working on a project where I have a series of images displayed in a column. I would like to add a dynamic counter to indicate which image is currently in focus based on the scroll position. Feel free to check out the demo <div class="counter"> ...

javascriptjqueryhtml

Tips for emphasizing the current element without disrupting existing styles

Is there a way to highlight an element with a border without causing it to shift? The script seems a bit glitchy when detecting mouse leaving the area. I'm unable to override parent element properties like border or outline. I also can't use pse ...

javascripthtmlcss

Navigating with Express while incorporating React

I am struggling to set up the routes for my web application using Express, as well as incorporating React for the front end. The issue lies in properly routing things when React components are involved. My index.html contains: <script> document.get ...

javascripthtmlreactjsexpress

Error: Attempting to access a method pg_fetch_object() that does not exist

I'm a beginner in PHP and I am trying to display a single column from a table named music in my database called composer. However, every time I run the code, I encounter the following error message: Fatal error: Call to a member function pg_fetch_obje ...

phphtmlmysql

Error message: Failure to retrieve / on the Express application

Embarking on a new project using express, I've set up the foundation with an index.js file in my project folder: var express = require('express'); //App setup var app = express(); var server = app.listen(4000, function(){ console.log(&a ...

htmljsonexpress

When hovering, the CSS animation will rotate an additional 45 degrees

Currently, I have an element set to rotate 45 degrees when the website is displayed, and this functionality is working as expected. However, I am now looking to enhance it further by making the element rotate an additional 45 degrees every time it is hover ...

htmlcssanimationrotation

Troubleshooting: Scrollspy Bootstrap 4 functionality not functioning properly on Codepen

I’ve been experimenting with the Scrollspy feature in Bootstrap 4 for my Portfolio Page, but I’m facing some issues getting it to work properly on Codepen. After doing some research on StackOverflow, I came across a working example on Codeply, here’ ...

htmlbootstrap-4scrollspycodepen