Unable to load custom fonts

Question

Unable to load custom fonts

I've been attempting to upload Gotham fonts onto a website I'm constructing, but unfortunately, it doesn't seem to be working. Despite my efforts to troubleshoot by searching through various resources, including Google, the issue persists. It seems there might be a syntax problem with the upload that I am unable to identify, and I'm hopeful that another set of eyes can spot it.

In the past, I have successfully loaded custom fonts on a Rails application, however, this is the first time I am dealing with pure front-end development. I have created a font file - Gotham_fonts - containing six files with the .otf extension.

style.css

@font-face {
  font-family: 'Gotham-Book';
  src: url('Gotham_fonts/Gotham-Book.otf') format('otf');
}

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

Despite trying different variations and even using !important, the issue remains unresolved. Do you think my fonts folder should actually be placed inside my CSS folder?

html css fonts font-face

Answer 1

Answer №1

Your code is looking good overall, but there seems to be a mistake in the format string you used:

@font-face {
  font-family: 'Gotham-Book';
  src: url('/Gotham_fonts/Gotham-Book.otf') format('opentype');
}

It's crucial to use the correct path to the font file, and there are multiple options available:

An absolute path from the root can be used like this:
```
url('/Gotham_fonts/Gotham-Book.otf')
```
. This method is recommended as it works regardless of where the font file is referenced. However, keep in mind that it may only work in the production environment if your test setup has each project stored in separate folders.
Alternatively, you can opt for a relative path. In this case, the path should be relative to the CSS file. For example, if the CSS file is in the parent folder of Gotham_fonts, you can use
```
url('Gotham_fonts/Gotham-Book.otf')
```
as you did. But if the CSS file is located in a folder like CSS_files, you would need to use
```
url('../Gotham_fonts/Gotham-Book.otf')
```
.

Answer 2

Your code is looking good overall, but there seems to be a mistake in the format string you used:

@font-face {
  font-family: 'Gotham-Book';
  src: url('/Gotham_fonts/Gotham-Book.otf') format('opentype');
}

It's crucial to use the correct path to the font file, and there are multiple options available:

An absolute path from the root can be used like this:
```
url('/Gotham_fonts/Gotham-Book.otf')
```
. This method is recommended as it works regardless of where the font file is referenced. However, keep in mind that it may only work in the production environment if your test setup has each project stored in separate folders.
Alternatively, you can opt for a relative path. In this case, the path should be relative to the CSS file. For example, if the CSS file is in the parent folder of Gotham_fonts, you can use
```
url('Gotham_fonts/Gotham-Book.otf')
```
as you did. But if the CSS file is located in a folder like CSS_files, you would need to use
```
url('../Gotham_fonts/Gotham-Book.otf')
```
.

Answer 3

Answer №2

To start off, you can utilize a webfont generator like to create OTF, TTF, EOT, and WOFF variations of your font. It's beneficial to have all four versions as different browsers may require or prefer specific formats.

Next, make sure your CSS (while keeping your HTML intact) appears similar to the following:

@font-face {
    font-family: "Gotham-Book";
    src: url("../Gotham_fonts/Gotham-Book.eot");
    src: 
    url("../Gotham_fonts/Gotham-Book.woff") format("woff"),
    url("../Gotham_fonts/Gotham-Book.otf") format("opentype");
}

The use of '../' in the URL paths assumes that both your CSS folder and 'Gotham_Fonts' folder are located in the same parent directory.

Please feel free to reach out if you need further assistance!

Answer 4

To start off, you can utilize a webfont generator like to create OTF, TTF, EOT, and WOFF variations of your font. It's beneficial to have all four versions as different browsers may require or prefer specific formats.

Next, make sure your CSS (while keeping your HTML intact) appears similar to the following:

@font-face {
    font-family: "Gotham-Book";
    src: url("../Gotham_fonts/Gotham-Book.eot");
    src: 
    url("../Gotham_fonts/Gotham-Book.woff") format("woff"),
    url("../Gotham_fonts/Gotham-Book.otf") format("opentype");
}

The use of '../' in the URL paths assumes that both your CSS folder and 'Gotham_Fonts' folder are located in the same parent directory.

Please feel free to reach out if you need further assistance!

Answer 5

Answer №3

After some investigation, I realized that the issue might have been with the font files I was using. To troubleshoot, I decided to switch to a different font-family collection. Luckily, this change resolved the path problem. Here's the updated code snippet:

@font-face {
    font-family: 'geomanistregular';
    src: url('../fonts/geomanist-regular-webfont.eot');
    src: url('../fonts/geomanist-regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/geomanist-regular-webfont.woff2') format('woff2'),
         url('../fonts/geomanist-regular-webfont.woff') format('woff'),
         url('../fonts/geomanist-regular-webfont.ttf') format('truetype'),
         url('../fonts/geomanist-regular-webfont.svg#geomanistregular') format('svg');
    font-weight: normal;
    font-style: normal;

}

I must say, it's quite a nice font after all. Many thanks to those who assisted me with this!

Answer 6

After some investigation, I realized that the issue might have been with the font files I was using. To troubleshoot, I decided to switch to a different font-family collection. Luckily, this change resolved the path problem. Here's the updated code snippet:

@font-face {
    font-family: 'geomanistregular';
    src: url('../fonts/geomanist-regular-webfont.eot');
    src: url('../fonts/geomanist-regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/geomanist-regular-webfont.woff2') format('woff2'),
         url('../fonts/geomanist-regular-webfont.woff') format('woff'),
         url('../fonts/geomanist-regular-webfont.ttf') format('truetype'),
         url('../fonts/geomanist-regular-webfont.svg#geomanistregular') format('svg');
    font-weight: normal;
    font-style: normal;

}

I must say, it's quite a nice font after all. Many thanks to those who assisted me with this!

Unable to load custom fonts

Answer №1

Answer №2

Answer №3

Similar questions

Arranging an image and button within a column div row using Bootstrap

The method for retrieving and entering a user's phone number into a text field upon their visit

What are the steps to modify the properties of an HTML class with JavaScript?

Difficulty in adjusting the height of the popover menu that appears when using the Select Validator in Material UI

Using the same Angular component with varying input values

Loading indicator displayed at the top of a div using JavaScript/jQuery

Excessive content overflowing in Bootstrap's card-body

Instructions for creating a distinct click listener for each <img> element inside a table cell

Ways to verify if all javascript and css files have been successfully loaded

error TS2559: The type 'BookInterface[]' does not share any properties with the type 'BookInterface'

Utilizing the active tab feature within CSS

How can you make a Tempory Drawer wider in Material Components Web?

Text that is arranged vertically and adjusts its size and layout

Using a color as a substitute for a background image on mobile devices

How can I trigger a function by clicking on a link that was generated dynamically with jQuery?

Text below div will be displayed

Utilizing identical CSS for both mobile and desktop interfaces, while customizing margins and paddings separately

What is the correct way to add a dollar sign before a database tag?

Setting the root position of a div: How can it be done?

Creating an arrow dialog box in Material UI: A step-by-step guide