Submitted over 1 year ago

HTML and CSS

#accessibility#cube-css#foundation

Daniel Agofure• 10

@DanielAgofure

Preview site View code

This is a solution for...

QR code component

HTML
CSS

1newbie

View challenge

Design comparison

SolutionDesign

Solution retrospective

How can I upload fonts from google?

Community feedback

Adriano• 34,000

@AdrianoEscarabote

Posted over 1 year ago

Hi Daniel Agofure, how are you?

I really liked the result of your project, but I have some tips that I think you will like:

A tip I give you to know how to use custom fonts in css, read this article: click here

1- Page should contain a level-one heading click here

2- Document should have one main landmark, you could have put all the content inside the main tag click here

3- <html> element must have a lang attribute click here

I noticed that the content was not centered, to fix this I did the following:

body { display: flex; align-items: center; justify-content: center; min height: 100vh; }

There is a file called style-guide.md in it it has all the colors and fonts that were used in the development of the project, it comes along with the images.

the rest is great!

Hope it helps...👍

Daniel Agofure• 10

@DanielAgofure

Posted over 1 year ago

@AdrianoEscarabote Yes thanks a lot

kxnzx• 870

@kxnzx

Posted over 1 year ago

Hello Daniel,

The name of the font family that is required to use in this challenge is named "Outfit" in the weights Regular (400) and Bold (700).

Go to https://fonts.google.com/ and type in the name of the font family in the search bar
Click on the font family and scroll down. You will see a list with all the font weights
Click on the plus + to select the font weight you need, it will be added on the menu on the right side
You'll see two radio buttons with <link> and <import> on the right side on that menu. Select <import> and copy the following link: @import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;700&display=swap');
Place the this @import link inside your css file. Now you're ready to use the font family in your styles

Daniel Agofure• 10

@DanielAgofure

Posted over 1 year ago

@kxnzx Thank you, this was helpful

kxnzx• 870

@kxnzx

Posted over 1 year ago

@DanielAgofure Yrw! :)

Elaine• 11,420

@elaineleung

Posted over 1 year ago

Hi Daniel, about your question regarding Google Fonts, simple click on the link in the style guide that's in the challenge zip file, and once you're in the font's Google page, click on the font weights that were listed in the style guide. After that, copy the link that's appears in the sidebar, and past that link in your head tag. You also have the option to use import in your CSS, and that is also fine. The key is to make sure you use one of these methods and that you use the appropriate one. After adding the link to your file, just use it by adding the name of the font to the appropriate selector in the CSS, like this:

body {
  font-family: // name of font here
}

One last comment I have in looking at your code: Try not to use the huge margins to position your element The best way is just to use either flexbox or grid in the body selector.

Great work on the whole!

Daniel Agofure• 10

@DanielAgofure

Posted over 1 year ago

@elaineleung Thank you, this was helpful

Please log in to post a comment

Join 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