• Επιλύθηκε nikos002

    (@nikos002)


    Γεια σας!

    Θα μπορούσε να μου πει κανείς πως εγκαθιστώ γραμματοσειρές στο wordpress; Προσπαθώ να δημιουργήσω ένα site σε local enviroment xampp. Ξέρω πως να το κάνω με css και τα λοιπά, αλλά στο wordpress έχω δοκιμάσει διάφορα και πραγματικά δεν βγάζω άκρη.

    Επίσης θέλω να χρησιμοποιήσω variable fonts, αλλά βλέπω σαν ttf είναι λίγο μεγάλα τα αρχεία. Υπάρχει τρόπος να τα συμπιέσεις σε woff ή woff2, χωρίς να χάσεις την ιδιότητα τους ως variable fonts;

    Αν μπορεί κάποιος με βοηθήσει θα είμαι ευγνώμων. Στο σύνδεσμο στο github στον φάκελο assets θα βρείτε 3 σελίδες main.css, web-fonts.css και ο φάκελος γραμματοσειρών webfonts.

    Ελπίζω να μην σας κούρασα ευχαριστώ!

    Η σελίδα για την οποία χρειάζομαι βοήθεια: [συνδεθείτε για να δείτε τον σύνδεσμο]

Επισκόπηση 4 απαντήσεων - 1 έως 4 (από 4 συνολικά)
  • Καλημέρα, μπορείς να χρησιμοποίησεις αυτό το εργαλειο για να σου κάνει τα αρχεια των 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');
    Δούλεψε επιτέλους. Τώρα για την συμπίεση θα το ψάξω και άλλο.

    • Αυτή η απάντηση τροποποιήθηκε στις 4 εβδομάδες, 1 ημέρα πριν από nikos002.
Επισκόπηση 4 απαντήσεων - 1 έως 4 (από 4 συνολικά)
  • Θα πρέπει να έχετε πραγματοποιήσει σύνδεση για να απαντήσετε σε αυτό το θέμα.