[CSS - CLASSIC] Add any font to your list layout: even people who don't have it installed will see it!
This topic is part of our CSS Tutorials and Add-ons section: http://myanimelist.net/forum/?topicid=419405 Normally people can't see the fonts you put into your CSS unless they have them too. This is why its recommended you use common fonts so the most possible people can see the font families you use. But thanks to this trick I got from Hahaido you can use any font on your page AND people will be able to see it even if they don't have it installed in their computer or browser! I'll take you through the steps! Its very easy and I'll give you visual examples too. Step 1: Find the font you want Search http://www.google.com/webfonts for a font you want to use. Even tho they have a wide variety of fonts, I actually don't find many popular named fonts here. But thats fine, there are so many fonts you're bound to find something close to what you want to use! Tip: When you go to this page, hit the tab "word" near the top. It will display more fonts at a time and make finding one much easier, like in the example below! When you find the one you like want to use on your list, click on the part I circled in the pic below. I'm using Lover's Quarrel. You can use the font you want tho. Step 2: Get the import link from the font On the next page it takes you to, scroll down to the blue box and click the import tab, pointed to in the example below. The code circled below is what you want to copy, make sure you copy the whole thing! Put what you copied at the top of your CSS edit box, as in this example below. Now you can move on to step 3! Step 3: Set your font in the CSS. Now that the font import is at the top of your CSS, the font will be viewable to anyone who visits your list, even if your or them don't have the font installed! The code to add fonts is always font-family:; with the name of the font after the colon, before the semicolon. The name of the font is going to be the same as it is in the import link, after the equals sign and before parenthesis. Turn plus signs into spaces. For example, from the import from step 2, the font name is in green and the rest of the import in red and blue: @import url(http://fonts.googleapis.com/css?family=Lovers+Quarrel); So this font becomes Lovers Quarrel, because as said we turn the plus signs into spaces. If I were this code to put in body, it should look something like this: body { font-family: lovers quarrel; } Note: You can apply the font to what ever section you want, but most premade CSS has a font section or you can use besides body, or splits sections up and lets you add the font there. For example, I'll put the import link we got from Step 2's example pic in a premade CSS from this club, Snapshots. By scrolling down I find the section "Font Settings". I can add my font code there like I am supposed to with this CSS. And this is the result! I increased font-size a little too: Adding the font to the entire layout: You can also use this universal selector to add the font to your entire layout. Just put this at the bottom of your CSS and put the name of the imported font in between the : and !important. Leave spaces between them all. * { font-family: !important; } Try to avoid having to use this tho, its generally better in the long run to add the font to individual sections. Adding more fonts: Just repeat steps 1 through 3, and add a new import link! You can posts questions and info regarding this in this topic. This trick was originally posted by Hahaido here: http://myanimelist.net/forum/?topicid=443937 |
Shishio-kunSep 1, 2016 9:22 PM
espa said: Another way to do this if you can't find the font you like on google fonts, but you have a font you like on your computer already is to convert it to a webfont here: http://www.fontsquirrel.com/tools/webfont-generator and then place all the files into your public dropbox folder and open stylesheet.css and replace all of the url source file links to the Dropbox's public link, and then grab the stylesheet.css public link and put it on your main code with @import. The font-family name of your converted font should be mentioned within the stylesheet.css Dunno if this knowledge is already widely available, but just thought some of you might appreciate this method, if you wanted to use a font that's not in google fonts. I can't quite get this method to work. Don't you need a pro account for public links? If so, is there a way to do it with Google Drive? Thanks! |
 |
MoFried said: You don't need a pro account - just right click the file and select "Share Dropbox Link" to copy the url.espa said: Another way to do this if you can't find the font you like on google fonts, but you have a font you like on your computer already is to convert it to a webfont here: http://www.fontsquirrel.com/tools/webfont-generator and then place all the files into your public dropbox folder and open stylesheet.css and replace all of the url source file links to the Dropbox's public link, and then grab the stylesheet.css public link and put it on your main code with @import. The font-family name of your converted font should be mentioned within the stylesheet.css Dunno if this knowledge is already widely available, but just thought some of you might appreciate this method, if you wanted to use a font that's not in google fonts. I can't quite get this method to work. Don't you need a pro account for public links? If so, is there a way to do it with Google Drive? Thanks! It doesn't matter where you host the files, just make sure to change the links appropriately |
 |
| Where did the images go, I want a custom font 😰😰😰 |
This tutorial is for the old layouts, this link takes you to the one for Modern: https://myanimelist.net/forum/?topicid=1499059#msg63378290 |
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] [VIDEO GUIDE] ⭐️ How to change fonts on a list layoutShishio-kun - Jul 15, 2019 |
17 |
by hideso
»»
Apr 20, 4:03 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 |