How to make all fonts work on every device? (@font-face)

Hello there, I want to know how is it possible to make every font load properly on my website, from whichever device I open it…I have read something about a @font-face rule and I saw how to use that rule but I can’t really understand it, neither I can find where to upload my .WOFF file, can anybody help?

This guy explains it very well click, font-face is also explained if u watch video till the end. If you still need help after this feel free to ask again! :slight_smile:

I saw it…So in general, I can’t really use @font-face everywhere, but only in an online server, and it’s better to use the @import method? Is it possible to still have problems thereafter with my fonts? (after importing them?)

Its matter of taste I guess. I find it easier to import fonts, so that is why i do it that way. If you work on codepen i believe your only option is to import.

If you re just starting with your fcc journey i would also suggest to dump codepen and code in editor, you will have to switch sooner or later. And when u finish with your project just publish it on github, that way u ll get some valuable experience with github too.

1 Like

If you’re not using online fonts provided by Google, or AdobeTypekit, etc, and instead will be using your own WOFF fonts on your own server, you also need to verify with your web host that .woff MIME types are setup on the web server. Otherwise, the web server will not know what to do with .woff file extensions and possibly just present a Save As… diaglogue box to the user, or not load the font.

Here are some other alternatives.

1 Like