How to Link External CSS and Font Files from Different Folders in Web Development?

Linking External Assets in File Directories

A common challenge in web development is linking external resources such as stylesheets and fonts when their locations differ from the main HTML document. In this article, we will explore the techniques to link these assets in scenarios where they reside in separate folders.

Linking a CSS File from a Different Folder

To link a stylesheet from a different folder, use the following syntax:

<link href="filepath/stylesheet.css" rel="stylesheet">

Replace "filepath" with the relative path to the CSS file. For example, if the CSS file is located in a folder named "styles" within the "assets" folder, the path would be:

<link href="assets/styles/stylesheet.css" rel="stylesheet">

Linking a Font-Face CSS File

To link a font-face CSS file from a different folder, follow a similar approach:

<link href="filepath/font-face.css" rel="stylesheet">

For instance, if the font-face CSS file is located in the "fonts" folder within the "assets" folder, the path would be:

<link href="assets/fonts/font-face.css" rel="stylesheet">

Linking Fonts Using src Attribute

Within the font-face CSS file, you need to specify the font files using the src attribute. The file paths should be relative to the location of the font-face CSS file. For example, if the font files are in the "font1" folder within the "fonts" folder, the src attribute would be:

@font-face {
  font-family: 'Font1';
  src: url('font1/font1.ttf') format('truetype');
}

This approach ensures that your stylesheets and fonts are properly linked, regardless of their location within the file structure.

The above is the detailed content of How to Link External CSS and Font Files from Different Folders in Web Development?. For more information, please follow other related articles on the PHP Chinese website!