Currently, I have 4 different fonts that I need to incorporate into a website, and their files are saved within my website folder.
Baskerville.ttc
BellGothicstd-Black.otf
BellGothicstd-Bold.otf
JennaSue.ttf
I attempted to import the fonts using @Import, but unfortunately, they did not display correctly. Here is the code I used:
@import url(../fonts/BellGothicStd-Black.otf);
@import url(../fonts/BellGothicStd-Bold.otf);
@import url(../fonts/Baskerville.ttc);
@import url(../fonts/JennaSue.ttf);
I also experimented with the @font-face rule by implementing the following approach:
@font-face {
font-family: 'BellGothicBlack';
src: url('../fonts/BellGothic-Black.otf') format('OpenType'),
}
@font-face {
font-family: 'BellGothicBold';
src: url('../fonts/BellGothicStd-Bold.otf') format('OpenType'),
}
@font-face {
font-family: 'Baskerville';
src: url('../fonts/Baskerville.ttc') format('OpenType'),
}
@font-face {
font-family: 'JennaSue';
src: url('../fonts/JennaSue.ttf') format('TrueType'),
}
I am facing difficulties in achieving the desired results. If anyone could provide guidance on what might be going wrong, I would greatly appreciate it as I suspect there may be missing code or an error in my implementation.
Thank you for your assistance. Best regards, Tom