Responsive Single Price Grid Component using Virtual Studio Code
Design comparison
Solution retrospective
I had problem with the importing of external font and the elimination of the line underneath an hyperlink.
Community feedback
- @josh76543210Posted over 1 year ago
Hello @Lovethrech,
Congratulations on completing the challenge!
This challenge specifies a
font-family
of Karla and afont-weight
of 400 and 700. The code to import the font to your css with these parameters is:@import url('https://fonts.googleapis.com/css2?family=Karla:wght@400;700&display=swap');
To answer your other question, you can use
text-decoration
to remove the underline from any text or links:a { text-decoration: none; }
Happy Coding!
Marked as helpful1 - @rrebolledo90Posted over 1 year ago
Hello, if you want to import the font’s there are two ways you can achieve this. The simplest way is to link the font directly into your index.html document (directly in the head). I saw that you added the Import rule into your CSS file, but it goes into the head of your html. You would use the following in the head.
<link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Karla:wght@400;700&display=swap" rel="stylesheet">In your css file you would use the following to choose the Karla font.
{ font-family: 'Karla', sans-serif; }
The next way you achieve this is to use the relative feature. For example, you would download the fonts from google and use the following rule: you would have to add the specific fonts to one of your relative files.
@font-face {
font-family: Karla;
src: url(Fonts/Karla-Regular.ttf);
}
@font-face {
font-family: Karla-Bold;
src: url(Fonts/Karla-Bold.ttf);
Marked as helpful0
Please log in to post a comment
Log in with GitHubJoin our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord