Choosing a unique font style in CSS (OTF) - How to differentiate between bold, italic, etc. when using multiple OTF files?

I'm a little confused on how to implement @font-face in my current project. The client handed over multiple font files including FontName-Black.otf, FontName-BlackItalic.otf, FontName-Bold.otf, FontName-BoldItalic.otf, and more.

My usual approach would be:

@font-face {
    font-family: FontName;
    src("path/FontName.otf") format("opentype")
}

Do I need to list all the provided font names individually? How does CSS determine the default font and which one to use for bold (with the <strong> tag) or italic (with the <em> tag)?

cssfont-face

Answer №1

To implement various fonts using @font-face, follow this structure:

@font-face {
  font-family: "FontName";
  src: url("FontName-Regular.otf") format("truetype");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "FontName";
  src: url("FontName-Italic.otf") format("truetype");
  font-weight: normal;
  font-style: italic;
}

@font-face {
  font-family: "FontName";
  src: url("FontName-Bold.otf") format("truetype");
  font-weight: bold;
  font-style: normal;
}

Then in your CSS code, specify the font like so:

body { font-family:"FontName", //add other desired fonts here }

h1 { font-weight:bold; }

p { font-style:italic; }

strong p{
  font-weight:bold;
  font-style:italic;
}

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

Issues encountered when incorporating personalized CSS into a Vuetify element

Working with the Vuetify selector input component, v-select, and wanting to customize its style led me to inspecting it in Chrome and copying down the necessary classes. For instance, to change the font size of the active value, I utilized: .v-select__sel ...

javascripthtmlcssvue.jsvuetify.js

Silhouette as the backdrop image

There is a span element that I am using in the following way - <span class="tick"></span> This creates a decorative "tick" for a checkbox. The CSS code used for this is - input[type="checkbox"] + span > span.tick { display: block; ...

htmlcss

Utilizing CSS to create dynamic 3D cube transformations

Exploring the realm of CSS 3D transforms to showcase cubes and cuboids featuring cross-sections has been my current venture. In this endeavor, I'm aiming at compatibility with Chrome, Firefox, and MSIE 11. It has come to my attention that in order to ...

htmlcss3d

Setting the color of an element using CSS based on another element's style

I currently have several html elements embedded within my webpage, such as: <section id="top-bar"> <!-- html content --> </section> <section id="header"> <!-- html content --> </section> <div id="left"> &l ...

javascriptjqueryhtmlcssjoomla3.0

Ways to conceal and reveal content within div elements

I have a code snippet that is currently operational, but I am looking to enhance it by displaying one div at a time. If you would like to view the code, please visit my CodePen link below: https://codepen.io/danongu/pen/YzXvpoJ Due to the extensive amou ...

jqueryhtmlcss

Troubleshooting CSS problems with positioning 3 fluid div elements

I am in need of 3 dynamic div containers. container for main content image display container that changes size container on the side with changing width The issue I am facing is that the text needs to be below the image container which has a wider width ...

htmlcss

Troubleshooting: CSS Selectors Hover Functionality Not Functioning as

I am having an issue where the styling does not change the display to block when hovering. Any insights or feedback would be greatly appreciated. <!DOCTYPE html> <html lang="en"> <head> <meta http-equiv="Content-Type" content="t ...

htmlcss

Working with CSS styles for the <datalist> element

I currently have a basic datalist drop-down menu and I am looking to customize the CSS to match the style of other fields on my website. However, as someone new to web design, I am unsure of how to go about this process. Check out the code here: http://j ...

htmlcsshtml-datalist

Create a CSS menu that remains fixed at the top of the page and highlights the current submenu as

When explaining a concept, I find it easier to include a drawing to ensure clarity. https://i.stack.imgur.com/IChFy.png My goal is to keep the menu at the top of the page after scrolling past the header. https://i.stack.imgur.com/3fzJ6.png Using Bootst ...

cssvue.jsbootstrap-4

Tips for adjusting the positioning of a div element in a responsive design

I am currently working on my website and facing a layout issue. In desktop mode, there is a sidebar, but in mobile view, the sidebar goes down under the content displayed on the left side. I would like the sidebar to appear at the top in mobile view, fol ...

javascriptjqueryhtmlcss

calc() not supported on IE11

Why is IE11 unable to calculate this? The console shows it as invalid (highlighted in red) h6 { ... font-size: calc(calc((( (20 / 16) / 16 - 1 / 16) * (100vw - 20rem) / (992 / 16 - 20) + 1 / 16 * 1rem) * 16)); ... } However, the following code works ...

cssinternet-explorersassinternet-explorer-11css-calc

sophisticated HTML navigation bar

I am looking for a way to create a menu where the drop-down items overlay the rest of the menu when the screen width is small. Here is my current code: nav{ line-height:100%; opacity:.9; }nav ul{ background: #999; padding: 0px; border-radius: 20px; ...

javascripthtmlcssnav

3 Methods for Implementing a Floating Header, Main Content, and Sidebar with Responsive Design

I am following a mobile-first approach with 3 containers that need to be displayed in 3 different layouts as shown in the image below: https://i.sstatic.net/UjKNH.png The closest CSS implementation I have achieved so far is this: HTML: <header>.. ...

javascripthtmlcsscss-float

Using @font-face to apply a font on an SVG file is not supported

I attempted to incorporate custom fonts into my SVG file, but unfortunately, my efforts were unsuccessful. While I have successfully implemented custom fonts on regular HTML/CSS webpages before, I encountered difficulties when trying to do the same with SV ...

htmlcsssvgfontsembed

After my data rows are filled, I add jQuery and CSS striping animations to enhance their appearance

Before any click, they have this appearance: Clicking on Sales in the business section reveals a drop-down select box. If I click on "Sales" and modify the text area, it will transition to grey. While the grey rows change accordingly, the black rows shoul ...

jquerycssjquery-animate

Switching hover behavior on dropdown menu for mobile and desktop devices

I have implemented a basic JavaScript function that dynamically changes HTML content based on the width of the browser window. When in mobile view, it removes the attribute data-hover, and when in desktop view, it adds the attribute back. The functionalit ...

javascriptjqueryhtmlcsstwitter-bootstrap

Using jQuery to reset the position of animated divs

I am currently working on a code that expands and centers a div when hovered upon using the following script: $(document).ready(function(){ //animation on hover $('#sliding_grid li').hover(function() { ...

javascriptjquerycss

Tips for sorting items in Wordpress with JavaScript / on click?

I am currently utilizing a method similar to the one outlined in this resource from w3 schools for filtering elements within divs. However, I am facing challenges when attempting to integrate this script into my Aurora Wordpress site due to the removal of ...

javascripthtmlcsswordpress

Tips for setting a Bootstrap 3 dropdown menu to automatically open when located within a collapsed navbar

Is there a way to have my dropdown menu automatically open when the collapsed navbar is opened? Take a look at this example I created in a fiddle to see what I'm working with so far. Right now, when you click on the navbar in its collapsed state, two ...

javascriptjqueryhtmlcsstwitter-bootstrap-3

Alignment of Card Element at Bottom in Bootstrap 5

Hey there! I'm new to Bootstrap and I'm facing an issue where I want to position a button element at the bottom of a card, even when the body text is minimal. However, no matter what I try, the button does not end up in the bottom right corner as ...

htmlcsstwitter-bootstrapbootstrap-5