Is it possible to utilize a .css file as the origin with @font-face?

Received a shortened path to a Gotham font...

https://cloud.typography.com/[path shortened]/css/fonts.css

Attempting to use it in a @font-face definition but facing issues with the src format:

@font-face {
  font-family: 'Gotham';
  src: url("https://cloud.typography.com/[path shortened]/css/fonts.css");
  font-family: "Gotham SSm A", "Gotham SSm B";
  font-style: normal;
  font-weight: 400;
}

Trying to implement it like this:

body {
    font-family: 'Gotham', sans-serif; 
}

However, always getting the fallback sans-serif font instead of Gotham.

Note: The font is paid for and properly licensed by typography for testing on the domain).

cssfontsfont-facecloud.typography

Answer №1

Implement this snippet in your primary CSS file and reference the font name in the font.css file as the font-face declaration. This method is likely to be effective.

@import url(' shortened]/css/fonts.css');

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 sizing of elements in Firefox seems to be off when using percentage

I am facing an issue with a page that has 3 td elements all set at a width of 33.333333%. In Firefox, the browser seems to be computing it as an actual pixel value of 568px, causing the containers to run off the page. I have not defined any fixed widths in ...

css

What is the best way to make the Bootstrap navbar stay fixed at the top of the

I am currently experiencing an issue with the Bootstrap navbar while using version 5.0. Whenever the Bootstrap navbar expands, the content below it also moves down, which is not the desired behavior. I want the content to remain in place. I tried set ...

htmlcsstwitter-bootstrapbootstrap-5

Is it possible to eliminate a style that was applied using the .css() method?

Currently, I am using jQuery to modify the CSS and would like to know how to remove the styling that is being applied based on the input value provided: If the color is not '000000', then change the background-color of the body element to the sp ...

javascriptjquerycss

Utilizing CSS float with dynamic height

Is there a way to achieve height:auto; for a parent element even when child elements are using float:left; or float:right? Solution for the Parent Element: #parent { width:100px; height:auto; padding-bottom:10px; background:#0F0; ...

htmlcss

Issues with the collapse feature in Bootstrap 5.1.3 accordion

I'm currently utilizing an accordion style to display various sets of information on a website. While all the correct information is being displayed, I am facing an issue where the accordion items are not collapsing as expected. Below is the code snip ...

phphtmlcsstwitter-bootstrapbootstrap-5

Adaptable placement of background across screen widths

I am facing an issue with three buttons that have the same height and width, text, and background icons on the right. On small screens or when there is only a single word in the button, I want to move the icons to the bottom center of the button. Is there ...

htmlcss

Centering navigation using HTML5

I've been struggling a bit trying to build a website, particularly with centering my <nav> tag. Despite reading numerous suggestions like using CSS properties such as margin: 0 auto; or text-align: center, nothing seems to be working for me. Si ...

javascriptcsshtmltwitter-bootstrap

Closing the Bootstrap 5 Navbar on Click Event

I'm not very familiar with Bootstrap and I came across this code online that involves javascript in html, which I don't fully understand. I want to make the hamburger menu close automatically after selecting an item in the navigation bar, especia ...

htmlcssmenunavbarbootstrap-5

Is there a way to move the cards to the next line within a wrapper when the screen size is reached?

My goal is to showcase multiple elements in cards, obtained from my routing system, much like how I'm setting up my sidebar (which is functioning correctly). I have all the titles and icons ready, and the linking works seamlessly. This is where I&apo ...

cssvue.js

Issue with Tailwind and MUI integration causing unanticipated error with white buttons in NextJS Project

I'm in the process of developing a project using NextJS, TailwindCSS, and MUI React UI library. While integrating an MUI Button into my project, I noticed that the button's color remains white despite styling changes. https://i.stack.imgur.com/ ...

cssreactjsmaterial-uinext.jstailwind-css

Revolutionary CSS and jQuery for an Exceptional Top Navigation Experience

I would like to create a top navigation similar to the one on Facebook, using CSS and jQuery. Here is an example: Additionally: Notice how the arrow in the popbox always remains beneath the selected navigation item, and all popboxes have the same width. ...

jqueryfacebookcssfacebook-like

The column headers in the Kendo grid fail to resize proportionally

The column headers in the Kendo grid do not scale correctly when the browser has a large or small resolution. This issue can be easily reproduced by zooming in or out on the browser. Refer to the image below for an example. Is this a known bug, and are th ...

csskendo-uitelerikkendo-grid

How to perfectly position an image within a fixed full screen container

When you click on a thumbnail image, a full-screen overlay with a larger version of the image will be triggered using JavaScript. To ensure that the image is centered and resized inside the black overlay when the browser window size changes, I attempted t ...

javascriptjqueryhtmlcss

What is the correct way to properly wrap the div component in this code snippet?

I am currently working on implementing a Javascript component that displays pinned locations and related information on a map. I have made some progress with the implementation, but unfortunately, it does not appear correctly in the actual site. There is a ...

javascripthtmljquerycssimplementation

Using classes to override CSS

I've been going through the Material UI Overrides documentation in an attempt to customize the color of each radio button, but I'm having trouble grasping it conceptually. If I start with Material UI's default setup for radio buttons, how ca ...

cssreactjsmaterial-ui

Styling Tables with Bootstrap CSS and Integrating Database Data

Currently, I am utilizing the code snippet below to retrieve and display data stored in a database. Although everything functions correctly, I am encountering an issue with displaying it using Bootstrap CSS. Strangely, when I try copying an example of a ta ...

htmlcsstwitter-bootstrap

disable full page scrolling on iOS devices

Can you achieve elastic scrolling for a single absolutely positioned div in Mobile Safari without causing the entire page to move up and down? Check out this basic example that illustrates the problem: <!doctype html> <html> <head> ...

javascripthtmlioscssmobile-safari

Position an element to the right inside its parent container with varying width in Internet Explorer 7 or earlier

I am trying to align a button to the right edge of a table inside a container-div that has no set width. The goal is to have the button float on the right side of the table, lining up with its right edge. While my current approach works in most browsers, i ...

htmlcss

Image Animation Using a Rotational Control (HTML/JavaScript/...)

I am interested in achieving a specific effect with a series of images that transition from dark to light. My idea is to have a dial or slider underneath or over the frame so that when it is moved to the left, the black image is displayed, and when moved t ...

javascripthtmlcss

The issue with the sticky menu not functioning properly may be due to the use

Hey there, I'm facing an issue with the Navbar Menu (White Bar) on my website. It is working perfectly fine and sticking to the top as expected. However, the problem arises when I click on the Menu - the Sticky class stops working. Upon investigating, ...

htmlcssmobilenavbarsticky