This topic is part of our CSS Tutorials and Add-ons section: https://myanimelist.net/forum/?topicid=2077862 Most users won't need anything beyond the first two minutes! That will show you how to install an imported font from Googlefonts, which most list designers use, and change the ones already present on your premade layout. However the rest of the video goes more in depth about changing fonts for specific sections or using a downloaded font file like an OTF or TTF. That is good to know, for high level designs. Remember, if using back-up fonts to fix broken icons use FontAwesome as one (see end of the video). Thank @Valerio_Lyndon for tips and info that went into the reupload. Youtube Link: https://youtu.be/5IGsUjxjwnk Resources HTML color picker: https://www.w3schools.com/colors/colors_picker.asp GoogleFonts: https://fonts.google.com/ Using Inspect Element: https://www.youtube.com/watch?v=cTGbVutdqfc Mapped Layout for finding selectors: https://myanimelist.net/forum/?topicid=1531417 font face file: https://www.dropbox.com/s/pg2utpbui50ov5y/fontface.css?dl=0 font face example import: @\import "https://dl.dropboxusercontent.com/s/pg2utpbui50ov5y/fontface.css"; |
Shishio-kunFeb 21, 2023 10:03 AM
| Excellent video, this will be very useful for linking new users too! :D Although, the @font-face section should probably be revised, as font-face was broken at the same time as imports and only works for the list owner. It's a pain. You have to place it inside a CSS file and import it as you would other files. You can see in this image: [Here], that the font download link within the "url()" is getting MALified (top is logged in, bottom is logged out). And unfortunately, unlike images, it becomes some sort of null file rather than a simple rehost. Using double quotes instead of url() does not work with font-face, either. :/ So, what has to be done is to upload the font file, create a text file with the font-face rule and save it as a ".css" filetype, then upload that too and import it into the CSS. So we would have our two Dropbox files. The font one:  The CSS one:  And then this would go into our code: @\import "https://dl.dropboxusercontent.com/s/c0tk6xw94bqxvj5/p5hatty.css"; MAL sure makes us jump through some hoops. Sort of off-topic, but a handy trick when changing all the fonts at once is listing fall-back fonts. For instance, icons are often inserted using "FontAwesome". So if you break some fonts through changing the font and have those rectangle icons, you can often fix them by listing "FontAwesome" as a fallback. *, *::before, *::after {
font-family: Arial, FontAwesome, sans-serif;
} |
Valerio_Lyndon said: Although, the @font-face section should probably be revised, as font-face was broken at the same time as imports and only works for the list owner. It's a pain. You have to place it inside a CSS file and import it as you would other files. You can see in this image: [Here], that the font download link within the "url()" is getting MALified (top is logged in, bottom is logged out). And unfortunately, unlike images, it becomes some sort of null file rather than a simple rehost. Using double quotes instead of url() does not work with font-face, either. :/ Wow I didn't know that :/ I can redo the end part I guess X( |
| Re-uploaded this. Add some extra tips and more help on fonts: * a way to repair broken font icons * install a font off your PC, now for other users to see * extra help under the video with the former Thanks @Valerio_Lyndon for heads-up and info! I credited you in the video description, where everyone will see :D |
| That turnaround time though, impressive! And you made the affair much easier to understand than I would have lol. |
Valerio_Lyndon said: That turnaround time though, impressive! And you made the affair much easier to understand than I would have lol. Thank you! :D I keep all my scripts so it's easy to redub these in case of this very situation. I kinda rushed the end, I could have added more info but oh well. |
| how do i select the font. i dont see the option and yes ive installed the font.... |
 𝘓𝘌𝘛𝘚 𝘋𝘖 𝘚𝘛𝘌𝘙𝘖𝘐𝘋𝘚 (｀∀´)Ψ |
Siba_Suibian said: how do i select the font. i dont see the option and yes ive installed the font.... Where and what font is installed? I don't see it in your current CSS. Is it one of the Google fonts- if so which one is the new one you're trying to change something to? I don't know what you mean by "select the font", that can mean many different things. What part of the layout or selector are you trying to add the font to? |
| i was refering to the video https://youtu.be/5IGsUjxjwnk |
𝘓𝘌𝘛𝘚 𝘋𝘖 𝘚𝘛𝘌𝘙𝘖𝘐𝘋𝘚 (｀∀´)Ψ |
???? What font are you trying to use on your list? |
this one and i dont see a select font option here as is there in the video in red  |
𝘓𝘌𝘛𝘚 𝘋𝘖 𝘚𝘛𝘌𝘙𝘖𝘐𝘋𝘚 (｀∀´)Ψ |
Ah ok they might have changed things since I released this video like four years ago You can still install a googlefont, here's a recording of it: https://i.imgur.com/vu0Z5P7.mp4 On the Google font page, you'll need to click the "Select regular 400" on the right side to add it to the "selected families" Then on the same Googlefonts page, click on the upper right View Selected Families, a new tab slides out, now click the circle next to import and copy the import code in between style tags (dont copy the style tags to, these arent for the custom CSS here on MAL) Paste the import at the top of your MyAnimeList CSS edit box as before, and as seen in the video Then you can copy stuff under the "CSS rules" part of that Googlefonts page under where you copied the import. That line of code is added to the selectors where you want the font to appear, see the recording for an example. Let me know if it works out for you. |
| Is this CSS import method still working? I can do it with Google fonts (not visible when logged out) but when i try to do it with my own fonts it just refuses to work. Note that i'm not using dropbox, because i have a website and i just uploaded the stuff on that server and using direct links (i'm not familiar with dropbox and those import links). But sure as hell my files are accessible. |
Reply to XxTHEncsEXPERTxX
Is this CSS import method still working? I can do it with Google fonts (not visible when logged out) but when i try to do it with my own fonts it just refuses to work.
Note that i'm not using dropbox, because i have a website and i just uploaded the stuff on that server and using direct links (i'm not familiar with dropbox and those import links). But sure as hell my files are accessible.
Note that i'm not using dropbox, because i have a website and i just uploaded the stuff on that server and using direct links (i'm not familiar with dropbox and those import links). But sure as hell my files are accessible.
@XxTHEncsEXPERTxX Imported CSS not working while logged out is fixable by changing the import format. It's covered in part C of the repair thread but, to summarise: your imports require a backslash after the @ and quotes instead of parentheses. Example:@\import "https://fonts.googleapis.com/css2?family=Oswald&family=Viga&display=swap"; As for your other codes, you'll have to share the links to the non-working CSS file so we can take a look. As it is now, since they're not using the format mentioned above, I am unable to view them to check for errors. This is what they look like to other people when using any format other than the one mentioned above:  Without seeing the codes though, my guess would be either a faulty @font-face rule or that your website is not set up to allow serving files cross-website. I can be more sure when I see the links to the files. |
| @Valerio_Lyndon Thanks, this is already a win. I changed the font many years ago, and i thought you can't help it with the google fonts method, but google fonts was, and is still kind of a substitute solution. As for the new font css, this is would be it: @\import "https://vvkdesign.com/hosted_fonts/WTC-Our-Bodoni-W01-Regular.css"; I tried various formats inside this css file, as there are slightly different versions in different guides. Also tried it with woff format instead of ttf. As you can tell i'm not a dev but i thought if i can just type this in and access it, so could any site, so i dumped the stuff in the public html folder on the server, where i host the miscellaneous stuff, like images for html signatures and whatever, they always worked for me. |
XxTHEncsEXPERTxXMar 11, 5:08 PM
Reply to XxTHEncsEXPERTxX
@Valerio_Lyndon Thanks, this is already a win. I changed the font many years ago, and i thought you can't help it with the google fonts method, but google fonts was, and is still kind of a substitute solution.
As for the new font css, this is would be it:
@\import "https://vvkdesign.com/hosted_fonts/WTC-Our-Bodoni-W01-Regular.css";
I tried various formats inside this css file, as there are slightly different versions in different guides. Also tried it with woff format instead of ttf.
As you can tell i'm not a dev but i thought if i can just type this in and access it, so could any site, so i dumped the stuff in the public html folder on the server, where i host the miscellaneous stuff, like images for html signatures and whatever, they always worked for me.
As for the new font css, this is would be it:
@\import "https://vvkdesign.com/hosted_fonts/WTC-Our-Bodoni-W01-Regular.css";
I tried various formats inside this css file, as there are slightly different versions in different guides. Also tried it with woff format instead of ttf.
As you can tell i'm not a dev but i thought if i can just type this in and access it, so could any site, so i dumped the stuff in the public html folder on the server, where i host the miscellaneous stuff, like images for html signatures and whatever, they always worked for me.
@XxTHEncsEXPERTxX Cool! I can see it correctly now. The font-face format seems good, I tested it out indirectly and had no issues. It does appear to be the website error. Looking at the web requests using Firefox's developer tools, it's listing the font as failed with a CORS error. CORS stands for Cross Origin Resource Sharing, it's a fancy name for a set of rules that websites use to deny access to unknown actors. I am no expert on CORS issues despite having my fair share of run-ins with them. But, that's because I usually don't control the networks I work with. It should be easier if you have control over the website settings. I took a peak at your website and assume you're using a personal instance of Wordpress, in which case I'd try this wordpress-focused article I found: [link]. It may be confusing as it throws out terms like "htaccess" and "nginx" without explanation, but those terms can be learned separately if needed. It also mentions that there are some WP plugins that could help (I have no knowledge of WP plugins). If you aren't using WordPress then you will probably still need to modify .htaccess, presuming you have access to it. In this case I would search around StackOverflow or, while I don't like recommending AI, ChatGPT. Here's ChatGPT's response of how to share TTF fonts with MyAnimeList, which also happens to be a better option than simply allowing all websites access to every file like other articles may recommend. I have no way to test the code works, but it matches the documentation I have seen in more trust worthy locations and I know it won't harm anything in trying it. Since this is getting into a more technical discussion of website management, I'm not expecting you to know everything so please ask if you need clarifications. I can't guarantee I'll have the best answers as I am not as well-versed in that space, but I do know enough to give you a starting point for most things. |
| @Valerio_Lyndon So it's a hosting problem after all... interesting, seems like an easy fix. Thank you for the direction, i didn't even know that CORS was a thing, moreover i needed to know if solutions outside of Google fonts even still supported by MAL. Although i'm not present on MAL as a designer, i want specific fonts, kind of like a super low effort personalization. Yep, my site is WP based, but i have cPanel access for the server, so i can do whatever i want with it, it just happens to have a WP site running on it now. |
Regarding the @ import code w/ a backslash, could you add the trick to the first part of your clip (from 0:50 to 1:00)? |
More topics from this board
» ❓ Ask for help here + See Frequently Asked Questions ( 1 2 3 4 5 ... Last Page )Shishio-kun - Apr 15, 2010 |
7812 |
by mtsRhea
»»
Apr 21, 5:25 AM |
|
» [CSS- MODERN] ⭐ Minimal Dashboard layout by 5cm ~ Compact and convenient! ( 1 2 3 )Shishio-kun - Sep 4, 2020 |
121 |
by Pokitaru
»»
Apr 21, 3:25 AM |
|
» [CSS-MODERN] Change list text/font colors on any list layoutShishio-kun - May 4, 2021 |
3 |
by hideso
»»
Apr 20, 4:33 PM |
|
» [CSS][Modern] ☀️ Endless Summer Layout by Cateinya ( 1 2 3 4 5 ... Last Page )Cateinya - Aug 18, 2016 |
309 |
by hideso
»»
Apr 20, 3:56 PM |
|
» [CSS - CLASSIC] Wishes of the heart ~ XXXholic layout by HahaidoShishio-kun - Dec 27, 2015 |
9 |
by tsyndi
»»
Apr 18, 9:23 PM |