How Do I Link External CSS and Font Files from Nested Folders in My Website?

Linking External CSS and Font Files

When organizing website files, it becomes necessary to link external CSS and font files. In this scenario, you have a "Website" folder with HTML and CSS files and a nested "Fonts" folder containing multiple folders for different fonts.

Linking the Font-Face CSS File

To link your font-face CSS file, use the following in your HTML file:

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

This will reference the CSS file from the "Fonts" folder relative to the HTML file's location.

Linking the Fonts

To link the fonts from their respective folders within the "Fonts" folder, use:

src: url("/fonts/font1/font1.ttf") format("truetype");

For the SVG format:

src: url("/fonts/font1/font1.svg") format("svg");

File Path Reminder

To navigate through file paths effectively, remember the following rules:

• "/" refers to the root directory.
• "../" moves one directory backwards.
• "../../" moves two directories backwards.
• To move forward, specify the subdirectory names.

The above is the detailed content of How Do I Link External CSS and Font Files from Nested Folders in My Website?. For more information, please follow other related articles on the PHP Chinese website!