I need to know the recommended way to add a Google font to a MediaWiki skin. I know I can use Common.css and I know there might be extensions to meet the need, but as I am developing a skin I want to add the necessary fonts with the skin.
I do not want to use any extensions to achieve the goal, unless using a extension is the recommended way.
I know I can add fonts to a css/ less file but as the css and js are loaded via resource leader in Mediawiki, so I wanted to know if there is any specific rules to add Google Fonts/ externally hosted fonts.
But I found that there is no specific guideline for fonts, I can add fonts like the following,
#import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght#300&display=swap');
Your skin is likely to have a CSS stylesheet as described in the docs:
"ResourceModules": {
"skins.foobar": {
"styles": {
"resources/screen.css": { "media": "screen" },
"resources/print.css": { "media": "print" }
}
}
},
So you can embed the Google font in resources/screen.css with #font-face (example).
Related
The Question
How can I add images to a MediaWiki extension in a way that they can be referenced by css files registered as ResourceModules?
The Situation
I'm developing a MediaWiki extension which leverages a third party tool and I'm including a copy of that tool as part of the extension's resources.
The tool has js and css, which I am including like so:
...
"ResourceModules": {
"ext.leaflet": {
"scripts": "ext.leaflet/leaflet.js",
"styles": "ext.leaflet/leaflet.css"
}
},
...
The third party tool also includes an image directory which includes various images referenced by leaflet.css, but I don't know where to put that in a way that MediaWiki will serve it alongside the CSS / JS.
The image url is resolving to {SERVER}/ext.leaflet/images/marker-icon.png
You can put the image assets in an image folder in your extension folder, and reference it in your CSS in a relative fashion.
Take a look at the Echo extension for example:
The image is referenced like this in the css
background-image: url( ../../images/pending.gif );
https://github.com/wikimedia/mediawiki-extensions-Echo/search?q=pending.gif
And stored here:
{SERVER}/extensions/Echo/images
https://github.com/wikimedia/mediawiki-extensions-Echo/tree/master/images
The CSS is registered as ResourceModule on this line
https://github.com/wikimedia/mediawiki-extensions-Echo/blob/97771e3369b7949db242f72551ac6efe803881e5/extension.json#L460
In your JS you could use mw.config.get('wgExtensionAssetsPath') in my case this returns /extensions
I want to use a SVG logo in my woocommerce storefront theme. I can't use the Customizer b/c it won't allow SVG uploads. Is there a way around that restriction?
If not, how would I edit the hook/action to use the SVG?
I see the storefront_site_branding template function in the storefront/inc folder and I tried creating an inc folder in the child theme but apparently the override does not work on files within the inc folder.
If you are using a child-theme you can add this to your functions.php, if you update you themes functions.php it may override during your next patch/update.
I sourced this code from:
https://themeisle.com/blog/add-svg-to-wordpress/
Method 1: Use the SVG Support plugin
If you’re looking for the fastest way to add SVG to WordPress, this is it. We’re going to use the SVG Support plugin, which enables this particular image format and adds support for it to your media library:
The process is simple. You just need to install and activate the plugin as usual, and then you’ll be able to add SVGs to your WordPress site.
WordPress now requires us to have the tag in our SVG files before uploading. Please open your SVG file in any code editor (such as sublime text) and add the following to the very first line of your SVG file and save, so that you don’t encounter security errors:
<?xml version="1.0" encoding="utf-8"?>
However, there are two more settings you might want to change depending on your needs. First off, let’s go to the Settings → SVG Support tab:
How to add SVG to WordPress using SVG Support plugin
Inside, you’ll find two options. The first turns on the plugin’s Advanced Mode, which lets you target your SVGs with CSS. If you don’t want to animate your SVGs, then you can skip this option.
Second, you can also restrict the ability to upload SVGs to administrators only by enabling the Restrict to Administrators? feature. That one’s up to you!
Method 2: Modify your site’s functions.php file
Every WordPress website has its own functions.php file. This essential component includes important functions, classes, and filters. It’s also your ticket to adding SVG support to WordPress through a few lines of code.
To reach this file, you’ll need to access your website via FTP. If you don’t have a client, we recommend using FileZilla. Once you’ve found your FTP credentials and accessed your site, you’ll want to head to your root folder, which is usually either called public_html or named after your site:
The WordPress root folder.
Now, enter the wp-includes folder and look for the functions.php file within. It’s important to note that this is the parent file, while there are also individual functions.php files for each of your themes:
The wp-includes folder.
For this example, we’ll add the code to the parent file. However, you may find the changes are lost when WordPress is updated, so feel free to alternatively add it to your theme-specific functions.php file depending on the approach you’re more comfortable with.
(Editor’s note: Doing this in your theme’s functions file is actually the recommended approach.)
Access the functions.php file now by right-clicking on it and choosing the View/Edit option. This will open it using your default text editor. Now, scroll to the bottom and paste this code snippet there:
function add_file_types_to_uploads($file_types){
$new_filetypes = array();
$new_filetypes['svg'] = 'image/svg+xml';
$file_types = array_merge($file_types, $new_filetypes );
return $file_types;
}
add_filter('upload_mimes', 'add_file_types_to_uploads');
total newbie at html here.
Im looking to incorperate any one of these fonts from:
https://andrewsonline.co.uk/content/fonts/
into a static github page im making for a website.
I see the css code for these fonts is here:
https://andrewsonline.co.uk/content/fonts/fonts.css
Do I just need to copy and paste this into my html?
Where do I place the eot, woff, tff and svg files?
Thankyou for the help
It doesn't matter where you place the fonts, so long as they are referenced correctly:
The prefix / is relative to the root directory.
The prefix ./ is relative to the working directory.
The prefix ../ is relative to the parent directory.
Just make sure to define the font in a #font-face, specifying the desired name in font-family, and the URL of the font in the src attribute. The only font URL that you need to link to is the .woff (the others are just browser-specific alternatives or outdated extensions).
Typically, you would just use something similar to the following:
#font-face {
font-family: externalFont;
src: url(/fonts/GT-Walsheim-Pro-Light.woff);
}
div {
font-family: externalFont;
}
<div>Stylish</div>
Note that Andrew's Online have set up a "No Access-Control-Allow-Origin", meaning that the font inclusion would be blocked by CORS policy if you were to link to their fonts directly. You'll need to download their fonts, then link to a local copy.
Hope this helps! :)
I decided to change the font of my page, with another downloaded from internet. I tried this way, but it doesn't work. The file "font.ttf" is in the same folder as the html file.
#font-face {
font-family: Test;
src: url(font.ttf);
}
header {
font-family: Test;
width: 100%;
margin: auto;
height: 48px;
background-color: white;
}
If your downloaded font has been saved in the main fonts folder on your system then you should just use it the same way as you would use any other font.
E.g.
font-family='New Font';
There should be no difference :)
Directory to the fonts folder;
Control Panel > Appearance and Personalisation > Fonts > Add Font
To add font to your website, you will need more than the font.ttf file. Also, be as organized as possible from the start and don't just dump everything into one level. Later, when more things are added, you may have a mess and it can get more confusing as things get more complicated. Neatly organize into folders.
1- You will need webfont extensions. Meaning, use an online generator to generate webfonts by submitting your .ttf file (make sure you follow the license allowance). Those extensions work on different browsers.
2- You need to create a .CSS file for webfonts. Here is a link for an example:
[link] How to embed fonts in CSS?
3- You need to follow the exact path on how your fonts can be reached.
4- When you open up your .ttf file, pay attention to your font spelling. (this part can be tricky)
5- You will also need a .htaccess file that helps to link your web fonts to your site. You may see your desired font on your local device browser but it may not work on another device that does not have that font installed.
I am trying to change my stylesheet but i can't find it in Wordpress. I also use LESS/SASS. Searched over the whole internet but can't find my solution, so I try it via Stackoverflow.
Thanks in advance...
Login into WordPress, there you should have a section called "Themes" or "Design". Choose "Theme Editor". There will be a list of all the files you can edit, the CSS stylesheet should be named style.css.
You should find it in the following directory wp-content/themes/your-theme/style.css. If you're theme is using LESS and SASS then there may be a folder for those files.
Often in :
wp-content/themes/theme_name/style.css
But often, there are many stylesheets. You can view source of you website to get the name of avtices stylesheets (if you see <link> with XXX.css, you know that this style sheet is active, and you can get the path).