英文:
Impossible to add external font in CSS with Bootstrap 5
问题
抱歉，我只能为您提供翻译服务，无法处理代码部分。
英文:
Sorry I'm new here, my post might not be perfect but I'd appreciate if you could help me kindly.
So the issue is the following one : I can't make the font I download or linked work, either on my h1 font or body.
I'd like the PressGothic in the h1 and if it doesn't work, the Anton.
I've tried differents options :
- linked the downloaded font files with @font-face
- calling the front with @import url in the CSS and later in the file with font-family, even forcing it with "!important".
After many tries, only Oswald works in the body (in the footer only).
Any solution other than customizing bootstrap ? Because I will not follow the project and would prefer the other person not to have to redo the boostrap file and well, I would like to learn from my issue so I do better next time.
Thank you!
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
@font-face {
font-family: 'Exo';
src: url('assets/fonts/Exo-VariableFont_wght.ttf');
}
@font-face {
font-family: 'PressGothic';
src: url('assets/fonts/PressGothicPro.ttf') format('truetype');
}
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,300;0,400;0,500;0,700;1,100&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@200;300;400;500;600&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Anton&display=swap');
body {
background: black;
color: white;
font-family: 'Oswald', sans-serif;
}
h1 {
text-transform: uppercase;
font-size: 5rem;
font-family: 'Anton', sans-serif !important;
}
p {
font-family: 'Montserrat', sans-serif;
}
<!-- language: lang-html -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous" />
<link href="css/style.css" rel="stylesheet" />
</head>
<body id="page-top">
<header class="text-white">
<div class="container px-4 text-center">
<h1>title</h1>
<p>
test font
</p>
</header>
<footer class="py-5 bg-dark">
<div class="container px-4">
<p class="m-0 text-center text-white">
copyright
<a class="text-light" href="assets/doc/qr-code.pdf">
doc test</a
>
</p>
</div>
</footer>
<!-- end snippet -->
答案1
得分: 0
It seems like you imported the external font family correctly using @font-face. Still, after that, you are also importing the font families from Google Fonts, which causes the conflict between font families, which might be why you are not getting your font in your project.
要解决这个问题，请移除从Google Fonts导入字体的部分。
如果这没有解决您的问题，请告诉我 
英文:
It seems like you imported the external font family correctly using @font-face. Still, after that, you are also importing the font families from Google Fonts, which causes the conflict between font families, which might be why you are not getting your font in your project.
to Fix this remove the imports of the font from Google Fonts.
I hope I've been able to solve your query if not then let me know
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论