Καλημέρα, μπορείς να χρησιμοποίησεις αυτό το εργαλειο για να σου κάνει τα αρχεια των fonts σε webfonts και να σου δώσει και το css των και εν συνεχεια με wp_enqueue_style να κάνεις enqueue το font css όπως θα έκανες κανονικά τα CSS .
https://www.fontsquirrel.com/tools/webfont-generator
Στο style.css ή όπου αλλού μπορείς να χρησιμοποιήσεις πλέον τo font-family property.
Πρόσεχε αν θες να βάλεις google fonts και να τους κανεις host τοπικά τότε μπορείς να χρησιμοποιήσεις και αυτλο το εργαλείο https://google-webfonts-helper.herokuapp.com/fonts
Καλησπέρα @archimidism,
Ευχαριστώ για την απάντηση. Για το fontssquirrel έχω διαβάσει ότι για variable fonts σπάει τον άξονα τους χάνουν και έτσι χάνουν την ιδιότητα τους. Δεν θα μπορώ δλδ να χρησιμοποιήσω font-variation-settings ώστε να έχω ας πούμε Work Sans και να αλλάζω μόνο το wgth.
Αρχικά ορίζω τις γραμματοσειρές έτσι. Έχω κατεβασμένα σε φάκελο τις γραμματοσειρές π.χ: WorkSans-VariableFont_wght.ttf. Ενώ δούλευε όταν έχτιζα το website απλά με html, css, js, τώρα που προσπαθώ να το μετατρέψω σε wordpress δεν ξέρω τι παίζει. Δεν θέλω να χρησιμοποιήσω Plugins ούτε να κάνω link σε cdn google fonts κτλ.
@font-face {
font-family: “Work Sans”;
src: url(‘/assets/webfonts/WorkSans-VariableFont_wght.ttf’) format(‘truetype’);
font-style: normal;
font-display: swap;
}
Θα το ψάξω και άλλο το θέμα.
@nikos002 μήπως το transfonter θα σου έκανε καλύτερη δουλεια;
Λοιπον για το άλλο που λες εστω κανεις αρχειο στο φάκελο theme-name/assets/fonts/fonts.css όπου μέσα γράφεις
@font-face {
font-family: “Work Sans”;
src: url(‘/assets/webfonts/WorkSans-VariableFont_wght.ttf’) format(‘truetype’);
font-style: normal;
font-display: swap;
}
Προσοχή στο src να είναι σωστό βέβαια και εν συνεχεία στο functions.php το κάνεις enqueue οπως καθε άλλο script πχ
function custom_font_style(){
wp_enqueue_style('work-sans', get_template_directory_uri().'/assets/fonts/fonts.css',
array(),'v1.0','all');
wp_enqueue_style('main-style', get_stylesheet_uri()); // auto kalei to arxeio style.css
}
add_action('wp_enqueue_scripts','custom_font_style');
Αν το κανεις αυτο , μέσα στο style.css θα μπορείς κάλλιστα να γράψεις το εξής:
h2{font-family: 'Work Sans',sans-serif;
και το font σου θα παίζει. Προσοχή ξανά να βάλεις το σωστό path και φυσικά να υπάρχουν και τα αρχεία που λεει το path.
@archimidism Ευχαριστώ!
Την βρήκα την λύση έβαλα: src: url('http://localhost/learnwordpress/wp-content/themes/mySite/assets/webfonts/Bitter-VariableFont.ttf') format('truetype');
Δούλεψε επιτέλους. Τώρα για την συμπίεση θα το ψάξω και άλλο.
-
Αυτή η απάντηση τροποποιήθηκε στις 3 έτη, 10 μήνες πριν από nikos002.