Load font locally via CSS - css

Question

I have a small static website and I need to move it on an USB to make it possible to open it via this USB.
Via CSS I defined those rules for the fonts (Is a custom font):
#font-face {
font-family: 'MyFont_SerifReg';
src: url('/assets/fonts/MyFontSerifReg.ttf') format('truetype');
src: url('/assets/fonts/MyFontSerifReg.eot'); /* IE9 Compat Modes */
src: url('/assets/fonts/MyFontSerifReg.eot?#iefix') format('embedded-opentype'); /* IE6-IE8 */
src: url('/assets/fonts/MyFontSerifReg.woff') format('woff'); /* Pretty Modern Browsers */
}
#font-face {
font-family: 'MyFont_SansBol';
src: url('/assets/fonts/MyFontSansBol.ttf') format('truetype');
src: url('/assets/fonts/MyFontSansBol.eot'); /* IE9 Compat Modes */
src: url('/assets/fonts/MyFontSansBol.eot?#iefix') format('embedded-opentype'); /* IE6-IE8 */
src: url('/assets/fonts/MyFontSansBol.woff') format('woff'); /* Pretty Modern Browsers */
}
#font-face {
font-family: 'MyFont_SansLig';
src: url('/assets/fonts/MyFontSansLig.ttf') format('truetype');
src: url('/assets/fonts/MyFontSansLig.eot'); /* IE9 Compat Modes */
src: url('/assets/fonts/MyFontSansLig.eot?#iefix') format('embedded-opentype'); /* IE6-IE8 */
src: url('/assets/fonts/MyFontSansLig.woff') format('woff'); /* Pretty Modern Browsers */
}
#font-face {
font-family: 'MyFont_SansDem';
src: url('/assets/fonts/MyFontSansDem.ttf') format('truetype');
src: url('/assets/fonts/MyFontSansDem.eot'); /* IE9 Compat Modes */
src: url('/assets/fonts/MyFontSansDem.eot?#iefix') format('embedded-opentype'); /* IE6-IE8 */
src: url('/assets/fonts/MyFontSansDem.woff') format('woff'); /* Pretty Modern Browsers */
}
body {
font-family: 'MyFont_SansLig';
}
h2 {
font-family: 'MyFont_SerifReg';
font-size: 40px !important;
}
h4 {
font-family: 'MyFont_SansBol';
line-height:1.5em;
}
p {
font-family: 'MyFont_SansLig';
font-size:16px;
}
b {
font-family: 'MyFont_SerifReg';
font-size:18px;
}
And I have no problem to load the fonts while visiting the website via We
EDIT:
A screen from the Console, Looks like the "fonts" folder is not loaded in "Sources"
Console
The problem appears only when I try to load the website in Local: the font's are not loaded.
What am I writing wrong?

Answer 1

It might be because the path problem.
Try to use relative path (assume the assets folder is at the same place as the html): ../assets/fonts/MyFontSerifReg.ttf

Answer 2

#font-face {
font-family: 'MyFont_SerifReg';
src: url('/assets/fonts/MyFontSerifReg.ttf') format('truetype'),
url('/assets/fonts/MyFontSerifReg.woff') format('woff');
}
Please make sure to cross-check below trouble shooting guide:
path provided in url()
Apply Style as below for example:
body{
font-family: 'MyFont_SerifReg'; // Same name defined in rule
}
Add reference of your CSS file where rules are defined in HTML.