How to Link Stylesheets and Fonts from Separate Folders in Your Website?

Linking Stylesheets and Fonts Across Folders

When organizing website files, it's common to separate assets into different directories. In this scenario, your website files reside in the "Website" folder, while your font-related files are in the "Fonts" folder, which further contains nested folders for specific fonts.

To link your stylesheet ("stylesheet.css") to your HTML file located in the "Website" folder, you can simply use the following path relative to the HTML file:

href="stylesheet.css"

However, referencing your font-face CSS file in the "Fonts" folder requires a slightly different approach. The relative path for the font-face CSS file becomes:

href="../Fonts/font-face-css.css"

Here, "../Fonts/" moves back one directory to reach the "Fonts" folder from the HTML file's location.

To link the individual fonts within the nested folders inside the "Fonts" folder, use the following syntax in the font-face CSS file:

src: url("../Fonts/font1/font1.ttf") format("truetype");
/* Repeat for each font and format as needed */

In this example, "../Fonts/font1/font1.ttf" specifies the relative path to the TrueType Font (TTF) file located within the "font1" folder. Adjust the folder names and file extensions accordingly for your specific fonts.

The above is the detailed content of How to Link Stylesheets and Fonts from Separate Folders in Your Website?. For more information, please follow other related articles on the PHP Chinese website!