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

Linking CSS and Font Files from External Folders

Imagine having a "Website" folder where your website files reside, and a separate "Fonts" folder that contains font subfolders. If your HTML and CSS files are in the Website folder, how do you link them to elements within the Fonts folder?

1. Linking Font-Face CSS File:

To link your font-face CSS file located in the "/fonts" folder, use the following syntax in your href:

href="../../fonts/stylesheet.css"

• Start with "../" to move back to the "Website" folder.
• Add "fonts" to navigate to the "Fonts" folder.
• Finally, include "stylesheet.css."

2. Linking Fonts:

To link to fonts located in subfolders within the "Fonts" folder, use the following syntax in your src:

src: url('../../fonts/font1/font1.ttf') format('truetype'),
     url('../../fonts/font1/font1.svg') format('svg');

• Use the same "../" and "fonts" syntax as before.
• Navigate to the "font1" subfolder and include the font file (font1.ttf).
• Repeat for any additional font formats, using the appropriate file extensions.

Relative File Path Reminder:

When navigating through directories using file paths:

• "/": Starts from the root directory.
• "../": Moves back one directory.
• "../../": Moves back two directories.
• To move forward, specify the subdirectories.

By understanding these conventions, you can link CSS and font files from external folders accurately.

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