Help
cancel
Showing results for 
Search instead for 
Did you mean: 
Highlighted
Copilot Lvl 2
Message 1 of 2

CSS Doesn't display but html does

Solved! Go to Solution.

Hello all, I have never used html/css before, with little programming knowledge and maybe basic Javascript. 

 

The issue I am having is that when I go to weather-clear.com on my local computer, everything displays fine. However, when I open up the page on any other computer, everything displays as Times New Roman, super ugly. 

 

Repository:https://github.com/itsisaac19/test 

 

Also, I realize that what I did was basically upload all the Html and CSS in one batch. I exported from Adobe Xd, and there are options to copy CSS, etc. I've looked at other repositories, and they have separate folders for their CSS. Maybe that has something to do with it?

Please Help! 

1 Reply
Highlighted
Solution
Copilot Lvl 2
Message 2 of 2

Re: CSS Doesn't display but html does

Well, no one seemed to answer, so I put on my big boy pants and went to Google. 

 

One thing before I explain, it confuses me why, when I scroll through the forums, all these fancy complex situations are being talked about, the majority of the words being used not even in my remote vocabulary-yet one person doesn't have just 3 mins to explain a very simple problem, that me, a fresh slate beginner, learned? 

 

Anyways, here's what I found out on Google:

 

Turns out, not everyone has pre-downloaded all your custom fonts on to their computer, (big surprise, right?) 

so the way to get around not just using Arial, Verdana, or other default fonts is to go to your custom font website and get embed code. Since I was using Adobe Xd, I went to https://fonts.adobe.com/

 

On each font square that displays a preview of the font, there's a little embed symbol. Then you add it to your web project and it'll give you a some code to put in your <head>*.

 

From there you can do one of two things: 1. Copy/paste the embed code 2. Copy/paste the @import link. I decided to use the import link, however, I think that the default one is easier, as Adobe wrote in a little warning caption: "The default embed code is simplest to implement and ideal for most websites".

 

Once you've pasted it in the header, then just define it in your CSS for that text and it will properly load into someone else's pc/computer.

 

*Note that your custom fonts, where you got them, and the process of finding the code could be completely different than Adobe.

 

P.S. I also know you can use @font-face with .ttf and .woff, etc.